叮咚：

提升自己，比仰望别人更有意义！！！

坚定自己的方向！去开拓打磨另一个自己！！！

此文章只是自己的理解！！！不喜勿喷！喜欢就给个赞哦！！！

希望各位互相监督，共同进步！共同致富！！！

Vue2要学习的内容：

初识vue
vue模板语法
数据绑定
el与data的两种写法
MVVM模型
数据代理
事件处理
计算属性
监视属性
绑定样式
条件渲染
列表渲染
收集表单数据
过滤器
内置指令
自定义指令
生命周期
单文件组件
Vue脚手架
mixin混入
ref $refs获取DOM 和子组件实例对象
props 配置
浏览器本地存储
组件自定义事件 $on$ emit $off
全局事件总线 $eventbus
配置代理解决跨域
插槽

一、初识vue

1,vue是什么？

vue是一套用于构建用户界面的渐进式javascript框架。

2，谁开发的？

2013年受到Angular框架的启发，尢雨溪开发出了一款轻量框架——seed,同年12月，seed更名为vue,版本号0.6.0.

2014年vue正式对外发布，版本号0.8.0

2015年10月27日，正式发布vue1.0.0Evangelion(新世纪福音战士)

2016年10月1日，正式发布vue2.0.0Ghost in the Shell(攻壳机动队)

2020年9月18日，正式发布vue3.0.0one Plece（海贼王）

3，vue的特点：

（1）采用组件化模式，提高代码复用率、让代码更好的维护

（2）声明式编码，让编码人员无需直接操作Dom,提高开发效率

（3）使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

4，学习vue之前要掌握的javascript基础知识：

ES6语法规范

ES6模块化

包管理器

原型、原型链

数组常用方法

axios

promise.......

二、vue指令的使用：

1，插值语法——是在标签体当中使用

2，v-bind——是和标签属性一起使用。动态的去绑定值，单向数据绑定，简写 `：`

3，v-model——只能用于表单类元素身上（输入类：input,单选框，多选框，下拉框等）。

vue中有两种数据绑定的方式：

（1）单向绑定（v-bind）,数据只能从data流向页面‘

（2）双向绑定（v-model）,数据不仅能从data 流向页面，还能从页面流向data。

  `v-model默认收集value值`

4， MVVM

如：

总结：

（1）data中所有的属性，最后都出现在了vm身上

（2）vm 身上所有的属性和 vue 原型上所有属性，在vue模板中都可以直接使用

5，Object.defineProperty的: get和set

6，数据代理：通过一个对象代理，对另一个对象中属性的操作。比如：读数据是get, 修改数据是set操作

7，vue中的数据代理

基本原理：

通过object.definepreperty()把data对象中所有属性添加到vm上。为每一个添加到vm 的属性都指定一个getter和setter。在getter和setter内部去操作获取或修改data中对应的属性。

8，复习 this 的指向

当我们调用函数时候，调用的方式不同决定了 this的指向不同。

（1）普通函数 this 指向window

（2）构造函数 this 指向构造函数和原型对象的this都是指向构造函数new出来的实例对象

（3）对象方法 this 指向该方法的对象

（4）事件绑定 this 指向谁调用指向谁

（5）定时器函数 this 指向 window

（6）立即执行函数 this 指向 window

（7）箭头函数 this 指向上层函数中的this

9，绑定事件监听，事件处理：v-on，简写 @

事件处理总结：

（1）使用v-on或@ 绑定事件

（2）事件回调需要配置在methods对象中，最终挂到vm上

（3）methods中配置的函数，不要用箭头函数！否则this就不是vm了

（4）methods中配置的函数，都是被vue所管理的函数，this的指向是vm 或组件实例对象

10，事件修饰符

（1）prevent: 阻止默认事件

（2）stop：阻止事件冒泡

（3）once: 事件只触发一次

（4）self: 只有event.target是当前操作的元素才触发事件。

（5）capture: 使用事件的捕获模式

（6）passive：立即执行，不需要等待事件回调执行

11，事件处理—— `键盘事件`

keyup触发场景：

当用户按下键，再次抬起时，被触发

keydown触发场景：

当用户按下键时，立刻被触发

大家记住，在Vue中有@符号的都是事件，所以@keyup，@keydown和@click是同一类别的。

vue为了方便开发，给keyup和keydown键盘事件配置了别名：

enter: 回车

esc: 退格键

delete: 删除键

