[Vue.js] 템플릿 문법

1. Mustache 구문

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

<span v-once> 변경 없는 메시지 : {{ msg }} </span>

<!-- mustache 구문에서는 Javascript 표현식의 모든 기능을 제공한다.-->

{{ number + 1 }}
{{ ok ? 'yes' : 'no'}}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-'+id"></div>

2. HTML 출력 구문

<p> mustaches 사용 : {{ rawHtml }} </p>
<p> 직접 html 사용 : <span v-html="rawHtml"></span></p>
    <!--하지만 이 때 데이터 바인딩은 무시된다. -->

3. 속성에는 v-bind

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

<!-- boolean 일 경우에는 -->
<button v-bind:disabled="isButtonDisabled">
    Button
</button>

4. 디렉티브 (v- 접두사가 있는 속성)

1. v-bind (속성 갱신)
2. v-on (이벤트 수신)
3. v-bind:[attributeName] (동적 속성 갱신 : 2.6.0 부터 가능)