[VUE.JS] 템플릿 문법

https://v3-docs.vuejs-korea.org/guide/essentials/template-syntax.html

템플릿 문법 | Vue.js

 

보간법

데이터 바인딩의 가장 기본적인 형태는 "Mustache"(이중 중괄호) 문법을 사용한 텍스트 보간법입니다

<span>메세지: {{ msg }}</span>

 

속성

v-once : 데이터 마운트를 최초 1회만 실행, 추후 변화 없음

<h1 
    v-once  
    @click="add">
    {{ msg }}
  </h1>

 

v-html :  실제 HTML을 출력

<p>텍스트 보간법 사용: {{ rawHtml }}</p>
<p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>

 

v-bind : 데이터 바인딩

<div v-bind:id="dynamicId"></div>

<div :id="dynamicId"></div>

 

v-on : dom 이벤트 수신

<a v-on:click="doSomething"> ... </a>

<!-- 단축 문법 -->
<a @click="doSomething"> ... </a>

 

동적인자

<a v-bind:[attributeName]="url"> ... </a>

<!-- 단축 문법 -->
<a :[attributeName]="url"> ... </a>