Vue事件-下
-
绑定事件:<div v-on:事件名=‘函数名’>
-
实现方法:
methods:{
函数名(){}
}
-
事件对象 event
- 无参数传递 :第一个参数就是event
- 有参数传递 :需要手动传递事件对象
-
事件修饰符
.stop *
.prevent *
.capture
.self
.once
.passive -
按键修饰符
.enter *
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right -
系统修饰键
.ctrl
.alt
.shift
.meta -
鼠标按钮修饰符
.left
.right
.middle
Vue中key属性的作用 (考点)
- 作用:key的作用主要是为了高效的更新虚拟DOM
- 高效的Diff算法
数组更新检测
- 说明:在列表渲染中,如果遍历是数组,当数组数据发生改变时,页面什么时候能自动更新(页面重新渲染)
- 实现数组视图同步更新
-
变更方法 (修改了原数组)
push()
pop()
shift()
unshift()
splice()
sort()
reverse() -
替换数组(修改后返回新的数组 原数据不修改 视图想同步更新 覆盖原数组)
filter()、concat() 和 slice()
-
对象更新检测
- 说明:对象修改后 视图同步更新视图 – 内存:栈内存 堆内存
- 实现对象视图同步更新
-
Vue.set( target, propertyName/index, value )
参数:
{Object | Array} target
{string | number} propertyName/index
{any} value
返回值:设置的值。
用法:
向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi’) -
代码演示
addAttribute(){ // this.obj.love='女' // console.log('obj',this.obj); //问题:vue认为 obj没有修改 //1. ... // this.obj ={...this.obj}; //2. es6: 合并对象 Object.assign({},{},{}) // this.obj=Object.assign({},this.obj) //3. vue官网解决方法: //向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。 // this.$set(this.obj,'love','女') Vue.set(this.obj,'learn','学习') //删除 同步视图 删除对象的 property。如果对象是响应式的,确保删除能触发更新视图。 Vue.delete(this.obj,'age') }
-
Class 与 Style 绑定
-
介绍:动态的添加class或者是style样式
-
绑定 HTML Class
-
直接绑定变量
-
对象语法 ***
-
数组语法
-
-
绑定内联样式
v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名-
对象语法
-
数组语法
- 直接变量 data: { styleObject: { color: 'red', fontSize: '13px' } }
-
tabs切换
代码演示:
表单输入绑定
-
介绍
你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定
通过指令 v-model=‘’ 获取表单输入的信息数据 实现双向数据绑定 -
语法:
data(){
return{
msg:‘’
}
} -
修饰符
.lazy 只有当input失去焦点时才更新数据
.number 把input标签中输入的内容转成数字,调用是parseFloat (Nunber())
.trim 去除左右空格 -
v-model实现原理
v-model只不过是一个语法糖而已,真正的实现靠的还是v-bind:绑定响应式数据
触发oninput 事件并传递数据v-model 是什么。语法糖 :value + @input。还要分为两种情况
$event是事件对象,$event.target.value表示input框中的输入值
计算属性和侦听器
-
计算属性
- 介绍: 处理数据后把数据缓存起来 使用数据的时候使用的缓存的数据,但是如果原数据修改了 重新计算
- 语法
computed:{
msg2(){
console.log(‘计算属性: 对数据进行加工处理 缓存数据’);
return this.msg.split(‘’).reverse().join(‘’);
}
} - 使用计算属性
- 直接获取名字 不加()
- {{ msg2 }}
-
侦听器
- 介绍: Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化
- 语法:
- computed和watch区别 (考点)
- 相同:computed和watch都是观察页面的数据变化的。
- 不同:
computed:是计算属性,依赖其它属性值:
1. 支持缓存,只有依赖数据发生改变,才会重新进行计算
2. 不支持异步,当computed内有异步操作时无效,无法监听数据的变化
watch:没有缓存性,更多的是「观察」的作用,类似于某些数据的监听回调 ,每当监听的数据变化时都会执行回调进行后续操作;
1. 不支持缓存,数据变,直接会触发相应的操作;
2. watch支持异步;