vue2基础知识整理

Vue2

概念

vue

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

2. vue是一个渐进式框架，既可以通过文件引入的方式在普通页面中被引入使用，也可以基于webpack等构建系统结合vue-router vuex 进行前后端分离方式的项目开发

3. vue是当今企业当中使用比较多的开发框架不仅是直接使用vue还衍生出了很多基于vue的封中后的框架

MVVM

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

双向数据绑定的实现方式

数据双向绑定原理

使用 Object.defineProperty(对象，“属性名”，属性描述对象)

属性描述对象

1. 当前属性能否被遍历：

enumerable

2. 当前属性是否可以被重新配置：

configurable

3. 存取描述符 getter、setter

• get(){} 当访问name属性时调用的函数，函数的返回值就是属性值

• set(){} 当给name属性赋值时，函数的参数就是赋的值

组件化

1. 组件并不是vue的特色功能

2. 在代码开发当中，将一些小型的、独立的、可复用的功能代码封装起来的一种方式

组件化开发

整个应用从应用的整体到应用的每个功能页面和每一个功能模块全部都采用组件的方式进行开发

基本语法

模板语法

文本绑定

1. {{表达式}}
2. v-html 可以将内容以原生html的方式插入到标签当中
3. v-text 可以将内容以纯文本的方式插入到标签中
4. v-once 表示当前绑定的内容并不需要进行响应式的更新
5. v-pre 会将双花括号识别为普通的html标签内容不会被解析
6. v-cloak 在模板内容被解析之前始终作为一个属性设置在标签上

属性绑定

1. v-bind:属性=“表达式” / :属性=“表达式” 表示当前属性值需要按照js的语法进行解析
2. class的绑定
   • 多个类名 :class=“[‘’,‘’]”
   • 是否存在 :class=“‘a’,{b:show}”
3. style的绑定
   • :style=“{}”
   • :style=“[{},{}]”
4. 组件上进行属性绑定
   • 组件prop绑定 prop值为字符串类型且要绑定的值就是一个字符串本身不是变量 在绑定prop时可以不加：其他情况都需要通过:绑定
   • 组件上绑定普通属性 会直接设置到组件的根元素上，如果绑定的是类名或行内样式，会直接和根元素上的类名和行内样式进行合并
5. 使用v-for 和 v-if 时可以给标签绑定key属性以标识当前元素 key属性在一个列表或一组判断中必须是独一无二的值

列表和判断

条件渲染

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

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

3. 如果有并列的一组元素需要同时控制显示隐藏，可以使用template标签对这些并列元素进行包裹 在最终的渲染结果当中不会有多余的标签产生

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

列表渲染

1. v-for
   • item in arr
   • (item,index) in arr
   • key in obj
   • (key,value,index) in obj
2. 在使用列表渲染时可以通过key属性为每个元素设置唯一标识 提升dom更新时的效率
3. 如果有并列的一组元素需要循环输出，可以使用template标签对这些并列元素进行包裹 在最终的渲染结果当中不会有多余的标签产生
4. 当v-for 和 v-if 同时出现在一个标签上 v-for优先执行

事件绑定

语法

1. v-on:事件类型 @事件类型 this.$on
2. 事件处理程序
   • methods名称 方法() 表达式
3. 事件处理程序中this指向当前的vue实例或组件对象
4. 方法名称的方式绑定 直接从函数的第一个参数接收事件对象 如果是以方法和表达式的方式接收 就通过 $event直接访问事件对象

修饰符

1. .stop 阻止事件流的传播
2. .prevent 阻止浏览器的默认行为
3. .once 绑定一次性事件
4. .self 让当前事件不能由冒泡触发只能从自己身上触发
5. .capture 添加一个捕获型事件流的事件
6. .passive 表示当前事件不需要阻止默认行为

计算属性和侦听器

computed 计算属性

