模板语法
插值
文本
数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：
<span>Message: {{ msg }}</span>Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：
<span v-once>这个将不会改变: {{ msg }}</span>纯HTML
Mustache语法是将数据渲染到模板，但是渲染上去的是纯文本，我们不能够输出真正的HTML。如果我们需要渲染一个HTML，我们需要shi用v-html指令：
<div id="box" v-html="msg"></div>var vm = new Vue({
el:"#box",
data:{
msg:"<h1>血染的风采</h1>"
}
})血染的风采特性
mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：
<div id="box" v-html="msg" v-bind:index="msg"></div>var vm = new Vue({
el:"#box",
data:{
msg:100
}
})控制台可看div的index为101这同样适用于布尔类特性，如果求值结果是 false 的值，则该特性将会被删除：
<button v-bind:disabled="isButtonDisabled">Button</button>// 当isButtonDisabled为true时，button不可以点击，为false时，disabled这个属性会删除，button可以点击。使用javascript表达式
我们可以在mustache语法中使用javascript表达式，例如：
<div id="box">{{msg+1}}</div>var vm = new Vue({
el:"#box",
data:{
msg:100
}
})101但是在Mustache语法中不能是同语句。例如：
{{var a = 1}}这个语句就不会被执行。
指令
指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式（v-for 是例外情况，稍后我们再讨论）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
<div id="box" x-if="seen">{{msg}}</div>var vm = new Vue({
el:"#box",
data:{
msg:"汪派传人",
seen:false
}
})汪派传人当我们更改了seen为false时，div不会被显示。
参数
一些指令能够接收一个"参数"，在指令名称之后以冒号表示，例如上面哦我们使用过的V-bind指令。
<button v-bind:disabled="isButtonDisabled">Button</button>在这里disabled是参数，告知 v-bind 指令将该元素的 disabled 属性与表达式 isButtonDisabled 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：
<a v-on:click="doSomething">修饰符
修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<div v-on:click.prevent="a">{{msg}}</div>在js中，我们在Vue实例中使用methods属性使用修饰符
var vm = new Vue({
el:"#box",
data:{
msg:"汪派传人",
},
methods:{
a:function(){
console.log("执行")
}
}
})控制台打印
执行过滤器
Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示：
<div v-on:click.prevent="a">{{msg|fangfa}}</div>在js中，我们在Vue实例中使用filters属性使用修饰符
var vm = new Vue({
el:"#box",
data:{
msg:"vue.js",
},
filters:{
fangfa:function(value){
console.log(value)
return value.split("").reverse().join("")
}
},
})sj.euv过滤器可以串联，例如
<div v-on:click.prevent="a">{{msg|fangfa}}</div>var vm = new Vue({
el:"#box",
data:{
msg:"vue.js",
},
filters:{
fangfa:function(value){
console.log(value)
return value.split("").reverse().join("")
},
fangfa2:function(value){
return value.split("").reverse().join("")
}
},
})vue.js过滤器是 JavaScript 函数，因此可以接收参数：
{{ msg | fangfa('arg1', arg2) }}这里，fangfa 被定义为接收三个参数的过滤器函数。其中 msg 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 取值后的值作为第三个参数。
缩写
v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为(dynamic behavior)时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序(SPA - single page application)时，v- 前缀也变得没那么重要了。因此，Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind 缩写
用一个 : 表示
<!-- 缩写前 -->
<a v-bind:href="url"></a><!-- 缩写后 -->
<a :href="url"></a>v-on 缩写
用@表示
<!-- 缩写前 -->
<a v-on:click="dianji"></a><!-- 缩写后 -->
<a @click="dianji"></a>计算属性
实例
<div id="box">
<p>{{reversedmsg}}</p>
</div>var vm = new Vue({
el:"#box",
data:{
msg:"abcd"
},
computed:{
reversedmsg:function(){
return this.msg.split('').reverse().join('')
}
}
})dcba计算属性的缓存 vs method 方法
计算属性的缓存
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 msg 还没有发生改变，多次访问 reversedmsg 计算属性会立即返回之前的计算结果，而不必再次执行函数。
口说无凭，下面我们测试一下他是否具有缓存
<div id="box">
<p>{{resversedmsg}}</p>
<p>{{resversedmsg}}</p>
<p>{{resversedmsg}}</p>
<p>{{resversedmsg}}</p>
</div>var a = 1;
var vm = new Vue({
el:"#box",
data:{
msg:"abcd"
},
computed:{
resversedmsg:function(){
a++;
return a
}
}
})2
2
2
2resversedmsg第一次调用时,a++;这时a=2,第二次调用时，结果是2;这就证明了我们刚说的只有第一次调用时进行计算,而以后的调用因为msg没有改变，所以直接调用了缓存的数据。
method
<div id="box">
<p>{{remsg()}}</p>
<p>{{remsg()}}</p>
<p>{{remsg()}}</p>
<p>{{remsg()}}</p>
</div>var a = 1;
var vm = new Vue({
el:"#box",
data:{
msg:"abcd"
},
methods: {
remsg: function () {
a++,
return a
}
}
})2
3
4
5这就说明了 method 相比 计算属性 来说，假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用 method 替代。
计算属性 vs watched属性
watched属性监听
Vue 确实提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：watch 属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch。通常更好的想法是使用 computed 属性而不是命令式的 watch 回调。
<div id="box">
<p>{{msg3}}</p>
<input type="text" v-model="msg1">
<input type="text" v-model="msg2">
</div>var vm = new Vue({
el:"#box",
data:{
msg:"abcd",
msg1:1,
msg2:2,
msg3:3,
},
watch:{
msg1:function(val){
this.msg3=val+this.msg2
}
msg2:function(val){
this.msg3=this.msg1+val
}
}
})然而我们会发现我们还可以用计算属性来控制msg3的改变
var vm = new Vue({
el:"#box",
data:{
msg:"abcd",
msg1:1,
msg2:2,
// msg3:3,
},
computed: {
msg3: {
function () {
return this.msg1 + this.msg2
}
}
}
})计算 getter和setter
当我们使用计算属性时，计算属性默认时getter（获取）,不过我们有时还需要更改（setter）
computed: {
msg3: {
// getter
get: function () {
return this.msg1 + this.msg2
},
// setter
set: function (newValue) {
this.msg1=newValue
}
}
}当我们在控制台上输入vm.msg3=100时,msg1也会随之改变。
观察 Watchers
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher。
var vm = new Vue({
el: '#box',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 question 发生改变，这个函数就会运行
question: function (newQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
}
});
在这个实例中，watchers会监听data里的question属性，当question发生改变时，answer会发生改变。
使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。