Vue.js学习笔记：插值-创新互联

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

创新互联主要从事成都网站制作、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务大石桥,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

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

HTML：

Message:`msg`

JS：

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

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

el:表示指令绑定的元素

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

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

HTML:

Message:`msg`

JS:

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

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

HTML：

    
    
{{* msg}}

var vm2 = new Vue({
    el:'#test02',
    data:{
        msg:'内容一起改变了吗？'
    }
});

双大括号解析成纯文本:`msg`

三大括号解析成HTML字符串：{`msg`}

var vm3 = new Vue({
    el:'#test03',
    data:{
        msg:'链接'
    }
});

var vm4 = new Vue({
    el:'#test04',
    data:{
        msg:'链接'
    }
});