• DOM-based templating implementation
• fundamentally different from string-based templates

데이터 바인딩

방법1. text interpolation

변하는 값

<span>Message: {{ msg }}</span>

변하지 않는 값

<span>This will never change: {{* msg }}</span>

방법2. raw html

• {{}} : interprets the data as plain text, not html
• {{{}}} : The contents are inserted as plain HTML - data bindings are ignored.

If you need to reuse template pieces, you should use partials.

<div>{{{ raw_html }}}</div>

속성 바인딩

• to bind an attribute to a dynamic value

<div v-bind:id="dynamicId"></div>
//div태그의 id에 dynamicId를 넣어주는 것 
//data(){ return { dynamicId : '내가 넣는, 변할 수 있는 값' }
//이렇게 하는 이유는 this.dynamicId = '다른 값'으로 바꿀 수 있게 하기 위해

cf. directive : special attribute that starts with the v-prefix
js expressions that have access to the component's state
v-bind and directive syntax are discussed

EX.

    <div
    class="gradient"
    :class="{'gradient--app': appInfo.appName === 'univ100'}"
    >

속성 바인딩
: class 속성에 gradient--app을 넣는데 appInfo.appName이 univ100이랑 같을 때만 적용