Vue事件的基本操作你知道吗
作者：Tree_wws
这篇文章主要为大家详细介绍了Vue事件的基本操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
1. 事件的基本操作
1.1 v-on
功能：绑定指定事件名的回调函数
标准写法： v-on:click='xxx' v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx' 简便写法： @click='xxx' @keyup='xxx' @keyup.enter='xxx'
1.1.1 v-on的小案例
<div id="root">
<!-- 需求当点击按钮时弹出同学你好！ -->
<h1>欢迎来到{{name}}学习</h1>
<!-- v-on:xxx可以简写为： @xxx -->
<button v-on:click="btn1">点击我进行学习（不传参）</button>
<button @click="btn2('hello!','同学',$event)">点击我进行学习（传参）
//如果需要传参数的话就在后面加（），里面写的就参数
</div>
<script>
/*
事件回调需要写在methods对象中，最终会在vm上
methods中配置的函数，不要使用箭头函数
methods中配置的函数，this指向vm或者是组件实例化对象
*/
Vue.config.productionTip = false
var vm = new Vue({
el: '#root',
data: {
name: "清华大学"
},
methods: {
btn1() {
alert("同学你好！")
},
btn2(x, y, event) {
console.log(x, y);
console.log(event.target.innerText);
alert("同学你好！")
}
}
})
</script>
1.2 事件修饰符
Vue中的事件修饰符有6个 - prevent : 阻止默认行为 - stop : 禁止冒泡 - once : 事件只触发一次 - capture : 使用事件捕获模式 - self : 只有even.target所指向的操作元素才能触发事件 - passive : 让事件的默认行为立即执行<body>
<div id="root">
<!-- 1. prevent : 阻止默认行为 -->
<a href="https://www.bilibili.com/" @click.prevent = "prevent">点击我进入b站</a>
<hr>
<!-- 2. stop : 禁止冒泡 -->
<div @click = "stop" class="div1">
<button @click.stop = "stop">点击我触发事件</button>
</div>
<hr>
<!-- 3. once : 事件只触发一次 -->
<button @click.once = "once">我只能触发一次哦</button>
<hr>
<!-- 4. capture : 使用事件捕获模式 -->
<div class="box1" @click.capture = "capture(1)">
div1
<div class="box2" @click = "capture(2)">
div2
</div>
</div>
<hr>
<!-- 5. self : 只有even.target所指向的操作元素才能触发事件
相当于要满足两个条件
- 1. event.target必须指向self所修饰的元素
- 2. 触发的也必须是这个元素
从某种意义上相当于禁止了冒泡，因为冒泡虽然触发上面事件
但是event.target所指向的并非是这个元素
-->
<div class="box3" @click.self = "self">
<button @click = "self">点击我</button>
</div>
<hr>
<!-- 6. passive : 让事件的默认行为立即执行
scroll:表示的是滚动条进行滚动，滚动条改变就触发，并且滑到底就不能继续触发
wheel :表示的是鼠标滚轮滚动,滚动一次就触发一次，滑到底依旧可以触发
-->
<ul style="overflow: auto; height: 100px;" @scroll.passive = "passive">
<li style="height: 600px;"></li>
</ul>
<!-- 7. 如果想要使用多个修饰符可以使用链式形式 -->
<!-- 需要即想要阻止冒泡，也想要禁止默认行为 -->
<div @click = "stop" class="div1">
<a @click.stop.prevent = "stop" href="https://www.baidu.com">点击我进入</a>
</div>
</div>
1.2.1 事件修饰符代码解析
html代码
<body>
<div id="root">
<!-- 1. prevent : 阻止默认行为 -->
<a href="https://www.bilibili.com/" @click.prevent = "prevent">点击我进入b站</a>
<hr>
<!-- 2. stop : 禁止冒泡 -->
<div @click = "stop" class="div1">
<button @click.stop = "stop">点击我触发事件</button>
</div>
<hr>
<!-- 3. once : 事件只触发一次 -->
<button @click.once = "once">我只能触发一次哦</button>
<hr>
<!-- 4. capture : 使用事件捕获模式 -->
<div class="box1" @click.capture = "capture(1)">
div1
<div class="box2" @click = "capture(2)">
div2
</div>
</div>
<hr>
<!-- 5. self : 只有even.target所指向的操作元素才能触发事件
相当于要满足两个条件
- 1. event.target必须指向self所修饰的元素
- 2. 触发的也必须是这个元素
从某种意义上相当于禁止了冒泡，因为冒泡虽然触发上面事件
但是event.target所指向的并非是这个元素
-->
<div class="box3" @click.self = "self">
<button @click = "self">点击我</button>
</div>
<hr>
<!-- 6. passive : 让事件的默认行为立即执行
scroll:表示的是滚动条进行滚动，滚动条改变就触发，并且滑到底就不能继续触发
wheel :表示的是鼠标滚轮滚动,滚动一次就触发一次，滑到底依旧可以触发
-->
<ul style="overflow: auto; height: 100px;" @scroll.passive = "passive">
<li style="height: 600px;"></li>
</ul>
<!-- 7. 如果想要使用多个修饰符可以使用链式形式 -->
<!-- 需要即想要阻止冒泡，也想要禁止默认行为 -->
<div @click = "stop" class="div1">
<a @click.stop.prevent = "stop" href="https://www.baidu.com">点击我进入</a>
</div>
</div>
js代码
<script>
Vue.config.productionTip = false
new Vue({
el: '#root',
data: {
},
methods:{
prevent(){
alert("禁止默认行为");
},
stop(){
alert("禁止冒泡")
},
once(){
alert("只能触发一次")
},
capture(x){
alert("现在是捕获模式 "+x)
},
self()
{
alert("self")
},
passive(){
for (let index = 0; index < 1000; index++) {
console.log("1")
}
}
}
})
</script>
</body>
1.3 键盘事件
常用的按键别名：
1.正常使用
例如： @keyup.enter = "xxx"
- 回车 enter
- 删除 delete
- 退出 esc
- 空格 space
- 上 up
- 下 down
- 左 left
- 右 right
2. 特别的按键
系统修饰键 :
- ctrl,shift,alt,meta(就是window键)
- 换行 tab(必须配合keydown去使用)
- 配合keyup使用，当按下修饰键的时候在按下其他的键，然后在松开其他键事件才可以被触发
- 配合keydown使用，就直接触发事件
3.如果想要绑定其他按键，可以使用按键原始本身的key值（名字）去绑定
4.可以自定义去设置按键别名，Vue.config.keyCodes.自定义键名 = 键值
具体案例
<div id="root">
<h1>欢迎学习{{name}}</h1>
<input type="text" @keyup="keyboard">
<br><br>
<input type="text" @keyup.huiche="keyboard">
<br><br>
<input type="text" @keyup.ctrl.y="keyboard">
</div>
<script>
Vue.config.productionTip = false
Vue.config.keyCodes.huiche = 13 //定义了一个别名
var vm = new Vue({
el: '#root',
data: {
name: "Vue"
},
methods:
{
keyboard(event){
// console.log(event.keyCode); 按键编码
// console.log(event.key); 按键的名字
console.log(event.target.value);
}
}
})
</script>
1.4 计算属性（computed）
1.在页面中的使用方法：=={{方法名}}==来显示计算结果
2.定义：要使用的属性/变量不存在，需要通过已有的属性计算出来的
3.原理：底层是借助了Object.defineProperty方法所提供的getter和setter
4.get函数执行的时机：
（1）初次读取的时候会执行一次
（2）当所依赖的数据发生改变时就会再次被调用
5.相比于methods的优势，内部是有缓存机制（复用），效率会更高，调试会更方便
6.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
7.需要注意的一个特殊点：以下面例子举例：get函数中return返回值的会作为fullname的值进行返回，在控制台可以看到是这样的形式呈现fullname：xxx。
8.computed中的this指向是vm
9.简写形式: 基本要求就是在不使用set的情况下才可以简写 注意在调用的时候不要写成fullname()
<div id="root">
姓: <input type="text" v-model="firstname">
<br><br>
名: <input type="text" v-model="lastname">
<!-- 第一种写法 使用插值语法 -->
<!-- <h3>全名: {{firstname.slice(0,3)}} - {{lastname}}</h3> -->
<!-- 第二种写法 使用methods -->
<!-- <h3>全名: {{fullname()}}</h3> -->
<!-- 第三种写法 使用computed（计算属性） -->
<h3>全名:{{fullname}}</h3>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: { //属性
firstname: "张",
lastname: "三",
},
// methods:
// {
// fullname() {
// // 这里的this指向是vm
// return this.firstname.slice(0,3) + "-" + this.lastname
// }
// }
computed: {
fullname: {
/*
1. Vue已经进行配置过了将this指向vm
2. 当用人去读取fullname时，get就会被调用，但是get只被执行一次因为Vue做 了一个事，就是缓存，当执行过一次后，后面数据再去读取会走缓存这条路。
3. return 的返回值会作为fullname的值，将fullname也抛到vm
（fullname:"张-三"）
*/
get() {
return this.firstname + "-" + this.lastname
},
set(value) {
// 当fullname被修改时，set才会被调用
var arr = value.split("-") //按照指定字符串进行拆分成数组
this.firstname = arr[0]
this.lastname = arr[1]
}
/*
简写形式: 基本要求就是在不使用set的情况下才可以简写
注意在调用的时候不要写成fullname(),这个很特殊
computed:{
fullname(){ //相当于fullname：function(){}
return this.firstname + "-" + this.lastname
}
}
*/
}
}
})
</script>
1.5 监视属性（watch）
1.当所监视的属性发生变化时，回调函数自动调用，进行相关的操作
2.监视属性必须要存在，才能进行监视
3.监视属性的两种写法：
（1）在new Vue中配置watch
（2）通过vm.$watch进行监视
4.watch里handler函数this的指向是vm
<div id="root">
<h1>今天天气真{{weather}}</h1>
<button @click="change">切换天气</button>
<h3>a的值是: {{a}}</h3>
<!-- 在这里面可以写简单的代码 -->
<button @click = "a++">点击我让a+1</button>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
flag: true
},
computed: {
weather() {
return this.flag ? "凉快" : "炎热"
}
},
methods: {
change() {
return this.flag = !this.flag
}
},
watch:{
flag:{
// 第一个参数表示：修改后的值，第二个参数表示修改前的值
handler(newValue,oldValue){
console.log("flag被修改了");
},
immediate:true, //在一上来就执行一次
deep:true //表示深层次监视
}
}
})
vm.$watch("weather",{
immediate:true,
handler(newValue,oldValue){
console.log("weather被修改了")
}
})
1.5.1 watch和computed的区别
watch和computed的区别是：
1.watch能够完成的功能，computed不一定可以完成，但是computed可以完成的，watch也可以完成
2.computed是依靠return的返回值（getter），所以它不能够完成异步的任务,而watch可以
3.watch是靠我们自己写代码进行修改
4.在学Vue当中有两个很重要的原则：
- 所有被Vue管理的函数，最好写成普通的函数，因为这样this的指向才是vue或者组件的实例化对象
- 所有不被Vue管理的函数，最好写成箭头函数（Ajax的回调函数，定时器的回调函数，Promise的回调函数），因为这样this的指向才是vue或者组件的实例化对象
<div id="root">
<!-- 用watch写一遍姓名的案例 -->
姓: <input type="text" v-model="firstname">
<br><br>
名: <input type="text" v-model="lastname">
<h2>全名: {{fullname}}</h2>
</div>
<script >
// 需求：想要1s过后在显示全名
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
firstname: "张",
lastname: "三",
fullname: "张 - 三"
},
watch: {
firstname: {
handler(newval) {
console.log(this); //vm
/*
这里使用箭头函数的目的就是为了让this指向vue
此时没有this所以他就向外面找，外面handler的this
指向是vm所以定时器的this指向也是vm
*/
setTimeout(() => { //这里如果使用普通函数this就指向window
console.log(this); //vm
this.fullname = newval + " - " + this.lastname
}, 1000);
}
},
lastname: {
handler(newval) {
setTimeout(() => {
this.fullname = this.firstname + " - " + newval
}, 1000);
}
}
}
})
</script>
总结
以上就是今天要讲的内容，本文仅仅介绍了Vue一些基本事件的操作，希望对大家有帮助！