VUE2.0的一个学习总结

vue2.0知识总结

1概念

1.1 vue是一个专注于视图层的前端开发框架，通过数据驱动和组件化的方式实现了高效的前端开发 ，

1.12 vue是一个渐进式的框架 既可以通过文件引入的方式在普通页面中被引入使用，也可以基于webpack等构建系统 结合veu-router vuex进行前后端分离方式的项目开发，vue是当今企业当中使用比较多的开发框架 不仅是直接使用 vue还衍生出了很多基于vue封装后的框架

1.2MVVM Model模型（后端提供的接口）View视图（渲染到浏览器中的模板页面） ViewModel视图模型（vue实现的模型和视图之间的双向绑定的功能）MVVM是一种设计思想 Vue框架的开发体现了Mvvm的功能特点

1.3 双向数据绑定的实现 双向绑定原理 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。 这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

1.4组件 （组件并不是vue的特色功能） 在代码开发过程中，将应用中的一些小型、独立的、一般可以复用的功能代码封装起来的一种方式 1.5 组件化开发 将整个应用 从应用的整体到应用的每个功能页面再到每个功能模块全部都采用组件的方式进行开发

2.基本语法 2.1模板语法 2.1.1 文本绑定

1. {{表达式}} {{msg}} {{baseurl +url}} {{number>1}} {{show?'1':'2'}}

2. v-html 可以将内容原生html的方式插入到标签当中 innerhtml

3. v-text 可以将内容以文本的方式插入到标签当中 textContent

4. v-once 表示当前绑定的内容并不需要进行响应式的更新

5. v-pre 将{{}}识别为普通的html标签内容 不会被vue解析

6. v-cloak 在模板内容被解析之前始终作为一个属性设置到标签上

2.1.2属性绑定

1. v-bind:属性='表达式'/:属性="表达式" 就表示当前属性值是需要按照js的语法进行解析的

2. class绑定 ：class="['a','b']" :class="{a:show}" :class="['a',{b:show}]"

3. style绑定 :style="{width:'100px',zindex:1}" :style="[{height:'100px'},{color:'red'}]"

4. 对于组件的prop绑定 再绑定的时候 如果prop值是字符串类型并且要绑定的值就是一个字符串本身不是变量 那么绑定这些prop的时候可以不加；其他情况都需要通过：绑定

5. 在使用v-for/v-if v-else.. 可以绑定key属性以标识当前元素 key属性在一个列表或者一组判断中必须是独一无二的值

6. 在组件上绑定普通属性 会直接设置到组件的根元素身上 如果绑定的是类名或者行内样式会直接和根元素的类名和行内样式进行合并

2.2 列表和判断 2.2.1 条件渲染

1. v-show 根据绑定的值的真和假来控制元素的显示和隐藏 通过设置行内样式display:none来控制元素隐藏的

2. v-if 根据绑定的值的真和假来控制元素的显示和隐藏 通过控制元素是否渲染来实现显示隐藏的效果，可以配合v-else v-else-if 实现双路 多路分支的效果

3. 如果有并列的一组元素要实现显示或者隐藏的效果 可以通过template标签对这些并列元素进行包裹 在最终生成的渲染结果中是不会有多余的标签结构产生的

4. 在使用条件渲染时可以通过key属性为多个元素设置唯一标识 2.2.2 列表渲染

5. v-for "item in arr" "(item,index) in arr" "key in obj" "(key,value,index) in obj"

6. 在使用列表渲染时可以通过key属性为每个元素设置唯一标识 提升dom更新时的效率

7. 如果有并列的一组元素要实现循环输出的效果 可以通过template标签对这些并列元素进行包裹 在最终生成的渲染结果中是不会有多余的标签结构产生的

8. v-for v-if同时出现在一个标签身上 v-for会优先执行

2.3 事件绑定 2.3.1 语法

1. v-on：事件类型="" @事件类型 this.$on

2. methods 名称 方法（） 表达式

3. 事件的处理程序中 this指向当前的vue实例或者组件对象

4. 方法名称的方式绑定 直接从函数的第一个参数接收事件对象 如果是以表达式的方式接收 就通过$event直接访问事件对象

2.3.2 修饰符

1. .stop 阻止事件流的传播

2. .prevent 阻止浏览器默认行为

3. .once 绑定一次性的事件

4. .self 让当前事件不能有冒泡触发只能从自己身上触发

5. captrue 添加一个捕获型事件流的事件

6. .passive 表示当前事件不需要阻止浏览器默认行为

2.4 计算属性和侦听器

2.4.1 computed 计算属性在页面中输出一些需要经过计算转换才能得到的数据以简化模板的编写 动态接收来自于组件外部的数据 （父组件传递的prop、vuex中的state、getter）

