Vue 기초

우선적으로, html파일을 생성한 후에

    <div id="app">
       {{ message }}
    </div>  

   var app = new Vue({
     el: '#app',
     data: {
       message: '안녕하세요!'
     }
})

처럼 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수있다.
위의 코드처럼 DOM내부의 내부문자를 바꿀 수도 있지만 속성값도 자유자재로 변경이 가능하다.

   <div id="app">
      <input v-bind:type="type" :value="inputData"> 
      <a :href="gethshLink('@gga01075')">상혁이 블로그 사이트</a> 
   </div>

 <script>
         new Vue({
            el: '#app',
            data : {   //프로퍼티 
                inputData : 'hello',
                type : 'number',
                link : 'https://velog.io/',
            },
            methods : {  //메소드
                gethshLink(channel){
                    return this.link + channel;
                },
            }
         });
     </script>

위의 코드처럼 <input>태그의 type속성을 스크립트로 연결시키려고한다. 그러면 v-bind:속성명="프로퍼티명 또는 메소드명"을 넣으면된다.
그리고 이것은 <input :value="inputData"처럼 줄여서 쓸 수 있다. 또한 속성값 안에 메서드의 인자도 넣을 수 있는데
<a :href="gethshLink('@gga01075')">상혁이 블로그 사이트</a>처럼 :속성명="메서드명(argument)"의 형태로 넣으면 된다.