Vue.js模板属性

最常见的数据绑定模板格式就是{{message}}，这个语法表示在DOM文档中插入vue对象的data属性中’message’定义的文本数据，vue会在该对象属性变量发生变化时实时地将新文本值渲染到被绑定的DOM组件中。

v-html

使用v-html指令输出html代码，如：

<div v-html="message"></div>

其中message和上节一样，是vue对象中data属性定义的文本数据（一般是html代码）。

v-bind

使用v-bind:prototype_name=""模板格式来绑定html元素的属性，如：

<div v-bind:class="{class_name}"></div>
<p v-bind:html="html_text"></p>

上述代码表示div元素绑定了vue对象中class_name变量的文本值指定的样式名。

表达式

vue提供了完全的JavaScript表达式支持，在DOM文档中，只需要用{{…}}将表达式内容包含起来就可以将JS表达式计算得到的内容嵌入文档流中。

v-指令

v-前缀的指令是vue定义的一系列特殊指令属性，这些指令用于表达式的值发生改变时，将特定的行为应用到DOM组件上。这些指令包括：v-bind、v-if、v-on等等。

v-model双向绑定属性

上面说到的v-bind是将vue对象的数据变量单向绑定到DOM组件上，在vue变量变化时更新DOM组件内容，而被绑定的DOM组件更新时（比如input value），并不会反过来更新vue对象的数据变量。
而v-model则实现了vue数据变量和DOM组件内容的双向绑定。具体实例如下：

<input type='text' v-bind:value="msg1" />
<input type='text' v-model:value="msg2"/>
<p>{{msg1}}</p>
<p>{{msg2}}</p>
<script>
new Vue({
  el: '#app',
  data: {
    msg1:'msg 1',
	msg2:'msg 2'
  }
})
</script>

缩写

vue为常用的两个模板属性指定了缩写：
v-bind:prototype可缩写为:prototype，v-on:event可缩写为@event，如:

<div :html="html_text"></div>
<a @click="click_func"></a>

M_Hsu