Vue模板语法 原

文本  数据绑定最常见的形式是使用Mustache 语法（双大括号）的文本插值 <span>Message: {{ msg }}</span> 通过使用v-once指令，执行一次性插值，当数据改变时，插值处的内容不会更新，但请注意这会影响到该节点所有的数据绑定 <span v-once>这个将不会改变: {{ msg }}</span>

纯html 双大括号会将数据解释为纯文本，而非HTML,为了输出真正的html,需要使用v-html指令 <div v-html="rawHtml"></div> 这个div的内容将会被替换成为属性值rawHtml  var app=new Vue({         el:"#app-7",         data:{rawHtml:"<h2>hello world</h2>"} })

特性（属性） Mustache 语法不能作用在HTML特性（属性）上，这种情况应该使用v-bind指令 <div v-bind:id="dynamicId"></div> 同样适用于布尔类特性 <button v-bind:disabled="isButtonDisabled">Button</button>

使用JavaScript表达式 Vue.js都提供了完全的Javascript表达式支持 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div>

 指令 指令是带有v-前缀的特殊属性 <p v-if="seen">现在你看到我了</p> v-if指令将根据表达式seen的值的真假来插入/移除<p>元素

参数 一些指令能够接收一个参数，在指令名称之后以冒号表示，例如，v-bind指令可以用于响应式的更新html属性 <a v-bind:href="url"></a> 在这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定在一起 另一个例子是v-on指令，它用于监听DOM事件 <a v-on:click="doSomething"></a>

修饰符 修饰符Modifiers是以点 . 指名的特殊后缀，用于指出一个指令应该以特殊方式绑定， 例如.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault() <form v-on:submit.prevent="onSubmit"></form>

过滤器 Vue.js允许自定义过滤器，可被用作一些常见的文本格式化，过滤器可以用在2个地方,mustache 差值和v-bind 表达式 <!-- in mustaches --> {{ message | capitalize }} <!-- in v-bind --> <div v-bind:id="rawId | formatId"></div> 过滤器函数总接收表达式的值作为第一个参数，在这个例子中capitalize过滤器函数将会接收message的值作为第一个参数  {{message1 | capitalize }}   var app7 = new Vue({         el: '#app-7',          data: {             message1: "lovestudyvue"         },         filters:{           capitalize:function(value){             if(!value) return ''              //value = value.toString()              return value.charAt(0).toUpperCase() + value.slice(1)         }            }     })     //过滤器添加在javascript表达式的尾部，前面的是原始的数据，主要用于文本转换

缩写 v-bind缩写 完整写法<a v-bind:href="url"></a>  缩写<a :href="url"></a> v-on缩写 <a v-on:click="doSomething"></a>   缩写<a @click="doSomething"></a>

(adsbygoogle = window.adsbygoogle || []).push({});