tab: tab搭配keydown使用，不能搭配keyup使用，因为tab有将当前光标取消的功能

space：空格键

等一些别名，别名只是为了确定你按键盘的哪一个按键。

12，vue —— 计算属性 Computed

（1）通过data中的属性或者methods里面的方法计算得到计算的结果

（2）底层借助object.defineproperty 方法提供的getter和setter

（3）get函数什么时候执行？

初次读取会执行一次 和 当依赖数据发生变化时会被再次调用

（4）与methods实现相比。内部有缓存机制，效率更高，调试方便

（5）计算属性最终会出现在vm身上，直接读取使用即可

（6）如果计算属性要被修改，会调用set函数去响应修改

13，vue——侦听器 Watch

（1）当被监视的属性变化时，回调函数会自动调用

（2）监视的属性必须是存在的，才能进行监视

（3）监视的两种写法：new Vue 时传入watch配置和通过 vm.$watch监视

（4）handler 是当被监视的属性对象发生改变时执行。

（5）immediate 是初始化时让handler 调用一下 immediate：立即

（6）deep 是开启深度监听。vue自身可以监测对象内部值的改变，watch默认不监听对象内部值的改变，只检测一层。所以可以给watch配置deep 监测对象内部值的改变。

当watch配置只有handler时候可以简写：

14，computed和watch之间的区别：

（1）computed能完成的功能，watch都可以完成

（2）watch能完成的功能，computed不一定能完成，比如 watch可以进行异步操作

（3）所有被vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象

（4）所有不能被vue 管理的函数例如：定时器的回调函数、ajax的回调函数、promise的回调函数等。最好写成箭头函数，这样this 的指向才是 vm 或组件实例对象

15，vue里面是怎么绑定样式的？

绑定样式的写法：

16，条件渲染 v-if v-else if v-else 和 v-show

（1）v-if v-else-if v-else 适用于切换频率较低的场景，多分支的条件切换。对于dom元素是添加或者移除。

（2）v-show 适用于频繁切换率较高的场景。切换dom元素的时候，只是隐藏dom元素。

17，列表渲染 v-for

v-for用于展示列表数据，可遍历数组、对象、字符串，指定次数

18，key 的作用与原理：

（1）虚拟dom 中 key 的作用：

key 是虚拟dom对象的唯一标示，它可以更高效的更新虚拟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?

最好使用每条数据的唯一标识id作为key , 如果不存在对数据的逆序添加或删除等破坏顺序的操作，仅用于渲染列表操作，使用index作为key 是没有问题的。有id 用id, 没有id用index

19，vue检测数据的原理：

（1）vue会监视data中所有层次的数据

（2）如何监视对象中的数据呢？

1-通过setter实现监视，且要在new vue时就传入要坚实的数据。

2-对象中追加的属性vue默认不做响应式处理

3-如需要给后添加的属性做响应式，请使用vue.set或vm.$set 里面参数（目标，key,value）

（3）如何监视数组中的数据？

1-通过包裹数组更新元素的方法实现

2-调用原生对应的方法对数组进行更新

3-重新解析模板，进而更新页面

（4）vue修改数组中的元素用的七个方法：

2- vue.set()或vm.$set()

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

20，收集表单的数据和提交

总结： 如果： <input type="text" >则v-model收集的是value的值，用户输入的内容就是value值

如果： <input type="radio" >则v-model收集的是value值，且要给标签配置value值

如果：<input type="checkbox" >则配置input的value属性，初始值是数组，那么收集的就是value组成的数组。初始值不是数组，那么收集的就是checked勾选或未勾选，值是布尔值

备注：v-model的三个修饰符是：

1-lazy  失去焦点再收集数据

2-number  输入字符串转为有效的数字

3-trim  输入首尾空格的过滤

21，V-text

我们上面学过的指令有：

v-bind 单向绑定解析表达式，可简写为：

v-model 双向数据绑定

v-for 遍历数组/对象/字符串

v-on 绑定事件监听，可简写为 @

v-if 条件渲染（动态的控制节点是否存在）

v-show 条件渲染（动态的控制节点显示与隐藏）

V-text 作用是向其所在的节点中渲染文本内容。与插值语法的区别：v-text会替换掉节点中的内容，插值语法则不会。

22，cookie 的工作流程

（1）第一次向服务器发请求：携带用户名、密码，请求登录XXX 网站的服务器

