01-VUE基础知识

1. Vue特点

(1) 前端三大主流框架之一，vue、react、Angular
(2) 轻量级框架，体积更小
(3) 生态圈广泛，适合初学者
(4) 基于mvvm 模式，可以实现双向数据绑定。

2. 前端三大框架比较

(1) React: 开发大型项目最严谨的框架(学习成本较高，适用于中级或者高级前端开发工程师)
(2) Angular: 适用于大型项目，项目开发较为沉重，不够灵活
(3) Vue: 轻量级，体积小，基于mvvm模式，可以实现双向数据绑定，适合初学者。

3. MVVM（软件设计模式）

Vue.js根据这种设计模式出来的
(1) M : model 数据模型
(2) V : view视图层
(3) VM : ViewModel 连接视图和数据模型的纽带，数据模型发生了变化了，vm通知视图修改；视图发生了变化，vm通知数据模型进行相应的修改。

优化渲染：当前数据模型发生改变只改变对应的视图，只渲染对应的视图层。

4. 生命周期（钩子函数）

从Vue实例创建到虚拟dom产生再到数据绑定监听数据渲染以及销毁的整个过程。
生命周期钩子函数：方便去操作当前阶段的vue实例
(1) vue实例初始化阶段
beforeCreate:在初始化的时候调用了beforeCreate，完成了vue实例的生命周期相关属性的初始化以及事件的初始化。这个时候还不能访问数据模型中的data和methods中的方法。
created: 在初始化完毕之后，完成vue的数据注入以及数据监听操作，该操作的执行意味着vue实例创建完毕，可以进行data数据模型和methods方法的访问。
(2) vue实例挂载阶段
beforeMount： 在created之后，vue会判断实例中是否含有el属性，如果没有vm.$mount(el),接着会判断是否含有template属性，如果有将其解析为一个render function,如果没有将el指定的外部html进行解析。这里只是完成了模板的解析但是数据并没有绑定到模板中。
mounted: 创建vm.$el替换el，实际上完成的是数据绑定操作，在其间执行render函数，将模板进行了解析，将数据进行了动态绑定。
(3) vue实例更新阶段
beforeUpdate: 更新虚拟dom节点
updated: 完成了页面的重新渲染
(4) vue实例销毁阶段
beforeDestroy: 销毁之前调用，此时可以访问vue实例
destroyed: 完成了监听器，子组件，事件监听等移出，销毁vue实例对象。

5.模板语法

1. 文本插值
    (1) {{ msg }} 用双大括号将data数据模型中的字段渲染到页面上
    (2) {{ msg + "nihao" }} 双大括号内部可以放js表达式
2. 指令
    (1) v-bind: 动态绑定元素上的属性
        v-bind:title  简写 => :title="title"
    (2) v-html: 绑定html代码片段
        富文本编辑器  有格式的内容 => 相应的html代码
    (3) v-on: 动态绑定事件
        v-on:click="clickHandler"
        简写 => @click="clickHandler"
3. 条件渲染
    (1) v-if, v-else, v-show
    (2) v-if, v-else与v-show之间的区别
        v-if和v-else对应的是元素的添加和删除，如果条件为真，则添加元素，如果条件为假，则删除元素。
        v-show对应的是CSS样式中的display，来实现显示与隐藏。显示时用display:block,隐藏时用display:none。
        频繁的显示与隐藏某个组件时，用v-show较好，因为v-if会频繁渲染dom树占用资源，影响代码运行效率。
4. 列表渲染
    v-for
    <ul>
        <li v-for="(item, index) in arr" :key="index">{{ item }}{{ index }}</li>
    </ul>
    :key的作用：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做可以使 Vue 变得非常快。但是有些时候，我们却不希望vue复用，这时候Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key  
5. class绑定
    :class
        <div :class="{ active: isActive}"> 块级元素</div>
        <div :class="[active1, box1]">块级元素</div>
        <div :class="[isActive? active1 : box1]">块级元素</div>
6. style绑定
    :style
        <div :style="{color: 'red', fontSize: '24px'}">块级元素</div>
        <div :style="style1">块级元素</div>
        <div :style="[style, style2]">块级元素</div>