1.Vue核心
1.1 初识Vue
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象。
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法。
3.root容器里的代码被称为“Vue模板”。
4.容器和实例的关系：容器和实例只能是一一对应的关系。开发中只会出现一个vue实例
a.多个容器对应一个实例，只有第一个容器会绑定。
b.多个实例对应一个容器，只有第一个实例会生效。
5.JS表达式和JS代码
a.JS表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方,例如：a，a+b，demo(1)，x==y?"A":"B".
b.js代码（语句）：只控制走向不产生值
if(){}，for(){}
6.{{xxx}}中xxx要写表达式，且xxx可以自动读取到data中的所有属性。
7.一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新。
Document
{{name}}
{{name}}
1.2 模板语法
1.2.1 差值语法
差值语法只管标签内容，例如:上方代码中的yyyy是标签体内容。
写法{{yyyy}},yyyy是js表达式，且可以读取到data中的所有属性。
yyyy
1.2.2 指令语法
指令语法只管标签属性，例如：上方代码中的xxxx是标签属性。
功能：用于解析标签（包括：标签属性，绑定事件等等），xxxx也是是js表达式，且可以读取到data中的所有属性。
如果属性前面加了v-bind，那么属性后面的“xx”内容，就会被当做表达式来执行。
v-bind:可以简写为:
备注：vue中有很多指令，且形式都是：v-***，此处v-bind只是举例子使用。
1.3数据绑定
vue有两种绑定方式：单向绑定和双向绑定
单向数据绑定
双向数据绑定
单向数据绑定
双向数据绑定
1.3.1单向绑定（v-bind:）
数据只能从data流向页面，无法从页面影响data
1.3.2双向绑定（v-model:）
数据可以从data流向页面，页面也可以流向data
1.3.3备注
1.双向绑定一般都应用在表单类元素上如：input,select,redio等等，有value的元素，因为只有用户有操做的元素，才有可能改变vaule，才有双向绑定的意义。类似于
等标签，用户无法修改value，自然也没有双向绑定的意义。
2.v-model:value可以简写为v-model，因为v-model默认收集的就是value属性值。
1.3.4 简写
v-bind:value简写为:value
v-model:value简写为:v-model:
1.3.5 el与data的两种写法
1.3.5.1 el写法
（1）new Vue的时候配置el属性
（2）先创建Vue实例，接收以后通过v.$mount("#id")对el进行绑定
1.3.5.2 data写法
（1）对象式
（2）函数式
在组件中，data必须使用函数式否则会报错。
1.3.5.3 注意：
在Vue管理的函数中，一定不要用箭头函数，否则this就不再是Vue实例了，而是Window。
{{name}}
1.4 MVVM模型
1.4.1 概念
1.M：模型（Model）对应data中的数据
2.V：视图（View）对应模板
3.VM：视图模型（ViewMode）对应Vue实例对象
学校名称：{{name}}
学校地址：{{address}}
VM属性：{{$createElement}}
1.4.2结论
（1）data中的所有属性最后都会出现在vm上。
（2）vm上的所有属性以及vue圆形上的所有属性，在vue模板中都可以直接使用
1.5 数据代理
1.5.1 Object.defineproperty方法
1.5.2 数据代理概念
通过一个对象代理，对另一个对象中属性的操作（读/写）
1.5.3 Vue中的数据代理
（1）Vue中的数据代理：通过vm对象来代理data中属性的操作（读/写）。
（2）Vue中数据代理的好处：更加方便的操作（读/写）data中的数据。
（3）基本原理：通过Object.defineProperty()把data对象中的所有属性都加到vm上，为每一个添加到vm身上的属性都制定一个getter/setter方法，在getter/setter方法内部去操作（读/写）data中的属性。
具体内容参考后面的数据劫持。
1.6事件处理
1.6.1事件的基本处理
事件的基本使用：
（1）使用v-on:xxx 或者@xxx绑定事件，其中xxx是事件名
（2）事件的回调需要配置在methods对象中，最终会在vm桑。
（3）methods中配置的函数，不要使用箭头函数，否则this指向的不是vue而是window
（4）methods中配置的函数都是被vue所管理的函数，this指向vm或者组件实例对象
（5）@click="demo"和@click="demo($event)"效果是一样的，但是后者有传参。
欢迎来到{{address}}
1.6.2 事件修饰符
Vue中的事件修饰符
（1）prevent：阻止默认事件（常用）。
（2）stop：组织事件冒泡（常用）。
（3）once：事件只能触发一次（常用）。
（4）capture：使用事件的捕获模式。
（5）self：只有event.target是当前操作的元素才会触发的时间。
（6）passive：时间的默认行为立即执行，无需等待时间回调执行完毕
1.6.3键盘事件
（1）Vue中常用的按键别名：
回车=》enter
删除=》delete（捕获删除和退格键）
退出=》esc
空格=》space
换行=》tab（特殊，必须配合keyDown使用）
上=》up
下=》down
左=》left
右=》right
（2）Vue未提供别名的按键可以用原始的key值去绑定，但要注意转为kebab-case（短横线命名）
（3）系统修饰键（用法特殊）：ctrl、alt、shift，meta（win）
（3.1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
（3.2）配合keydown使用：正常触发事件。
（4）也可以用keyCode去指定按键（不推荐）。
（5）Vue.config.keyCodes.自定义键名=键码，可以定制按键别名。
1.6.4总结
1.7.2的修饰符可以连续使用：@click.passive.stop="demo"
1.7.3系统修饰键后面也可以连续使用：@keyUp.ctrl.y="demo"
1.7 计算属性与监视
当页面有两个输入框，且另一个位置需要计算两个框之内的内容时：
1.7.1计算属性
1.7.1.1 差值语法
姓
名
姓名：{{firstName}}{{lastName}}
1.7.1.2计算属性
计算属性：
（1）定义：要用的属性不存在，要通过已有属性进行计算。
（2）原理：底层借助了Object.defineproperty方法提供的getter和setter方法。
（3）get函数什么时候执行：
（3.1）初次读取属性时会执行一次。
（3.2）当以来的属性，数据发生改变时，会再次调用。
（4）优势：与methods实现相比，内部有缓存机制（可服复用），效率更高，调试方便。
（5）备注：
（5.1）计算属性最终会出现在vm上，直接读取即可使用。
（5.2）如果计算属性要被修改，那么必须写set函数去响应修改，且
set中要引起计算式依赖的数据发生改变。
姓
名
姓名：{{fullName}}
1.7.1.3计算属性简写
当计算属性只考虑读取，不考虑编辑时计算属性可以简写：
姓
名
姓名：{{fullName}}
1.7.2 监视属性
1.7.2.1监视属性两种写法
监视属性watch:
（1）当贝坚实的属性发生变化是，回电好书自动调用，执行相关代码。
（2）监视的属性必须存在才能监视
（3）监视属性的两种写法：
（3.1）.new Vue是传入watch配置
（3.2）通过vm.$watch监视
今天天气很{{info}}
1.7.2.2深度监视
深度监视：
（1）VUe中的watch默认部件是对象内部值得改变。（一层）
（2）配置deep:true可以监测对象内部值改变。（多层）
备注：
（1）Vue自身可以检测对象内部指的改变，但是Vue提供的watch默认不可以。
（2）使用watch根据数据具体结构，决定是否采用深度监视。
今天天气很{{info}}
a的值为：{{numbers.a}}
b的值为：{{numbers.b}}
1.7.2.3监视属性简写
1.7.3 计算属性和监视实现对比
computed和watch之间的区别：
（1）computed能完成的功能，watch都可以完成。
（2）watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
（1）所有被Vue管理的函数最好写成普通函数，这样this指向的是vm或者组件实例对象。
（2）所有不被VUe所管理的函数（定时器回调函数，ajax回调函数等），做好使用箭头函数，这样this指向的才是vm
今天天气很{{info}}
1.8 class和style绑定
1.8.1 概念
（1）在应用界面中某个（些）元素的样式是变化的。
（2）class/style绑定就是专门实现动态样式效果的技术
1.8.2 class绑定
（1）:class='xxx'。
（2）表达式是字符串‘classA’。
（3）表达式是对象{classA:isA,classB:isB}。
（4）表达式是数组['classA','classB']。
{{name}}
{{name}}
{{name}}
1.8.3 style绑定
（1）:style="{{fontSize:xxx}}"其中xxx是动态值
（2）:style="[a,b]"其中ab是样式的对象
{{name}}
{{name}}
1.9 条件渲染
1.9.1条件渲染指令
（1）v-if 与 v-else/v-else-if
写法：
（1.1）v-if="表达式"。
（1.2）v-else-if="表达式"。
（1.3）v-else。
适用于：切换频率较低的场景
特点：不展示的dom元素直接移除。
注意：v-if可以和v-else-if，v-else一起使用。但是结构不能被“打断”。
（2）v-show
写法：v-show="表达式"
适用于：切换频率较高的场景
特点：不展示的dom元素未被移除，仅仅使用样式隐藏
（3）备注：
（3.1）使用v-if时，元素可能无法获取到，而v-show元素一定会获取到。
（3.2）template不能和v-show配合使用，v-if可以
{{name}}
{{name}}
1.9.2 v-if和v-show区别
（1）如果频繁切换用v-show。（页面不显示，但是元素还在）
（2）当条件不成立时，v-if所有子节点都不会解析。（页面不显示，元素也不加载）
1.10 列表渲染
1.10.1循环遍历
v-for指令：
（1）用于展示列表数据。
（2）语法：v-for="(item,index) in xxx" :key="yyy"。
（3）可以遍历：数组，对象，字符串，指定次数。
人员列表
- {{person.name}}-{{person.age}}
汽车信息
- {{param}}-{{index}}
字符串信息
- {{char}}-{{index}}
循环指定次数
- {{char}}-{{index}}
1.10.2 key的原理（面试题）
面试题：react，vue中key有什么作用？（key的内部原理）
（1）虚拟dom中key的作用：
key是虚拟dom对象的标识，当状态中的数据发生变化时，vue会根据【新数据】生成【新虚拟dom】，随后vue对【新虚拟dom】与【旧虚拟dom】进行差异比较，比较规则如下：
（2）比较规则：
（2.1）旧虚拟dom中找到的新虚拟dom相同的key。
（2.1.1）若虚拟dom中内容没变，直接使用之前的真是dom。
（2.2.2）若虚拟dom中的内容变了，则生成新的真是dom，随后替换掉页面中
真实dom。
（2.2）旧虚拟dom中未找到与新虚拟dom中相同的key
（2.2.1）创建新的真是dom，然后渲染到页面。
（3）用index作为key可能会引发的问题：
（3.1）若对数据进行逆序添加，逆序删除等破坏顺序的操作
会产生没有必要的真是dom更新==》界面效果没问题，但是效率低
（3.2）如果结构中含有输入类dom：
会产生错误的dom更新==》页面有问题
（4）开发中如何选择key：
（4.1）最好使用每条数据的唯一标识作为key，比如id，手机号，身份证号等等。
（4.2）如果不存在对数据的逆序删除，逆序添加等破坏顺序的操作，仅用作渲染，
使用index作为key没有任何问题。
人员列表
-
{{person.name}}-{{person.age}}
1.10.3 列表筛选
可以使用计算实行或者监视属性实现，优先使用计算属性。
人员列表
-
{{person.name}}-{{person.age}}-{{person.sex}}
1.10.4 列表排序
增加排序属性，计算属性fliterPersonList返回搜索之前，进行一次数组排序，然后返回排序后的数组。
人员列表
-
{{person.name}}-{{person.age}}-{{person.sex}}
1.10.5 Vue无法检测到的数据改变
如果以对象的形式更新personList[0]，Vue无法检测到数据的改变，vue开发工具也不会体现，但是如果先点击按钮，再打开Vue开发工具，则可以看到修改后的数据，但是页面并未修改，故：如果按第二种形式修改data里的属性的内容，Vue无法检测到属性的修改。
人员列表
-
{{person.name}}-{{person.age}}-{{person.sex}}
1.10.6 Vue监测原理
Vue中监视数据的原理：
（1）vue会监视data中所有层次的数据。
（2）如何监测对象中的数据：
通过setter实现监测，且要在new Vue时就要传入检测的数据。
（2.1）对象中后追加的属性Vue默认不做响应式处理。
（2.2）如需给后添加的属性做响应式处理请使用如下API:
（2.2.1）Vue.set(targer,propertyName/index,value)
（2.2.2）vm.$set(targer,propertyName/index,value)
（3）如何检测数组中的数据：
通过包括数组更新元素的方法实现，本质就做了两件事：
（3.1）调用原生对应的方法，操作数组中的元素。
（3.2）重新解析模板，进行页面更新。
（4）在Vue中修改数组中的某个元素一定要调用如下方法：
（4.1）使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
（4.2）Vue.set()、vm.$set()，不能给vm或vm跟数据对象（data）添加属性。
学生信息：
姓名：{{student.name}}
年龄：{{student.age}}
性别：{{student.sex}}
爱好
- {{h}}
朋友
- {{f.name}}--{{f.age}}
1.11 收集表单数据
1.11.1 数据收集
收集表单数据：
（1） v-model收集的是value的值，用户输入的value。
（2） v-model收集的是value的值，选中标签所配置的的value。
（3）
（3.1）若没有配置input的value属性，那么v-model收集的是checked勾选状态（true/false）
（3.2）若配置input的value属性:
（3.2.1）如果v-model绑定非数组，那么v-model收集的是checked勾选状态（true/false）
（3.2.2）如果v-model绑定数组，那么v-model收集的是checked勾选选择框对应的value
1.11.2 v-model的修饰符
v-model的三个修饰符：
（1）lazy：失去焦点后收集数据
（2）number：输入字符串转为有效数字，一般配合type="number"使用。
（3）trim：过滤收尾所有的空格，字符串中间空格无法过滤。
1.12 过滤器
1.12.1 概念
当我们获得了一个时间戳，我们并不需要这个获取到的时间戳，需要这个时间戳代表的时间，此时我们可以用过滤器将其过滤，然后获取对应的时间后使用。
1.12.2过滤器使用
过滤器：
定义：对要显示的数据进行特定格式化后在显示（适用于一些简单的逻辑处理）。
语法：
（1）注册过滤器：Vue.filter(name,callback)或者new Vue(filters:{})。
（2）使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性="xxx | 过滤器名"。
备注：
（1）过滤器也可以接受额外的参数，多个过滤器也可以串联
（2）并没有改变原本的数据，只是产生了新的数据。
显示格式化后的时间
{{fmtTime}}
{{getFMTime()}}
{{time | timeFormater }}
{{time | timeFormater('YYYY_MM_DD') |mySlice}}
显示格式化后的时间
{{time }}
{{time | mySlice}}
1.13 内置指令
1.13.1 学过的指令
v-bind：单项绑定解析表达式，可简写为:xxx
v-model：双向数据绑定
v-for：遍历数组，对象，字符串
v-on：绑定事件监听，可简写为@
v-if：条件渲染（动态控制节点是否存在）
v-else：条件渲染（动态控制节点是否存在）
v-show：条件渲染（动态控制节点是否显示）
1.13.2 v-text：
（1）作用：向所在的节点中渲染文本内容
（2）与差值语法不同，v-text会替换掉节点中所有的内容，{{xxx}}则不会替换
你好，{{name}}
你好，
你好，
1.13.3 v-html：
v-html指令：
（1）作用：向指定节点渲染包含html结构的内容。
（2）与差值语法的区别：
（2.1）v-html 会替换掉节点中的所有内容，{{xx}}则不会。
（2.2）v-html 可以识别html结构
（3）严重注意：v-html有安全性问题！！！
（3.1）在网站上动态渲染任意HTML是非常文献的容易导致XSS攻击。
（3.2）一定要在可信的内容上使用v-html，永远不要用在提交的内容上。
你好，{{name}}
1.13.4 v-cloak：
v-cloak指令（没有值）
（1）本质是一个特殊的属性，Vue创建完毕后，会删掉c-cloak属性。
（2）使用css配合v-cloak可以解决网速慢导致的页面站输出{{xxx}}的问题。
你好，{{name}}
1.13.5 v-once：
v-once指令：
（1）v-once所在的节点在初次动态渲染之后就视为静态内容了。
（2）以后数据的改变不会引起v-once所在结构更新，可以用于优化性能。
初始化n={{n}}
当前n={{n}}
1.13.6 v-pre：
v-pre指令：
（1）跳过其所在节点的编译过程。
（2）可利用它条过没有使用指令语法，没有使用差值语法的节点，可以加快编译。
静态内容
初始化n={{n}}
当前n={{n}}
1.14 自定义指令
参数：
（1）指令所绑定的元素
（2）绑定指令的具体实现
1.14.1 函数式
当前的n=
放大10倍的n=
放大10倍的n=
1.14.2 对象式
1.14.3 总结
（1）定义语法：
（1.1）局部指令：
//创建vue实例 const vm = new Vue({ directives:{ //函数式 big(element,binding){ }, //对象式 fbind:{ //1.指令与元素成功绑定时（页面刚加载） bind(element,binding){ element.value=binding.value }, //2.指令所在元素插入页面时 inserted(element,binding){ element.focus() }, //3.指令所在的模板被重新解析时 update(element,binding){ element.value=binding.value element.focus() } } } } })（1.2）全局指令：
（1.2.1）Vue.directive(指令名:配置对象)
（1.2.2）Vue.directive(指令名:回调函数)
（2）配置对象中常用的三个回调：
（2.1）bind：指令与元素成功绑定时调用。
（2.2）inserted：指令所在元素被插入到页面中时调用。
（2.3）update：指令所在模板被更新时调用。
（3）备注：
（3.1）定义指令时不加v-，但是使用时加v-
（3.2）指令如果是多个单词要用kebab-case方式命名，不要用canelCase命名
1.15生命周期
1.15.1 概念
生命周期：
（1）又名：生命周期回调函数，生命周期函数，生命周期钩子。
（2）是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
（3）生命周期函数的名字不可更改，但是函数的具体内容是根据具体需求编写的。
（4）生命周期函数中的this指向的是vm或组件实例的对象。
1.15.2 重要的生命周期
vm的生命周期：
创建之前==》调用brforeCreate()函数
创建完毕==》调用created()函数
挂载之前==》调用beforeMount()函数
挂在完毕==》调用mounted()函数==================》【重要的钩子】
更新之前==》调用beforeUpdate()函数
更新完毕==》调用updateed()函数
销毁之前==》调用beforeDestory()函数==============》【重要的钩子】
销毁完毕==》调用destoryed()函数
欢迎来打山东省
1.15.3 总结
常用的生命周期狗子：
（1）mounted：发送ajax请求，启动定时器，绑定自定义事件，订阅消息等初始化操作。
（2）beforeDestroy：清除定时器，解绑自定义时间，取消消息订阅等收尾工作。
关于vue销毁：
（1）销毁后的Vue借助开发者工具看不到任何信息。
（2）销毁后的自定义事件会失效，但是原生dom时间依然有效。
（3）一般不会beforeDestroy中操作数据，因为操作了也不会再触发更新，而且立刻销毁。