01.vue数据绑定

Vue特点

　　渐进式: 渐进, 可以理解成一步一步的. 在使用Vue的时候, 我们不需要把整个Vue框架的东西都用上, 可以一步一步的根据需要慢慢的替换之前的代码。

　　自底向上逐层应用: 由底层开始, 把基础的东西先写好, 逐层往上增加新的或者复杂的功能。

　　MVVM设计模式: Model(模型)-View(视图)-VM(视图模型), 这是一种基于前端开发的架构模式,其核心是

　　提供View和Model的双向数据绑定, 这里的Model状态能直接影响View而View的变化在某些情况下也能影响Model。

　　声明式渲染: Vue允许我们用简洁的语法将数据与DOM绑定在一起。

数据绑定

1. 值绑定
　　1.1 插值表达式
　　　　{{}}(mustache 大胡子语法)，{{}}里面是Vue的编译环境，里面可以填data里的变量，表达式，函数调用。

1 <div id="app">
2                     <p>{{message}}</p>
3                     <p>{{1<2?true:false}}</p>
4                     <p>{{sumFunc(1,2)}}</p>
5                 </div>

 1                 let app = new Vue({
 2                     //el字段，用来挂载dom元素，指定Vue实例的作用域
 3                     el: '#app',
 4                     //data字段，指定Vue实例的数据源
 5                     data: {
 6                         message: 'Hello Vue!',
 7                         sumFunc(a, b) {
 8                             return a + b;
 9                         }
10                     }
11                 });

　　

　　1.2 v-text或者v-html指令
　　　　二者区别：
　　　　　　当数据里有html字符串时，v-html能直接解析，而v-text和{{}}会原样输出。
　　　　注意：vue指令中的""(双引号)里面也是Vue的编译环境,想直接写字符串的话要用单引号''。

1 <div id="app">
2     <p v-html="msg"></p>
3     <p v-text="msg"></p>
4     <p>{{msg}}</p>
5 </div>

    let app = new Vue({
        el: '#app',
        data: {
            msg: '这是a链接:<a href="http://www.baidu.com">点击跳转至百度首页</a>',
        },
    });

2.属性绑定
　　语法：v-bind:属性名=""
　　简写模式(语法糖)：:属性名=""
　　动态绑定style属性:
　　　　语法：:style="数组/对象(常用)/行间样式字符串"
　　动态绑定class属性:
　　　　语法：:class="数组/对象"

1 .p_style {
2     color: #ffffff;
3     background-color: red;
4 }

 1 <div id="app">
 2     <p v-bind:title="msg">v-bind</p>
 3     <p :title="msg">v-bind</p>
 4
 5     <div :style="divStyle1"></div>
 6     <div :style="divStyle2"></div>
 7     <div :style="divStyle3"></div>
 8
 9     <p :class="className">这是段落1标签</p>
10     <p :class="{p_style:true}">这是段落2标签</p>
11     <p :class="{p_style:isAddClass}">这是段落3标签</p>
12 </div>

 1 let app = new Vue({
 2      el: '#app',
 3      data: {
 4          msg: '鼠标悬停几秒钟查看此处动态绑定的提示信息！',
 5          divStyle1: {width: '500px', height: '15px', background: 'red'},
 6          divStyle2: [{width: '500px'}, {height: '15px', background: 'green'}],
 7          divStyle3: "width: 500px;height: 15px; background: blue",
 8          className: {p_style: true},
 9          isAddClass: true,
10      },
11  });

3.事件绑定
　　语法：
　　　　v-on:事件名="函数名/函数名()/简单的语句"
　　语法糖：
　　　　@事件名="函数名/函数名()/简单的语句"
　　注意：
　　　　a. 绑定函数时，函数名后的小括号可加可不加，取决于是否需要传递参数，如果需要传参，必须加小括号。
　　　　b. 绑定函数时，没加小括号，系统默认第一个形参为事件对象。
　　　　c. 绑定函数时，加了小括号，需要通过传入$event获取事件对象。
　　　　d. 事件函数里可以直接同过this.变量名获取data里的数据源变量。

1 <div id="app">
2     <button v-on:click="btnClick1">按钮1,无参</button>
3     <button v-on:click="btnClick2(1,msg,'abc')">按钮2,有参</button>
4     <button @click="btnClick3">无小括号获取事件对象</button>
5     <button @click="btnClick4(1,2,$event)">有小括号获取事件对象</button>
6     <button @click="changeData">点击修改data数据源</button>
7 </div>

 1     let app = new Vue({
 2         el: '#app',
 3         data: {
 4             msg: 'Hello World!',
 5         },
 6         //事件对应的触发函数，写到methods字段里
 7         methods: {
 8             btnClick1() {
 9                 console.log('按钮1被点击了!');
10             },
11             btnClick2(a, b, c) {
12                 console.log(a, b, c);//1,"Hello World!","abc"
13             },
14             btnClick3(e) {
15                 console.log(e);//event
16             },
17             btnClick4(a, b, c) {
18                 console.log(a, b, c);//1,2,event
19             },
20             changeData() {
21                 this.msg = 'Hello Vue!';
22             },
23         }
24     });

如何解决vue里面的文本闪烁问题？
　　文本闪烁：当加载vue.js文件不及时时，会导致vue的语法无法继续加载，页面会显示vue的原始语法，用户体验不好。
　　解决办法：我们可以使用v-cloak指令解决,当vue.js文件没加载时，v-bloak会被识别为普通的自定义属性，
　　　　　　　我们让添加了该属性的元素display:none;一旦vue.js加载完毕，v-bloak就会被vue识别为指令，
　　　　　　　然后将v-bloak属性去除，则display:none;样式失效，进而显示内容。

1 [v-bloak] {
2     display: none;
3   }

1 <p v-cloak>{{'Hello Vue!'}}</p>