（2）登录成功后，跳转至主页返回cookie的字符串（cookie的格式是Key:value组成）返回给浏览器

（3）浏览器拿到XXX网站服务器的cookie 后，在浏览器内存中存储。

（4）cookie里面存的是身份认证的标识。有的网站会一次性把所有的cookie给你，有的网站会交互时分次给。跨浏览器读取cookie是读不了的

（1）第二次向服务器发请求：比如查看用户信息，会自动把cookie带上，然后服务器进行校验

（2）服务器校验成功返回用户信息给浏览器

23，v-html

（1）作用：向指定节点渲染包含html结结构的内容

（2）与插值语法的区别：v-html会替换掉节点中所有的内容，插值语法不会，v-html会识别html结构

（3）注意：v-html会有安全性问题，在网站上动态渲染任意html是非常危险的，容易导致xss（中文名：冒充用户之手）攻击一定要在可信的内容上使用v-html ，不要在用户提交的内容上使用

24，v-once

（1）v-once所在的节点，在初次动态渲染会执行一次

（2）以后数据改变不会引起v-once所在结构的更新，可用于优化性能

25，V-pre

跳过所在节点的编译过程，加快编译。缺点：如果节点上有指令语法、插值语法。则不会编译

26，自定义指令

（1）自定义指令——函数形式写法

（2）自定义指令——对象形式写法

（3）自定义指令——总结

三，Vue生命周期

（1）生命周期又名生命周期回调函数、生命周期函数、生命周期钩子。

（2）vue 在关键时刻帮我们调用的一些特殊名称的函数

（3）生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的

（4）生命周期函数的this指向的是vm 或组件实例对象

1，生命周期——挂载流程

从vue的实例创建到销毁的过程就是vue的生命周期。就是从创建初始化数据，编译模板，挂载dom渲染，更新到渲染，销毁这一系列的过程。它主要分为4个阶段8个钩子函数：创建前后，挂载前后，更新前后，销毁前后，以及特殊场景的生命周期函数。

（1）beforeCreate 创建前：new Vue 后执行初始化生命周期、事件，但数据代理还未开始。无法通过vm访问到data的数据，methods中的方法

（2）Created 创建后：这个时候数据检测，数据代理创建完毕。可以通过vm访问到date中的数据，methods中配置的方法

（3）beforeMount挂载前：此时页面呈现的是未经vue编译的DOM结构。所有对DOM的操作，最终都不奏效。

（4）Mounted挂载后：此时页面上呈现的是经过vue编译的DOM。对DOM的操作是有效的（但尽可能避免操作DOM）。挂载完毕，一般在这进行开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。

2，生命周期——更新流程

（5）beforeUpdate更新前，这时候的数据是新的，但页面还是旧的。此时页面和数据未保持同步。

——————根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，完成数据到页面的更新。

（6）Updated更新后，数据是新的，页面也是新的，页面和数据保持同步

3，生命周期——销毁流程

（7）beforeDestory 销毁前，这个时候data,methods,指令等，都处于可用状态，马上要执行销毁过程，一般在此处关闭定时器取消订阅消息，解绑自定义事件等收尾操作。所有对数据的修改不会再触发更新了

（8）destoryed： 销毁后，清理与它实例的连接，解绑它的全部指令以及自定义事件等操作

4，生命周期——总结

（1）mounted 发送ajax请求，启动定时器、绑定自定义事件，订阅消息等初始化操作

（2）beforeDestroy 清除定时器、解绑自定义事件、取消订阅消息等收尾工作

（3）关于销毁Vue实例:

1-销毁后借助vue开发者工具看不到任何的信息
2-销毁后自定义事件会失效，但原生DOM事件依然有效
3-一般不会在beforeDestroy操作数据，因为即便操作数据，也不会在触发更新流程了

四，组件

1,组件的使用：

（1）组件——用来实现局部功能效果的代码集合，可以复用代码，简化项目编码，提高运行效率

（2）局部注册组件：

（3）全局注册组件：

（4）data必须写成一个函数，为什么？

避免组件被复用时，数据存在引用关系

（5）如何注册组件

局部：靠new Vue的时候传入components选项

全局：靠Vue.component(‘组件名’,组件)

（6）关于组件名的注意点：

1-一个单词组成首字母可以大小写

2-多个单词组成：可以驼峰命名或单词中间用短横线分开

3-组件名尽可能回避HTML中已有的元素名称，例如：h2 H2都不行