2.4.2 侦听器 watch vue提供给我们自己去监听某个值变化的一个窗口 我们可以在侦听的函数中去执行自己想要执行的任意操作 如果要对于某个对象的属性进行监听 需要配置deep选项

2.5 表单绑定

1. v-model指令可以对于表单或者表单组件进行双向数据绑定 v-model只是一个快速双向绑定的语法糖

2. 普通的文本框和文本域 值就是要绑定的字符串

3. 单个复选框 值就是一个布尔值

4. 单选选项 值就是某个选项的value

5. 多选的选项 值就是选中的选项的value组成的数据

6. 修饰符 lazy 只在失去焦点时更新绑定值 number就是将绑定值转化为数值类型 trim自动清除绑定值两端的空格

2.6生命周期函数

1. beforeCreate 创建前 还未对Data数据进行处理

2. created 创建后 完成对于data中数据的劫持 建立对于数据的监听

3. beforeMount 渲染前 读取了内容模板 但是并没有对内容模板进行解析

4. mounted 渲染后 完成了内容的渲染 渲染后的内容已经进入到了网页当中

5. beforeUpdate 更新前 数据修改之后 页面更新之前

6. updated 更新后 数据修改之后 页面也完成更新渲染之后

7. beforeDestroy 销毁前 尝试去销毁某个实例前才会去触发的函数 $destroy

8. destroyed 销毁后 调用方法将实例销毁之后触发的函数 2.7 重要补充

9. $refs 用于获取所有设置了ref属性的标签和组件

10. $nextTick vue数据变化引起的dom更新是异步执行的 所以如果我们需要在dom更新之后再去执行一些操作 就需要将操作放置到 $nextTick的回调函数中 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

11. $set/$delete $set向data中的属性值为对象的属性添加一个响应式的属性 $delete 删除data中属性值为对象的属性的属性并触发响应式的更新

12. Vue.directive directives 定义自定义指令

13. Vue.mixin 混入 minxins定义混入对象

14. Vue.use 安装某个插件 Vue.use(ElementUI)

15. rander 函数以编程的方式进行虚拟节点的创建 rander(h){return h(标签名 、组件配置对象、异步函数、属性对象，子节点）}

16. Vue.filter filter 定义过滤器 通过管道运算符 |

3.组件化 3.1 组件的创建

1. Vue.component() 全局注册

2. compontents 局部注册

3. SFC 单文件组件的方式去创建 3.2 组件名

4. 连字符的方式 驼峰命名法都可以作为注册组件是的名称 在页面中必须采用连字符的方式引入 单文件组件中没有这个限制

5. 组件名称用多个单词 组件如果是作为vue-router页面配置没有这个限制 3.3 组件的配置项和实例没有太大差别

6. 组件没有挂载点 所以不需要el配置项

7. 组件必须指定template或者rander函数

8. data选项必须是一个函数 需要保证组件被复用时data状态不会互相影响 3.4 组件的prop可以用来接收外部传入的属性

9. prop的配置项可以是一个数组 ['a','b']

10. prop的配置项也可以是一个对象 {a:{type:String},b:{type:[String,Number],c:{require:true},d:{default:1} } }

11. 属性的名称可以是驼峰命名法或者连字符的方式定义 但是在模板当中传递的时候必须使用连字符的方式

12. prop 传递时单项数据流 props是由父组件传递给子组件的 父组件发生修改的时候子组件也会跟着修改 子组件不能直接修改父组件传递过来的属性 3.5$emit 广播 子组件当中通过$emit广播一个事件 在调用组件时可以进行监听 在监听函数就可以操作父组件的属性了

13. 在表单组件当中通过props接收value 通过$emit广播input事件 就可以在组件身上通过v-model来进行双向数据绑定了

14. 在组建内部通过prop接收了某个属性 并且通过$emit广播了 update：属性名称这样的事件 在组件身上就可以使用了 .sync简化绑定语法 3.6插槽 3.6.1 定义插槽

15. 默认插槽 <slot></slot>

16. 具名插槽 <slot name="header"></slot>

17. 作用域插槽 <slot :attr=''></slot>

18. 后背内容 <slot>后背内容</slot> 3.6.2 使用插槽

19. 默认插槽内容的传递 在组件标签中间写入 普通文本 标签 组件

20. 向指定的插槽传递内容 <template v-slot:插槽名称></trmplate>

<template #:插槽名称></trmplate>

3. 使用插槽向外传递的数据 <template #插槽名称="自定义的变量名称"></template> <template #插槽名称="{slot标签身上绑定的属性名}"></template>

3.7.1 <component is="组件名" ></componnet>

3.7.2 <keep-alive>动态组件</keep-alive> 在组建失活是保持自己内容的状态

3.8 组件间的通信

1. prop $emit

2. $on $event event hub实现兄弟组件之间的相互通信

3. $root $parent $refs 上下级组件之间的访问

4. provide 和inject 可以跨越多级组件进行通讯