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>