vue学习——数据绑定

这一章主要讲解vue里面数据绑定的几种方式。

所谓的数据绑定，就是vue里面当数据发生变化时响应更新HTML。

1. {{}} ——mustache标签
2. v-html——更新新元素的innerHTML
3. v-bind

1.{{}}

这种是在刚才是接触vue的时候，最早的数据绑定。主要有以下几种功能

1.1插值

<div>{{text}}</div>

这样就能将data中的text的值插入到HTML标签中。

1.2表达式

{{}}中也可以接受简单的表达式

var vm = new Vue({
    el: "#app",
    template: `
        <div>{{isActive ? 'active':'not active'}}</div>
    `,
    data: {
        isActive: false
    }
})

需要注意的是{{}}只能接受简单的表达式（通过表达式运算后得到一个结果，一般各类运算符以及数组操作函数），不能是语句

{{var a = 1}}   //报错
{{if(true) return 'is true' }}  //报错  
//上句可以改为表达式
{{ true ? 'is true' : ' ' }}
{{ arr.join("#") }} //正确 数组函数，将arr数组中的值用"#"连接起来

1.3全局变量

{{}}能调用window自带的全局变量（vue设置了调用全局变量的白名单），但是自定义的全局变量无法调用。

{{Date.now()}}  //输出 1571541689949



var globalVar = "a"   //全局定义
{{globalVar}} // 报错  

2.v-html

在{{}}中插值html标签，会直接当做文本显示

    var vm = new Vue({
        el: "#app",
        template: `
                <div>{{html}}</div>
            `,
        data: {
            isActive: false,
            html: `<span>this is html</span>`
        }
    })

改用v-html绑定

    var vm = new Vue({
        el: "#app",
        template: `
                <div>
                    <p v-html='html'></p>
                </div>
            `,
        data: {
            isActive: false,
            html: `<span>this is html</span>`
        }
    })

3.v-bind

v-bind可以将一个或者多个的attribute，或者一个组件的prop动态绑定

v-bind可以简写成：

今天只讲标签的attribute的绑定（以class、style为例）

案例一：对象方式绑定class {<class名字> : <值，若true绑定class 若false不绑定class> }

    var vm = new Vue({
        el: "#app",
        template: `
                <div v-bind:class = "{active:isActive,acitve2:isActive2}">
                   
                </div>
            `,
        data: {
            isActive: true,
            isActive2: false

        }
    })

案例二：数组方式绑定class

    var vm = new Vue({
        el: "#app",
        template: `
                <div v-bind:class = "[
                    class1,
                    'class2',
                    isActive2 ? 'class3' : 'class4',
                    {class5:isActive}
                ]">
                   
                </div>
            `,
        data: {
            isActive: true,
            isActive2: false,
            class1: "class1"

        }
    })

由上总结数组接受以下几种参数：

1. data中的值
2. 字符串
3. 表达式
4. 对象（和对象绑定class方式一样）

案例三：绑定style

绑定style 需要注意的一点css样式中的"-"连接的样式需要改成驼峰法

举例：font-size => fontSize

优点：通过v-bind绑定需要添加浏览器前缀得style会自动添加。

    var vm = new Vue({
        el: "#app",
        template: `
            <div>
               以下效果是一样的：
                <div :style="style1,style2" >采用对象方法</div>   
                <div :style="[style1,style2]" >采用数组方法</div> 
            </div>
            `,
        data: {
            style1: {
                color: "red",
                fontSize: "40px",
                appearance:"none"
            },
            style2: {
                color: "black",
                fontSize: "20px"
            }
        }
    })