vue事件绑定、事件参数、事件修饰符、表单双向绑定、监听器、计算属性
目录
事件绑定
事件参数
事件修饰符
表单
watch(监听器 监听属性)
computed（计算属性）
面试题
事件机制
概述 在dom阶段，我们已经讲述了事件机制的特点：
事件三要素
事件绑定
事件流
事件对象
事件代理
事件类型 这些概念在vue中依旧存在，但是vue中的事件机制要更加的简单便捷一
事件绑定
可以用 v-on 指令监听DOM 事件，并在触发时运行一些 JavaScript 代码。v-on 还可以接收一个需要调用的方法名称。
methods: { handler: function (event) { if (event) { alert(event.target.tagName) } //event是原生 DOM 事件 } } 除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法，通过$event传递原生事件对象：methods: { say: function (message,event) { alert(message) } } 由于事件绑定在vue中使用概率较大，所以这里提供了简写形式
事件参数
在事件调用时，可以进行参数的传递 :
新增
编辑
删除
进行事件绑定时，可以将v-on:事件名缩写为@事件名，此方式经常使用 :
事件修饰符
事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。Vue提供了更好的方式：事件处理函数只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，通过事件修饰符来完成这些细节。
常见修饰符如下 .stop 停止事件冒泡 .prevent 阻止事件默认行为 .capture 在事件捕获阶段执行事件处理函数 .self 只当在 event.target 是当前元素自身时触发处理函数 .once 事件处理函数执行一次后解绑 .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发 ，一般与scroll连用，能够提升移动端的性能 按键修饰符 一般与keyup事件类型配合使用 .enter、.tab、.delete、.esc、.space、.up、.down、.left、.right .ctrl、.alt、.shift、.meta 鼠标修饰符mouseup事件 .left、.right、.middle
new Vue({
el: "#app",
data: {
msg: '事件修饰符'
},
methods: {
keyupHandle() {
console.log('按下某些特殊键');
},
toJump() {
console.log('跳转');
alert(1);
},
outer(e) {
// e.target是触发事件的源头元素，目标元素
// e.currentTarget 当前执行事件处理程序的元素，当前目标元素
// console.log('outer', e.target, e.currentTarget);
console.log('outer')
for (let i = 0; i < 100; i++) {
console.log(i);
}
},
inner(e) {
// e.stopPropagation();
// console.log('inner', e.target, e.currentTarget);
console.log('inner');
}
}
})
{{msg}}
百度一下
outer
inner
表单
可以用 v-model 指令在表单
、
watch(监听器 监听属性)
当需要在数据变化时执行异步或开销较大的操作时，使用监听器是最有用的
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的 。
{{msg}}
a：
+
b：
=
new Vue({
el: '#app',
data: {
msg: 'hello',
a: 0,
b: 0,
total: 0
},
methods: {},
// 监听 侦听
watch: {
a(newValue, oldValue) {
this.total = this.a + this.b;
},
b(newValue, oldValue) {
this.total = this.b + this.a;
}
}
})
//深度监听
new Vue({
el: '#app',
data: {
msg: 'hello',
a: 1,
obj: {
name: 'zhangsan',
age: 12
},
},
watch: {
a(newValue, oldValue) {
console.log('a数据发生变化...');
},
/* obj(newValue, oldValue) {
console.log('obj数据发生变化...');
} */
// 深度监听
obj: {
handler(newValue, oldValue) {
console.log('obj数据发生变化...');
},
// 深度监听
deep: true
}
},
methods: {
changeObj() {
// 更改内部数据
this.obj.name = 'lisi';
}
}
})
{{msg}}
{{obj}}
computed（计算属性）
计算属性 有依赖关系的数据
我们希望一个变量是经过某种计算然后输出而不是直接输出的时候可以使用到计算属性 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。而每次调用函数都会导致函数的重新执行。
{{msg}}
a：
+
b：
=
{{total}}
new Vue({
el: '#app',
data: {
msg: 'hello',
a: 0,
b: 0,
// total: 0
},
// 计算属性
computed: {
total(){
console.log('计算属性');
// return 111
return this.a+this.b
}
},
methods: {}
})面试题
watch和computed的区别?
computed
1. 具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数
2.计算属性计算某一个属性得变化,如果某一个值改变了，计算属性会见监听到进行返回
watch
1. 监听值的变化，执行异步操作【axios请求】
’$route.query‘:{
this.loadArticle()
}
2. 无缓存性，只有当当前值发生变化时才会执行/响应