摘要：模板语法插值文本数据绑定最常见的形式就是使用语法双大括号的文本插值标签将会被替代为对应数据对象上属性的值。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于。通常更好的想法是使用属性而不是命令式的回调。

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：

Message: {{ msg }}

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：

这个将不会改变: {{ msg }}

Mustache语法是将数据渲染到模板，但是渲染上去的是纯文本，我们不能够输出真正的HTML。如果我们需要渲染一个HTML，我们需要shi用v-html指令：

var vm = new Vue({
    el:"#box",
    data:{
        msg:"
血染的风采
"
    }
})

血染的风采

mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：

var vm = new Vue({
    el:"#box",
    data:{
        msg:100
    }
})

控制台可看div的index为101

这同样适用于布尔类特性，如果求值结果是 false 的值，则该特性将会被删除：

Button

// 当isButtonDisabled为true时，button不可以点击，为false时，disabled这个属性会删除，button可以点击。

我们可以在mustache语法中使用javascript表达式，例如：

{{msg+1}}

var vm = new Vue({
    el:"#box",
    data:{
        msg:100
    }
})

101

但是在Mustache语法中不能是同语句。例如：

{{var a = 1}}

这个语句就不会被执行。

指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式（v-for 是例外情况，稍后我们再讨论）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

{{msg}}

var vm = new Vue({
    el:"#box",
    data:{
        msg:"汪派传人",
        seen:false
    }
})

汪派传人

当我们更改了seen为false时，div不会被显示。

一些指令能够接收一个"参数"，在指令名称之后以冒号表示，例如上面哦我们使用过的V-bind指令。

Button

在这里disabled是参数，告知 v-bind 指令将该元素的 disabled 属性与表达式 isButtonDisabled 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：

{{msg}}

var vm = new Vue({
    el:"#box",
    data:{
        msg:"汪派传人",
    },
    methods:{
        a:function(){
            console.log("执行")
        }
    }
})

执行

{{msg|fangfa}}

var vm = new Vue({
    el:"#box",
    data:{
        msg:"vue.js",
    },
    filters:{
        fangfa:function(value){
            console.log(value)
            return value.split("").reverse().join("")
        }
    },
})

sj.euv

{{msg|fangfa}}

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

{{ msg | fangfa("arg1", arg2) }}

用@表示

    
{{reversedmsg}}

var vm = new Vue({
    el:"#box",
    data:{
        msg:"abcd"
    },
    computed:{
        reversedmsg:function(){
            return this.msg.split("").reverse().join("")
        }
    }
})

dcba

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 msg 还没有发生改变，多次访问 reversedmsg 计算属性会立即返回之前的计算结果，而不必再次执行函数。

口说无凭，下面我们测试一下他是否具有缓存

    
{{resversedmsg}}
    
{{resversedmsg}}
    
{{resversedmsg}}
    
{{resversedmsg}}

var a = 1;
var vm = new Vue({
    el:"#box",
    data:{
        msg:"abcd"
    },
    computed:{
        resversedmsg:function(){
            a++;
            return a
        }
    }
})

2
2
2
2

resversedmsg第一次调用时,a++;这时a=2,第二次调用时，结果是2;这就证明了我们刚说的只有第一次调用时进行计算,而以后的调用因为msg没有改变，所以直接调用了缓存的数据。

    
{{remsg()}}
    
{{remsg()}}
    
{{remsg()}}
    
{{remsg()}}

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 替代。

Vue 确实提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：watch 属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch。通常更好的想法是使用 computed 属性而不是命令式的 watch 回调。

    
{{msg3}}
    
    

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）

computed: {
    msg3: {
        // getter
        get: function () {
            return this.msg1 + this.msg2
        },
        // setter
        set: function (newValue) {
                this.msg1=newValue
            }
    }
}

当我们在控制台上输入vm.msg3=100时,msg1也会随之改变。

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 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)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的。