三、Vue中的属性绑定（v-bind）和双向数据绑定（v-model）

三、Vue中的属性绑定（v-bind）和双向数据绑定（v-model）
属性绑定（v-bind）

    
    
    


    

        
hello world
    

    

此例子中，若想div标签的title属性变成this is hello world，上述例子是达不到要求的，最终title属性显示的只是“title”。怎么操作实例，让实例中的数据项和模板的属性绑定？
答案是需要一个新的模板指令v-bind。上式div即写成

hello world

意思是div中的title属性和数据项绑定。
需注意到：
1、只要模板中有模板指令（比如v-bind），等号后面的表达式将不是字符串，变成js表达式，
2、“v-bind：”可以简写成“：”

双向数据绑定（v-model）
要理解双向数据绑定，先理解一下我们常用的单项数据绑定 ：

    

        
hello world
        
        
{{content}}
    

    

如上，单项绑定即是Vue实例中的数据写什么（this is content），模板中就会显示什么，即数据决定页面的显示（模板），但是页面的显示无法决定数据的内容。
双向绑定即既有单项绑定中的数据决定页面的显示，也有在输入框中输入的内容可以变更到Vue实例中的数据里。
解决方案是一个新的模板指令v-model，如下：

    

        
hello world
        
        
{{content}}
    

    

这样，在输入框里输入什么内容，在div标签内的content都可以提现出来，即显示决定Vue实例中的数据。
注：我在写代码的时候试过，v-model后面加上title或者value的时候，即写成v-model：value，结果与直接写v-model一样，没有变化。