[FrontEnd] 뷰 디렉티브

🌟 Vue directive

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

v-bind

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

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

v-once

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

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

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

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

v-on

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

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

v-model

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

<input v-model="input">

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