[Vue.js] 디렉티브 내용정리

🌟디렉티브

🎯값을 렌더링하는 디렉티브

1. v-bind HTML 속성에 접근하는 디렉티브입니다.

   <a v-bind:href="#Vue instance내의 data"></a>
   <a :href="#Vue instance내의 data"></a>  <!--약어ver-->

2. v-once 일회성 렌더링을 지원하는 디렉티브입니다. Vue instance내의 데이터는 DOM과 연결되어 실시간 반응형으로 작동하지만 해당 디렉티브를 사용하면 초기값을 유지하여 function에서 데이터를 조작해도 그 라인은 초기값을 출력하게 됩니다.

   <h1 v-once>{{data}}</h1> <!--function 조작 전 데이터가 출력됩니다-->
   <h1 @>{{data}}</h1><!--약어ver-->

3. v-html 데이터 내의 html문법요소를 인식하는 디렉티브입니다.

🎯사용자 입력 핸들링 디렉티브

1. v-on 이벤트와 함수를 이어주는 이벤트 핸들러 역할을 하는 디렉티브입니다. 마우스 관련 이벤트에는 click dblclick mousemove등이 있으며 키보드 관련 이벤트는 keyup+키 로 설정해줍니다.

   <button v-on: event = "methods">

2. v-model 사용자의 입력값을 자동으로 Vue instance내의 data값으로 연결해줍니다.한글자 늦게 동기화가 된다는 한계점이 있습니다.

   <input v-model="input">

   new Vue({
   data: {
   input: ''
   }
   })