文本：数据绑定最基础的形式就是文本插值，使用一对双大括号


双大括号标签会被相应数据对象的msg属性的值替换，每当这个属性变化时它也会更新

HTML：

<spanid="test01">Message:`msg`</span>

JS：

varvm=newVue({el:'#test01',data:{msg:'数据绑定语法--文本插值'}});

{{变量名}}：表示绑定的变量，调用时需要用this.变量名

el:表示指令绑定的元素

vm:表示拥有该指令的上下文ViewModel


示例中的id也可以改为class，但是如果页面中含有多个相同的class的话，只对第一个有效

HTML:

<spanclass="test01">Message:`msg`</span>

JS:

varvm=newVue({el:'.test01',data:{msg:'数据绑定语法--文本插值'}});


也可以只处理单次插值，今后的数据变化就不会再引起插值更新了，这句话怎么理解呢？看看下面的实例

HTML：

<divid="test02"><inputtype="text"v-model="msg"><p>{{*msg}}</p></div>

JS：

varvm2=newVue({el:'#test02',data:{msg:'内容一起改变了吗？'}});


查看页面效果截图发现，随着输入框内容的改变（无论是添加内容还是删除原来的内容），p标签的内容都不会发生任何改变，也就是说数据变化并没有引起插值更新



双大括号将数据解析成纯文本，而三大括号将数据解析成真正的HTML字符串

HTML：

<spanid="test03">双大括号解析成纯文本:`msg`</span><br><spanid="test04">三大括号解析成HTML字符串：{`msg`}</span>

JS：

varvm3=newVue({el:'#test03',data:{msg:'<ahref="#">链接</a>'}});varvm4=newVue({el:'#test04',data:{msg:'<ahref="#">链接</a>'}});


双大括号标签也可以用在HTML特性内

HTML：

<divid="item-`id`"></div>


页面效果截图：


文本的取值除了可以是string类型以外，还可以是number，boolean，array，json, 我们可以看看下面的实例代码

<divid="box"><p>`msg`</p><p>`msg1`</p><p>`msg2`</p><p>`msg3`</p><p>`arr`</p><p>`json`</p></div>

newVue({el:'#box',data:{msg:'HelloWorld!',msg1:2016,msg2:true,msg3:false,arr:['nokia','samsung','apple','huawei','htc'],json:{a:'apple',b:'banana',c:'cherry',d:'durian'}}})