Vue.js概述

一、概述

数据驱动的响应式框架，我们只关注Vue对象里面设置的数据即可，数据发生改变时，页面自动重新渲染

最典型的MVVM框架

二、挂载点

什么是“挂载点”？一个标签

作用：被Vue实例接收后，实例中设置的各种属性可以在挂载点中生效

使用：

<h3>vue的使用</h3>
<div id="app">
<!--    在挂载点中使用数据-->
    {{a}}
</div>
<script type="text/javascript">
    //实例化vue对象（后续，vue对象也称组件）
    new  Vue({
      //接收挂载点
      el:"#app",
      data:{
          //通过data方法的返回值设置数据
          return{
              a:10
          }
      }
    })
</script>

此例中#app作为挂载点，被Vue对象接收，数据a在挂载点中可以识别，挂载点外无效

三、数据

3.1设置数据

在Vue对象中，通过data方法的返回的对象设置数据

注：返回值必须是对象，数据名就是属性名，数据值就是属性值

3.2使用数据

方式1：插入表达式{{数据名}}

方式2：指令v-html和v-text

四、指令

指令就是标签的一种自定义属性（以v-开头）

指令解析属性值的规律：

规律1：如果属性值可以解析成字符串以外的其他数据类型，则按照能够解析的数据类型解析

规律2：如果无法解析成其他数据类型，则按照数据解析

规律3：按照数据解析，如果数据不存在，就报错

规律4：没办法给指令的属性值直接设置成字符串，如果指令的属性值需要是字符串，则把属性值设置成数据名，数据值是字符串

五、v-html、v-text和插值表达式

共同点：都是用来展示数据

不同点：

差值表达式：写法方便，独立存在，如果电脑加载缓慢则用户会看到双花括号和数据名，不识别标签。

v-html：必须是标签的属性，电脑加载缓慢页面上加载出没有内容空标签，用户什么都看不到，可识别标签。

v-text：必须是标签的属性，电脑加载缓慢页面上加载出没有内容空标签，用户什么都看不到，不能识别标签。

总结：当内容中存在需要解析的标签时，则必须使用v-html。如果没有标签，则为了不让用户看到解析前的内容，优先使用v-html或者v-text

六、vue中的方法

通过v-on指令来绑定事件设置方法

设置方法，在Vue对象的methods属性值设置方法

v-on指令可以简写成@

方法中使用数据，前面要加this

方法设置参数，则在方法名后面小括号即可

特殊的，实参可以是数据

注：v-on绑定事件触发的方法中，只能通过event关键字来获取事件对象，不能使用参数e

七、分支结构指令

作用：指令的值为true时，才显示当前的标签

7.1一个标签的显示与不显示

当指令为true时，正常显示标签

当指令的值是false时，则不显示标签（通过设置display:none的方式隐藏标签）

7.2多分支结构，多个标签选择一个满足条件的展示

（1）二选一

（2）多选一

通过v-if“家族”创建的多分支结构，只创建满足条件的标签，不满足条件的标签不创建

总结：一个标签的显示与隐藏，只涉及到一个标签，所以通过display:none来控制标签的显示与隐藏的效率最高。多选一结构中，涉及到的标签有很多，把所有标签都创建在页面上通过display:none来隐藏不需要的标签，反而浪费资源，所以只创建满足条件的标签即可。

综上：一个标签用v-show两个及以上用v-if“家族”

八、循环

作用：遍历数据，数据中每有一个值就创建一个结构

分析：遍历数组arr数组中每遍历到一个值，就创建一个指令所在的结构

data of arr data是给数组中数据起的名字，arr是要遍历的数据

分析：data作为所遍历到的数据，在v-for指令所在的区域内，可以当做普通数据使用