列表渲染：

v-for指令:
        1.用于展示列表数据
        2.语法：v-for="(item, index) in xxx" :key="yyy"
        3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

虚拟DOM中key的作用：

1.面试题：react、vue中的key有什么作用？（key的内部原理）
            key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 
                随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

2.对比规则：
            (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
                        ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
                        ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

            (2).旧虚拟DOM中未找到与新虚拟DOM相同的key
                        创建新的真实DOM，随后渲染到到页面。

3. 用index作为key可能会引发的问题：
                    1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
                                    会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

                    2. 如果结构中还包含输入类的DOM：
                                    会产生错误DOM更新 ==> 界面有问题。

4. 开发中如何选择key?:
                    1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
                    2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
                        使用index作为key是没有问题的。

Vue监视数据的原理：

1. vue会监视data中所有层次的数据。

2. 如何监测对象中的数据？
                通过setter实现监视，且要在new Vue时就传入要监测的数据。
                    (1).对象中后追加的属性，Vue默认不做响应式处理
                    (2).如需给后添加的属性做响应式，请使用如下API：
                                    Vue.set(target，propertyName/index，value) 或 
                                    vm.$set(target，propertyName/index，value)

3. 如何监测数组中的数据？
                    通过包裹数组更新元素的方法实现，本质就是做了两件事：
                        (1).调用原生对应的方法对数组进行更新。
                        (2).重新解析模板，进而更新页面。

4.在Vue修改数组中的某个元素一定要用如下方法：
            1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
            2.Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

收集表单数据：

若：<code><input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
        1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
        2.配置input的value属性:
                (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
                (2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
                lazy：失去焦点再收集数据
                number：输入字符串转为有效的数字
                trim：输入首尾空格过滤

过滤器：

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
        1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
        2.使用过滤器：{{ xxx | 过滤器名 }}  或  v-bind:属性 = "xxx | 过滤器名"
备注：
        1.过滤器也可以接收额外参数、多个过滤器也可以串联
        2.并没有改变原本的数据, 是产生新的对应的数据

内置指令：

我们学过的指令：
                v-bind  : 单向绑定解析表达式, 可简写为 :xxx
                v-model : 双向数据绑定
                v-for   : 遍历数组/对象/字符串
                v-on    : 绑定事件监听, 可简写为@
                v-if        : 条件渲染（动态控制节点是否存存在）
                v-else  : 条件渲染（动态控制节点是否存存在）
                v-show  : 条件渲染 (动态控制节点是否展示)
        v-text指令：
                1.作用：向其所在的节点中渲染文本内容。
                2.与插值语法的区别：v-text会替换掉节点中的内容，{{ xx }}则不会。
        v-html指令：
                1.作用：向指定节点中渲染包含html结构的内容。
                2.与插值语法的区别：
                            (1).v-html会替换掉节点中所有的内容，{{ xx }}则不会。
                            (2).v-html可以识别html结构。
                3.严重注意：v-html有安全性问题！！！！
                            (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
                            (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
        v-cloak指令（没有值）：
                1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
                2.使用css配合v-cloak可以解决网速慢时页面展示出{{ xxx }}的问题。
        v-once指令：
                1.v-once所在节点在初次动态渲染后，就视为静态内容了。
                2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
        v-pre指令：
            1.跳过其所在节点的编译过程。
            2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

自定义指令总结：

一、定义语法：
        (1).局部指令：
                        new Vue({                                   new Vue({
                            directives:{指令名:配置对象}   或           directives{指令名:回调函数}
                        })                                           })
            (2).全局指令：
                            Vue.directive(指令名,配置对象) 或   Vue.directive(指令名,回调函数)

二、配置对象中常用的3个回调：
            (1).bind：指令与元素成功绑定时调用。
            (2).inserted：指令所在元素被插入页面时调用。
            (3).update：指令所在模板结构被重新解析时调用。

三、备注：
            1.指令定义时不加v-，但使用时要加v-；
            2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

非单文件组件：

Vue中使用组件的三大步骤：
    一、定义组件(创建组件)
    二、注册组件
    三、使用组件(写组件标签)

    一、如何定义一个组件？
    使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
        区别如下：
            1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
            2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
            备注：使用template可以配置组件结构。

    二、如何注册组件？
            1.局部注册：靠new Vue的时候传入components选项
            2.全局注册：靠Vue.component('组件名',组件)

    三、编写组件标签：
            <school></school>
关于组件名:
            一个单词组成：
                第一种写法(首字母小写)：school
                第二种写法(首字母大写)：School
            多个单词组成：
                第一种写法(kebab-case命名)：my-school
                第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
                    备注：
                        (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
                        (2).可以使用name配置项指定组件在开发者工具中呈现的名字。

            2.关于组件标签:
                第一种写法：<school></school>
                第二种写法：<school/>
                备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

        3.一个简写方式：
        const school = Vue.extend(options) 可简写为：const school = options
关于VueComponent：
       1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

       2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
        即Vue帮我们执行的：new VueComponent(options)。

        3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

        4.关于this指向：
        (1).组件配置中：
        data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
        (2).new Vue(options)配置中：
        data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

        5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
        Vue的实例对象，以后简称vm。