我们目前学过的指令：
v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听, 可简写为@
v-if : 条件渲染（动态控制节点是否存存在）
v-else : 条件渲染（动态控制节点是否存存在）
v-show : 条件渲染 (动态控制节点是否展示)
一：v-textv-text指令：
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
//准备好一个容器
你好，{{name}}
v-html指令：
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
(1)v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2)v-html可以识别html结构。
3.严重注意：v-html有安全性问题！！！！（面临着cookie被盗用风险）
(1)在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2)一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
//准备好一个容器
你好，{{name}}
v-cloak指令（没有值）：
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
//准备好一个容器
{{name}}
v-once指令：
1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
//准备好一个容器
初始化的n值是:{{n}}
当前的n值是:{{n}}
v-pre指令：
1.跳过其所在节点的编译过程。
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
//准备好一个容器
Vue其实很简单
当前的n值是:{{n}}
一、定义语法：
(1)局部指令：
第一种方式： new Vue({
directives:{指令名:配置对象}
})
第二种方式： new Vue({
directives{指令名:回调函数}
})
(2)全局指令：
第一种方式： Vue.directive(指令名,配置对象)
第二种方式： Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调：
(1)bind：指令与元素成功绑定时调用。
(2)inserted：指令所在元素被插入页面时调用。
(3)update：指令所在模板结构被重新解析时调用。
三、备注：
(1)指令定义时不加v-，但使用时要加v-
(2)指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
//准备好一个容器
{{name}}
当前的n值是：
放大10倍后的n值是：
1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm 或 组件实例对象。
二：生命周期分析 三：生命周期总结常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化 *** 作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效。
3.一般不会在beforeDestroy *** 作数据，因为即便 *** 作数据，也不会再触发更新流程了。
四：非单文件组件 一：基本使用Vue中使用组件的三大步骤：
1.定义组件(创建组件)
2.注册组件
3.使用组件(写组件标签)
1.如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
区别如下：
（1）el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
（2）data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构。
2.如何注册组件？
（1）局部注册：靠new Vue的时候传入components选项
（2）全局注册：靠Vue.component('组件名',组件)
3.编写组件标签：
//准备好一个容器
{{msg}}
1.关于组件名:
一个单词组成：
第一种写法(首字母小写)：school
第二种写法(首字母大写)：School
多个单词组成：
第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
备注：(1)组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
(2)可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签:
第一种写法：
第二种写法：
备注：不用使用脚手架时，
3.一个简写方式：
const school = Vue.extend(options) 可简写为：const school = options
//准备好一个容器
{{msg}}
//准备好一个容器
关于VueComponent：
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是
Vue.extend生成的。
2.我们只需要写
对象，即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的实例对象（也可称之为：组件实例对象）。
五：一个重要的内置关系1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
2.为什么要有这个关系：让组件实例对象可以访问到 Vue原型上的属性、方法。
//准备好一个容器
练习一下单文件组件的语法
//准备一个容器