4-可以使用name配置项指定组件在开发者工具中呈现的名字

2，组件的嵌套：

3 , Vue component构造函数

（1）每次调用Vue.extend, 返回的都是一个个新的Vue Component!!!

（2）关于this指向：

1- 组件配置中：data函数，methods中函数，watch中函数，computed中函数他们this指向是VueComponent

2- new Vue 配置中：data函数，methods中函数，watch中函数，computed中函数他们this指向Vue实例对象

（3）VueComponet的实例对象，可称为：组件实例对象

（4）Vue 的实例对象简称： vm

（5）vm不等于vc 因为 vm身上有el 可以指定容器，且data可以是函数也可以是对象。vc身上没有el，且data必须是函数。

4，vue实例对象和vueComponent实例对象的内置关系：

为什么有这个内置关系？

是让组件实例对象VueComonent 可以访问到 Vue原型上的属性和方法

五，Vue脚手架

1，VUE CLI—— c ：command， L ：line， I： interface ，直译：命令行接口工具

（1）vue脚手架是vue官方提供的标准化开发工具

（2）最新的版本是4.x

2，具体使用步骤：

（1）全局安装 (仅第一次执行安装)

npm install -g @vua/cli

（2）创建项目命令

vue create X项目名称X

（3）启动项目

npm run serve

（4）注意：

如果下载缓慢请配置淘宝镜像：

npm config set registry  https://registry.npm.taobao.org

vue脚手架隐藏了所有webpack 相关配置，若想查看具体的webpack 配置，请执行 : vue inspect>output.js

3,分析脚手架的结构

（1）main.js

（2）public/index.html

（3）分析 render 函数

关于不同版本的vue:

1—vue.js 与vue.runtime.XXX.js区别：vue.js是完整版的VUE 包含核心功能+模板解析器

2—而 vue.runtime.XXX.js 是运行时版的VUE 只包含核心功能，没有模板解析器

3—因为vue.runtime.XXX.js 没有模板解析器，所以不能使用template 配置项，需要使用 render 函数接收到createElement 函数去指定具体内容

（4）vue.config.js 文件可以对脚手架进行个性化的配置

4，ref 属性：获取DOM元素和组件实例对象

（1）应用在html 标签上获取的是真实DOM 元素，应用在组件实例对象上获取组件实例对象（vc）

（2）使用方式：

5，props 配置

注意：

6， mixin 混入

7，插件

8，scoped 样式

scoped 样式作用：让样式在局部生效，防止冲突

9，怎么查看XXX插件的 —— 版本有哪些：

执行命令：

六，TodoList 案例

（1）组件化编码流程（通用）

1- 实现静态页面组件：抽取组件，使用组件实现静态页面效果

2- 展示动态数据：数据类型，名称是什么？ 数据保存在哪个组件？

3- 交互——从绑定事件监听开始

（2）总结

（3）浏览器本地存储

localStorage 和 sessionStorage 统称为： webStorage

七，组件自定义事件

1，组件自定义事件——绑定

2，组件自定义事件——解绑

3，组件自定义事件——总结

（1）自定义事件是一种组件间的通信方式，适用于：子组件传给父组件

（2）使用场景：A是父组件，B是子组件。B想给A传递数据，那么就要在A中给B绑定自定义事件，然后B用$emit触发自定义事件

（3）绑定自定义事件：

（4）若只想自定义事件只能触发一次，可以用 once 修饰符，或$once方法

（5）触发自定义事件： this.$emit('XXX', 数据)

（6）解绑自定义事件：this.$off('XXX')

（7）组件上也可以绑定原生Dom事件，需要使用native修饰符

（8）注意：通过this. $ref.XXX.$ on(‘XXX’, 回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题

八，全局事件总线 ———— 可以任意组件之间通讯

九，消息订阅与发布 ———— pubsub.js

（1）

（2）nextTick

（1）语法： this.$nextTick(回调函数)

（2）作用：在下次DOM更新结束后执行其指定的回调

（3）什么时候用：当改变数据后，要基于更新后的新的DOM进行某些操作时，要在nextTick所指定的回调函数中执行

十，配置代理、解决跨域

十一， vue ———— 插槽

（1）作用：可以让父组件向子组件指定位置插入html结构，也是一种组件间的通信方式

（2）默认插槽

（3）具名插槽

（4）作用域插槽

数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定

Vue2

叮咚：