VUE 入门基础(3)
三，模板语法
Vue将模板编译成虚拟DOM渲染函数，结合响应系统，在应用状态改变时，vue能够智能地计算出重新渲染组件的最小代价并DOM操作上。
插值，文本
数据绑定常见的形式就是使用“Mustache”语法（双大括号）的文本插值：
<span>Message:{{ msg }}</span>
通过使用v-once 指令执行一次性的插入值，当数据改变时，插值处的内容不会更新，会影响到该节点上的所有数据绑定。
<span v-once>This will never change: {{msg}}</span>
HTML
双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令：
属性
Mustache 不能在HTML 属性中使用，应使用v-bind 指令
<div v-bind:id=“dynamicId”></div>
这对布尔值的属性也有效 如果条件被求职为false 的话该属性会被移除
<button v-bind:disavled=“someDynamicCondittion”></button>
使用JavaScript 表达式
所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
指令
指令是带有v- 前缀的特殊属性，指令属性的值预期是单一JavaScript表达式，指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM 上。
如 <p v-if=”seen”>Now you see me</p>
If指令将根据表达式 seen 的值的真假来移除/插入<p> 元素
参数
一些指令能接受一个参数，在指令号以冒号指明，v-bind 指令被用来响应的更新html属性。
<a v-bind:href=“url”></a>
在这里href 是参数,告知v-hind 指令将元素的href 属性与表达式 url 的值绑定。
修饰符
修饰符（Modifiers） 是以半句号. 指明的特殊后缀，用于指出一个指定应该以特殊的方式绑定，如 .prevent 修饰符告诉v-on 指令对于除非的时间调用 event.preventDefault();
<form v-on:submit.prevent=“onSubmit”></form>
过滤器
Vue 允许自定义过滤器，被用作一些常见的文本格式，过滤器应该被添加在mustache 插值的尾部，由管道符指示。
{{message | capitalize}}
{{message | capitalize}}
<div v-bind:id="rawId | formatId"></div>
过滤器函数总接收表达式的值作为第一个参数
New Vue({ filters: { capitalize: function(value) { If (!value) return ‘ ’ Value = value.toString() return value.charAt(0).toUp } } })
过滤器可以串联：
{{message | filterA | filterB}}
过滤器是JavaScript 函数，因此可几首参数
{{message | filterA(‘arg1’,’arg2’)}}
字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数
缩写
v- 前缀在模板中是作为一个表示vue 特殊属性的明显标示，当你使用 Vue.js 为现有的标记添加动态行为时，它会很有用，但对于一些经常使用的指令来说有点繁琐。
v-bind 缩写
完整语法
<a v-bind:href=‘url’></a>
缩写
<a :href=“url”></a>
v-on 缩写
完整语法
<a v-on:click=“doSomething”></a>
缩写
<a @click=“doSomething”</a>
