Vue核心
一、事件处理
-
事件基本使用:绑定事件
@click="add"
,methods中的函数必须用普通函数(不能用箭头函数),否则对象就会由vm变为window不传参数时,默认event值,传参之后会覆盖event,想要调用需写上参数$event
-
事件修饰符:
- prevent:阻止默认事件(常用)
- stop:阻止事件冒泡(常用)
- once:事件只触发一次(常用)
- capture:使用事件的捕获形式
- self:只有
event.target
是当前操作的元素时才触发事件 - passive:事件的默认行为立即执行,无需等待事件回调执行完毕
注意:修饰符可以连续写,比如
@click.once.stop
-
键盘事件:
@keyup.enter
-
Vue中常用的按键别名:
回车:enter
删除:delete(捕获“删除”和"退格"键)
退出:
esc
空格:space
换行:tab(必须配合
keydown
)上下左右:up down left right
-
Vue中未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
-
系统修饰键(用法特殊):ctrl、alt、shift、meta(win键)
(1)配合
keyup
使用:按下修饰键的同时,再按下其他键,随后释放其它键,事件才被触发(如果要ctrl y 触发,则@keyup.ctrl.y
)(2)配合
keydown
使用:正常触发事件 -
使用
keyCode
去指定具体的按键(不推荐) -
Vue.config.keyCodes.自定义键名 = 键码
,可以去定制按键别名
-
二、 计算属性与侦听属性
-
计算属性computed
computed:{ fullName: { //get什么时候调用?1.初次读取fullName时 2.所依赖的数据发生变化时 get(){ return this.firstName + '-' + this.lastName }, //set在被修改时调用 set(value){ const arr = value.split('-') this.firstName = arr[0] this.lastName =arr[1] } } }
- 定义:要用的属性不存在,要通过已有的属性计算得来
- 原理:底层借助了
Object.defineproperty
方法提供了getter
和setter
- get函数什么时候执行?1.初次读取
fullName
时 2.所依赖的数据发生变化时 - 优势:与methods相比,内部有缓存机制(复用),效率更高,调试方便
- 备注:
- 计算属性最终会出现在vm身上,直接读取即可
- 如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变
如果确定只读不改,可以简写为
fullName:function(){return this.firstName + '-' + this.lastName}
,但是调用时注意还是写出{{fullName}},不能写成函数!
-
监视属性watch
- 当监视的属性发生变化时,回调函数handler自动调用,进行相关操作
- 监视的属性必须存在,才能进行监视
- 监视的两种写法:传入watch配置;vm.$watch()
深度监视:
(1)vue中的watch默认不监测对象内部值的改变(一层)
(2)配置
deep:true
可以监测对象内部值改变(多层)备注:
(1)vue自身可以监测对象内布值的改变,但Vue提供的watch默认不可以
(2)使用watch的时候根据数据的具体结构,决定是否采用深度监视
-
computed和watch的区别:
-
computed能完成的功能,watch都可以完成
-
watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作
两个重要的小原则:
-
所被Vue管理的函数,最好写出普通函数,这样this的指向才是vm或组件实例
-
所有不被Vue所管理的函数(定时器的回调函数,ajax的回调函数),最好写出箭头函数,这样this的指向才是vm或组件实例对象
-
##三、class与style绑定
-
绑定样式:
-
class样式:
写法:
:class='xxx'
xxx可以是字符串、对象、数组字符串写法适用于:类名不确定,要动态获取。
对象写法适用于:要绑定多个样式,个数不确定,名字也不确定
数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用
-
style样式:
:style="{fontSize:xxx + 'px'}"
,其中xxx是动态值:style="[a,b]"
,其中a,b是样式对象
-
三、 条件渲染
-
v-if
写法:(1) v-if=“表达式” (2)v-else-if=“表达式” (3) v-else=“表达式”
适用于:切换频率比较低的场景
特点:不展示的DOM元素直接被移除
注意:v-if可以和v-else-if、v-else一起使用,但要求结构不能被打断
v-if可以和标签一起使用,使结构模板化
-
v-show
写法:v-show=“表达式”
适用于:切换频率比较高的场景
-
备注:使用v-if时,元素可能无法获取到,而使用v-show一定可以获取到
四、列表渲染
-
使用
v-for
指令:- 用于展示列表数据
- 语法:v-for=“(item,index) in xx” :key=“yyy”(key是唯一的)
- 可遍历数组、对象、字符串(用的很少)、指定次数(用的很少)
-
key的内部原理(r面试题:eact、vue中的key有什么作用?)
1.虚拟DOM中key的作用:
key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:
2.对比规则:
(1)旧虚拟DOM中找到了与新虚拟DOM相同的key:
① 若虚拟DOM中内容没变,直接使用之前的真实DOM
② 若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM
(2)旧虚拟DMOM中未找到与新的虚拟DOM相同的key
创建新的真实DOM,随后渲染到页面
3.用index作为key可能会引发的问题:
1. 若对数据进行逆序添加、删除等破坏性顺序操作:会产生没有必要的真实DOM更新=>界面效果没问题,效率低 2. 如果结构中还包含输入类的DOM,会产生错误DOM更新=>界面有问题
4.开发中如何选择key?
- 最好使用每条数据的唯一标识作为key,比如id,手机号,身份证号,学号等唯一值
- 如果不存在对数据的逆序添加、删除等破坏顺序操作,仅用于渲染列表展示,用index作为key是没问题的
五、 监测数据
Vue监视数据原理:
-
vue会监视data中所有层次的数据
-
如何测试对象中的数据?
通过setter实现监控,且要在new vue时就要传入要监测的数据。
(1)对象中后追加的属性,Vue默认不做响应式处理
(2)如需给后添加的属性做响应式,请使用如下API:
Vue.set(target,propertyName/index,value) or
vm.$set(target,propertyName/index,value)
-
如何监测数组中的数据?
通过包裹数组更新元素的方法实现,本质上就是做了两件事:
(1)调用了原生对应的方法对数组进行更新
(2)重新解析模板,进而更新页面
-
在Vue中修改数组中的某个元素一定要用如下方法:
- 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
- Vue.set() or vm.$set()
特别注意:Vue.set()和vm.$set() 不能给vm或vm的根数据对象(data)添加属性
六、 收集表单元素
若:<input type="text"/>
,则v-model收集的是value的值,用户输入的就是value的值
若:<input type="radio"/>
,则v-model收集的是value值,且要给标签配置value值
若:<input type="checkbox"/>
-
没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)
-
配置input的value属性:
(1)v-model的初始值是非数组,那么收集的就是value组成的数组
(2)v-model的初始值是数组,那么收集的就是check(勾选 or 未勾选,是布偶值)
v-model的三个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效数字
tirm:输入首位空格过滤
七、 过滤器
- 定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
- 语法:
- 注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}
- 使用过滤器:{{ xxx | 过滤器名}} 或v-bind:属性 = “xxx | 过滤器名”
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原来的数据,而是产生新的对应的数据
八、内置指令
- v-text({{}})
- v-html:向指定节点中渲染包含html结构内容(有安全性问题,容易遭xss攻击,cookie)
- v-cloak指令(没有值):
- 本质上是一个特殊属性,Vue实例出啊关键完毕并接管容器后,会删掉v-cloak属性
- 使用css属性配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
- v-once指令:在初次动态渲染后就视为静态内容,以后数据改变不会引起v-once所在结构的更新,可以用于优化性能
- v-pre指令:跳过其节点的编译过程(不解析),可以利用它跳过没有使用指令语法和插值语法的节点加快编译
九、 自定义指令
-
定义语法:
(1)局部指令:new Vue({
directives:{
指令名:配置对象
}
or
directives(element,binding){
}
})
(2)全局指令:Vue.directive(指令名,配置对象) or Vue.directive(指令名,回调函数)
-
配置对象中常用的三个回调
(1)bind():指令和元素成功绑定时调用
(2)inserted():指令所在元素被插入页面时调用
(3)update():指令所在模板结构被重新解析时调用
1.指令定义时不加v-,但使用时要加v-
2.指令名如果是多个单词,要使用kebab-case命名方式,不要用calmCase命名
十、生命周期
具体可查看生命周期图示
- 别名:生命周期回调函数,生命周期函数,生命周期钩子
- 是什么?Vue在关键时刻帮我们调用的一些特殊名称的函数
- 生命周期函数的名称不可更改,使函数的具体内容使程序员根据需求编写的
- 生命周期函数中this的指向是vm 或 组件实例对象
常用的生命周期钩子:
- mounted: 发送ajax请求,启动定时器,绑定自定义事件,订阅消息等(初始化操作)
- beforedestroy: 清除定时器,解绑自定义事件,取消订阅消息等(首尾工作)
关于销毁Vue实例:
- 销毁后借助Vue开发者工具看不到任何信息
- 销毁后自定义事件会失效,但原生DOM事件依然有效
- 一般不会再beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了