Vue2笔记

一、Vue初识

1. 想让Vue工作，必须创建一个Vue实例，且需要传入一个配置对象
2. root 容器的代码依旧符合html规范，只不过加入了一些Vue语法
3. root 容器李的代码被称为Vue模板
4. Vue实例和容器是一 一对应的
5. 真实开发中只有一个Vue实例，且会搭配组件一起使用
6. {{xxx}}中的xxx要写成js表达式，且xxx可以自动读取到data中的所有属性
7. data中属性发生变化时，页面中的数据也会发生响应的变化
8. {{}}该语法为Vue的插值语法

二、模板语法

1. 插值语法：用于解析标签体内容，{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
2. 指令语法：用于解析标签（包括：标签属性、标签体内容、绑定事件）

三、数据绑定

1. 单向绑定（v-bind）：数据只能从data流向页面
2. 双向绑定（v-model）：数据可以在data和页面间双向流动

四、el与data的两种写法

①、el

1. new Vue 的时候配置el属性
2. 先创建Vue实例，随后再通过vm.$mount('盒子id')来指定el的值

②、data

1. 对象式
2. 函数式

五、MVVM模型

1. M：模型(Model)：data中的数据
2. V：视图（View）：模板代码
3. VM：视图模型（ViewModel）：Vue实例
4. data中所有的属性，最后都出现在了vm中，vm中所有的属性，在Vue模板中可以直接使用

六、数据代理

1. 通过vm对象来处理data中属性的操作
2. 好处：更加方便的操作data中的数据
3. 原理：通过Object.defineProperty（）把data对象中所有的属性添加到vm上，为每一个添加到vm上的属性都指定一个getter/setter，在其内部去操作data的对应属性

七、事件处理

①、基本使用

1. 使用 v-on 或 @ 绑定事件
2. 事件的回调需要配置在methods对象中，最终会在vm上
3. menthods中配置的函数，不要使用箭头函数，否则this就不是vm
4. menthods中配置的函数，都是被Vue管理的函数，this指向的是 vm 或 组件实例对象
5. @click = "demo" 和 @click=“demo（@event）”效果一致，后者可以传参

②、修饰符

1. prevent：阻止默认时间
2. stop：阻止事件冒泡
3. once：事件只触发一次
4. capture：使用事件的捕获模式
5. self：只有event.target是当前操作的元素时才触发事件
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕

③、键盘事件

1. Vue中常见的按键别名（此处只记载特殊情况）：换行，Tab键，需要配合keydown使用
2. Vue未提供别名按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case
3. 系统修饰符 ctrl、alt、shift、meta，配合keydown使用为正常触发事件，但配合keyup使用需要按下修饰键的同时，再按下其他键，时间才可以触发
4. 可以使用keycode去指定具体的按键
5. Vue.config.keyCodes.自定义键名 = 键码（数字），可以去定制按键别名

八、计算属性

1. 定义：要用到属性不存在，通过已有属性计算得来
2. 原理：底层借助了Objcet.defineproperty方法提供的getter和setter
3. get函数什么时候执行？初始时会执行一次，依赖的数据发生改变时会被再次调用
4. 优势：与methods实现相比较，内部有缓存机制（复用），效率更高，调试方便
5. 计算属性最终出现在vm上，直接读取使用即可；如果计算属性被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化
6. 无法异步完成数据维护

九、监视属性

1. 当被监视的属性变化时，回调函数自动调用，进行相关的操作
2. 监视的属性必须存在，才可以监视
3. 两种写法，new Vue时传入watch配置、通过vm.$watch监视
4. 可以开启异步任务
5. 深度监视

• Vue中的watch默认不监测对象内部值的变化（一层），但是可以监视对象内部值的变化
• 配置deep：true可以监视对象内部值的改变（多层）

十、绑定样式

1. class写法：class="xxx"，xxx可以是字符串、对象、数组

• 字符串写法适用于：类名不确定，要动态获取
• 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
• 数组写法适用于：要绑定多个样式，个数确定，名字确定，但是不确定用不用

1. style样式：

• ：style="{fontsize：xxx}"其中xxx是动态值
• ：style="[a，b]"其中a、b是样式对象

十一、条件渲染

①、v-if

• 写法：v-if="表达式"；v-else-if="表达式"；v-else="表达式"
• 适用于：频率较低的场景
• 特点：不展示的DOM元素直接被移除
• 注意：v-if可以和：v-else-if、v-else一起使用，但是结构不可以被打断

②、v-show

• v-show="表达式"
• 适用于：切换频率较高的场景
• 特点：不展示的DOM元素未被移除，只是被实用样式隐藏掉

③、使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到

十二、列表渲染

1. 列表渲染

• 用于展示列表数据
• 语法：v-for="（item，index）in xxx"：key="yyy"
• 可遍历：数组、对象、字符串、指定次数

1. key的原理

1. 过滤
2. 排序

十二、数据监视

1. vue会监视data层中所有的数据
2. 如何检测对象中的数据？通过setter实时监视，且要在new Vue 的时候就传入要监视的数据。

• 对象中后追加的属性，Vue默认不做任何响应式处理
• 如需给后添加的属性做响应式，使用以下两个API：Vue.set（target，propertyName/index，value）或vm.$set（target，propertyName/index，value）

1. 如何检测数组中的数据？通过包裹数组，更新元素的方法实现，即调用原生的方法对数组进行进行更改，然后重新解析模板，进而更新页面
2. 修改数组元素的方法：push（）、pop（）、shift（）、unshift（）、splice（）、sort（）、reverse（）以及Vue.set（）或vm.$set（）
3. Vue.set（）或vm.$set（）不能给vm或vm的跟数据对象添加属性

十三、收集数据

1. ，则v-model收集的是value的值，用户输入的就是value值
2. ，则v-model收集的是value的值，且要给标签配置value值

• 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
• 配置input的value属性，v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）；v-model的初始值是数组，那么收集的就是value组成的数组

1. v-model的三个修饰符：lazy，失去焦点再收集数据；number，输入字符串转为有效数字；trim，过滤首尾空格

十四、过滤器

1. 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单的逻辑）
2. 注册：Vue.filter（name，callback）或new Vue{filters：{}}
3. 使用：{{ xxx | 过滤器名 }} 或 v-bind：属性 = “xxx | 过滤器名”
4. 过滤器也可以接收额外的参数，多个过滤器也可以串联；未改变原有的数据，是产生新的对应的数据

十五、内置指令

1. v-text

向其所在的节点中渲染文本内容；与插值语法的区别：v-text会替换掉节点中的内容，{{ xx }}不会

1. v-html

向指定节点中渲染包含html结构的内容。与插值语法的区别：v-html会替换掉节点中的内容，{{ xx }}不会；v-html可以识别html结构；v-html有安全性问题，在网站上动态渲染HTML是非常危险的，容易导致xss攻击，在可信内容上使用v-html，永远不要用在用户提交的内容上

1. v-cloak

本质是一个特殊属性，Vue实例创造完并接管容器后，会删掉v-cloak属性；使用css配合v-cloak可以解决网速慢时页面展示除{{ xxx }}的问题

1. v-once

v-once所在节点在初次动态渲染后，就视为静态内容了；以后的数据的改变不会引起v-once所在结构的更新，可用于优化性能

1. v-pre

Vue在编译时。跳过其所在的节点的编译过程，会加快编译速度

十六、自定义指令

十七、生命周期

1. 生命周期回调函数、生命周期函数、生命周期钩子
2. Vue在关键时刻帮我们调用的一些特殊名称的函数
3. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
4. 生命周期函数中的this是指向vm或组件实例对象
5. 常用的生命周期钩子

• mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息
• beforeDesstory：清除定时器、解绑自定义事件、取消订阅消息

1. 销毁Vue实例：

• 销毁后借助Vue开发工具看不到任何消息
• 销毁后自定义时间会失效，但原生DOM事件依然有效
• 一般不会在beforeDesstory中操作数据，即使操作，也不会触发更新流程了

十八、组件

1. 非单文件组件

①、组件使用步骤：定义-注册-使用

②、如何定义组件？

使用Vue.extend（options）创建，其中options和new Vue（options）时传入的那个options几乎一样，但也有点区别

• el不要写 — 最终所有的vm都要经过一个vm的管理，由vm中的el决定服务哪个容器
• data必须写成函数 — 避免组件被复用时，数据存在引用关系
• 使用template可以配置组件结构

③、如何注册组件？

• 局部注册：靠new Vue的时候传入components选项
• 全局注册：靠Vue.component（‘组件名’，组件）

④、编写组件标签

1. 非单文件组件
2. VueComponent构造函数

①、组件的本质是一个名为VueComponent的构造函数不是程序员定义的，是Vue.extend生成的

②、写时只需要写为或，Vue解析时会帮我们创建组件的实例对象

③、每次调用Vue.extend，返回的都是一个全新的VueComponent

④、关于this的指向

• 组件配置中data函数、methods中的函数、watch中的函数、computed中的函数他们的this均是VueComponent实例对象
• new Vue（options）配置中data函数、methods中的函数、watch中的函数、computed中的函数他们的this均是Vue实例对象

⑤、VueComponent的实例对象可以简称vc

1. 单文件组件

十九、脚手架

二十、组件化编码流程

1. 组件化编码流程

①、拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突

②、实现动态组件：考虑好数据存放的位置，数据是一个组件在用，还是一些组件在用

a.一个组件用：放在组件自身即可

b.一些组件用：放在他们共同的父组件上

③、实现交互：从绑定事件开始

1. props适用

①、父组件 ==> 子组件的 通信

②、子组件 ==> 父组件 通信

1. 使用v-model时切记：其绑定的值不能是props传过来的值，因为props是不可以修改的
2. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做

二十一、组件自定义事件

二十二、全局事件总线