1. 在页面中输出一些需要计算转换才能得到的数据以简化模板的编写
2. 动态的接收来自于组件外部的数据
   • 父组件传递的prop
   • vuex中的state和getter

watch 侦听器

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

表单绑定

1. v-model 可以对于表单或表单组件进行双向数据绑定
2. v-model 只是一个快速双向绑定的语法糖
3. 普通的文本框和文本域 绑定的值为字符串
4. 单个复选框 值为布尔值
5. 单选选项 值为某个选项的value
6. 多选的选项 值为选中的选项的value组成的数组
7. 修饰符
   • lazy 只在失去焦点时才进行值的更新
   • number 将绑定值转换为数值类型
   • trim 自动清除绑定值两边的空格

生命周期函数

1. beforeCreate 创建前 还未对data数据进行处理
2. created 创建后 完成对data中数据的劫持 建立对于数据的监听
3. beforeMonte 渲染前 读取内容模板并没有对其进行解析
4. mounted 渲染后 完成对内容的渲染 渲染后的内容已经进入到内容中
5. beforeUpdate 更新前 数据修改之后 页面更新之前
6. updated 更新后 数据修改之后 页面更新渲染之后
7. beforeDestroy 销毁前 尝试销毁某个实例前才会触发的函数 $destroy
8. destroyed 销毁后 调用方法将实例销毁后触发的函数

补充

1. $ refs 用于获取所有设置了ref属性的标签和组件
2. $ nextTick vue数据变化引起的dom更新是异步执行的 所以如果需要在dom更新之后执行操作就需要将操作放置到$nextTick的回调函数当中
3. $ set/ $ delete
   • $set：向data中属性值为对象的属性添加一个响应式的属性
   • $delete：删除data中属性值为对象的属性的属性并触发响应式的更新
4. Vue.directive/directives 定义自定义指令
5. Vue.mixin/mixins 定义一个混入对象
6. Vue.ues 安装某个插件
7. render函数 以编程的方式进行虚拟节点的创建 render(h){return h(标签名/组件配置对象/异步函数，属性对象，子节点)}
8. Vue.filter/filters 定义一个过滤器 通过管道运算符(|)对输出的值进行过滤运算

组件化

组件的创建

1. Vue.component() 全局注册
2. compoents 局部注册
3. SFC 单文件组件的方式创建

组件名

1. 连字符的方式 驼峰命名法都可以作为注册组件时的组件名称 在页面中必须采用连字符的方式引入 单文件组件中没有限制
2. 组件名称用多个单词 当前组件如果作为vue-router 的页面配置没有限制

组件配置项和实例并没有太大差别

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

2. 组件必须指定template或render函数

3. data选项必须是函数 保证组件复用时相互之间不会影响

prop

组件prop可以用来接收外部传入的属性

1. props配置项可以是一个数组：[“a”,“b”]
2. props配置项可以是一个对象 {a:{type:String},b:{tyoe:[String,Number]},c:{required:true},d:{default:1}}
3. 属性名称可以是驼峰命名法也可以是连字符 但模板传递中传递的时候必须用连字符的方式
4. 单向数据流
   • props是由父组件传递给子组件的 父组件发生修改时，子组件也会跟着修改，子组件不能直接修改父组件传来的属性

$emit

子组件当中通过$emit 广播一个事件 在调用组件时进行监听 在监听函数中可以操作父组件的属性

1. 在表单组件中通过props接收value 通过$emit广播input事件 就可以当前组件上通过v-model进行双向数据绑定
2. 在组件内部通过prop接收了某个属性并通过$emit广播了 update:属性名 这样的事件 在组件上可以使用.sync 简化绑定语法

插槽

定义插槽

1. 默认插槽
2. 具名插槽
3. 作用域插槽
4. 后备内容 后备内容

使用插槽

1. 默认插槽内容传递 在组件标签内写入 普通文本 标签 租价
2. 向指定插槽传递内容