Intro - el, data, methods

설치

=> npm install vue

 

기본적인 개념은 react와 크게 다르지 않다.
HTML의 어떠한 특정 태그 안에서,
SPA, 즉 SINGLE PAGE APPLICATION으로 사용하기 위하여,
페이지는 하나이지만 내용은 바뀔 수 있도록 한다.

• data 중심의 사고를 해야 한다!
• v-라는 접두어로 주로 사용한다
• el, data, methods라는 명명은 건드리면 안 된다!!!

1. el : rerender를 통해 다루고자 하는 태그를 선택하는 부분
2. data : react의 state 같은 개념으로, 어떤 rerender를 할 지에 대한 기준값을 나타내는 곳
3. methods : data를 건드릴 수 있는 함수를 정의하는 곳

ex)

/*
HTML 코드 내에서 특정 id 값을 가진 div 태그 내부를 사용하고 싶다.
먼저 cdn으로 vue.js를 사용할 수 있게 src를 첨부한다.
*/
&ltscript src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&lt/script>
&lt/head>
&ltbody>
    &ltdiv id="root">
        &ltdiv v-if="liked"> 좋아요 누름 &lt/div>
        // v-if를 쓰면 해당 태그를 조건문을 통제 가능
        &ltbutton v-else v-on:click="onClickButton"> Like &lt/button>
        // v-else는 v-if가 false일 경우 렌더되는 태그이다.
        // v-if 태그와 형제 태그이면서, 인접해야(바로 그 다음 라인에 위치) 사용할 수 있다.
        // 물론 v-else-if 라는 조건을 붙여 사용도 가능하다.
        // v-on:event 라고 써 줘야 vue 통제 하의 태그라고 인식한다
       &lt/div>
&lt/body>
&ltscript>
    // vue js에서의 기본 세팅을 한다
    const app = new Vue({
        el: '#root',    //어떤 태그의 내부를 다룰지 지정하는 곳
        data: {        //react의 state 같은 느낌, data 내의 값이 바뀌면 rerender 일어난다
            liked: false,
        },
        methods: {    //사용할 함수들을 정의하는 부분
            onClickButton() {
                this.liked = true;        //여기서 this는 data를 가르킨다
            }
        }
    });
&lt/script>