vue事件处理机制,vue事件写法
本文主要详细介绍Vue事件的基本操作。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
:
目录
1.事件的基本操作1.1v-on1.1.1v-on小型情况1.2事件修饰符1.2.1事件修饰符代码分析1.3键盘事件1.4计算属性1.5监视器属性1.5.1手表和计算之间的差异摘要
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 } }
！-v-on: XXX可以缩写为：@ XXX-
按钮v-on:Click= Bt n1 Click me to learn(无参考)/按钮
button @click=btn2(你好！同学、$event)点击我学习(传参考)
//如果需要传参数，后面加()就行了，参数都写在里面了。
/div
脚本
/*
回调需要写在方法对象中，并且最终会在vm上。
方法中配置的功能不使用箭头功能。
方法中配置的函数，指向vm或组件实例化对象。
*/
Vue.config.productionTip=false
var vm=new Vue({
el: #root ，
数据：{
名称：“清华大学”
},
方法：{
btn1() {
警觉(你好，同学！)
},
btn2(x，y，event) {
console.log(x，y)；
console . log(event . target . innertext)；
警觉(你好，同学！)
}
}
})
/脚本
1.2 事件修饰符
Vue中有六个事件修饰符-prevent:防止默认行为-stop:禁止冒泡-once:事件只触发一次-capture:使用事件捕获模式-self:只有even.target指向的操作元素才能触发事件-passive:让事件的默认行为立即执行体
div id=root
！- 1.防止：防止默认行为-
a href= 3359 www.bilibili.com/@ Click . prevent= prevent 单击我进入哔哩哔哩/a
整点
！- 2.停止：不要冒泡-
div @click=stop class=div1
Button @click.stop=stop 单击我以触发事件/按钮
/div
整点
！- 3.一次：事件只触发一次-
我只能触发一次/button
整点
！- 4.捕获：使用事件捕获模式-
div class= box 1 @ click . capture= capture(1)
div1
div class= box 2 @ click= capture(2)
div2
/div
/div
整点
！-5.self:只有even.target指向的操作元素才能触发事件。
相当于满足两个条件。
-1.event.target必须指向self修饰的元素。
-2.触发器也必须是这个元素
从某种意义上说，它相当于禁止冒泡，因为冒泡会触发上述事件。
但是event.target没有指向这个元素。
-
div class= box 3 @ click . self= self
Button @click=self 单击我/button
/div
整点
！- 6.passive:让事件的默认行为立即执行。
Scroll:表示滚动条滚动时，滚动条变化时会触发，滑到底部后就不能触发了。
滚轮：是指鼠标滚轮滚动，滚动一次就触发一次，滑动到底还是可以触发的。
-
ul style= overflow:auto；高度：100像素；@scroll.passive=passive
李style= height:600 px；/李
/ul
！-7.如果你想使用多个修饰符，你可以使用链式形式-
！-你需要停止冒泡，禁止默认行为-
div @click=stop class=div1
a @ Click . stop . prevent= stop href= 3359 www . Baidu . com 点击我进入/a
/div
/div
1.2.1 事件修饰符代码解析
html代码
身体
div id=root
！- 1.防止：防止默认行为-
a href= 3359 www.bilibili.com/@ Click . prevent= prevent 单击我进入哔哩哔哩/a
整点
！- 2.停止：不要冒泡-
div @click=stop class=div1
Button @click.stop=stop 单击我以触发事件/按钮
/div
整点
！- 3.一次：事件只触发一次-
我只能触发一次/button
整点
！- 4.捕获：使用事件捕获模式-
div class= box 1 @ click . capture= capture(1)
div1
div class= box 2 @ click= capture(2)
div2
/div
/div
整点
！-5.self:只有even.target指向的操作元素才能触发事件。
相当于满足两个条件。
-1.event.target必须指向self修饰的元素。
-2.触发器也必须是这个元素
从某种意义上说，它相当于禁止冒泡，因为冒泡会触发上述事件。
但是event.target没有指向这个元素。
-
div class= box 3 @ click . self= self
Button @click=self 单击我/button
/div
整点
！- 6.passive:让事件的默认行为立即执行。
Scroll:表示滚动条滚动时，滚动条变化时会触发，滑到底部后就不能触发了。
滚轮：是指鼠标滚轮滚动，滚动一次就触发一次，滑动到底还是可以触发的。
-
ul style= overflow:auto；高度：100像素；@scroll.passive=passive
李style= height:600 px；/李
/ul
！-7.如果你想使用多个修饰符，你可以使用链式形式-
！-你需要停止冒泡，禁止默认行为-
div @click=stop class=div1
a @ Click . stop . prevent= stop href= 3359 www . Baidu . com 点击我进入/a
/div
/div
js代码
脚本
Vue.config.productionTip=false
新Vue({
el: #root ，
数据：{
},
方法：{
防止(){
Alert(“禁止默认行为”)；
},
stop(){
警报(“无冒泡”)
},
once(){
警报(“它只能被触发一次”)
},
捕获(x){
Alert(现在是捕获模式 x)
},
自我()
{
警报(“自我”)
},
被动(){
for(设索引=0；指数1000；索引){
console.log(1 )
}
}
}
})
/脚本
/body
1.3 键盘事件
以下项目的常用密钥别名：
1.正常使用
示例：@keyup.enter=xxx
回车回车。
-删除删除
-退出esc
-空间空间
-上去
-趴下
-左左
-对对
2.特殊键
系统修改键：
-ctrl、shift、alt、meta(即窗口键)
-换行标签(必须与keydown一起使用)
-与keyup一起使用，当修饰键被按下时，另一个键被按下，然后在事件可以被触发之前释放另一个键。
-当与keydown一起使用时，事件将被直接触发。
3.如果要绑定其他键，可以使用该键的原始键值(名称)进行绑定。
4.您可以自定义设置密钥别名Vue.config.keyCodes自定义密钥名称=密钥值
具体案例
div id=root
H1欢迎学习{{name}}/h1
输入类型=text @keyup=keyboard
芭芭拉
input type= text @ keyup . huiche= keyboard
芭芭拉
input type= text @ keyup . ctrl . y= keyboard
/div
脚本
Vue.config.productionTip=false
vue . config . key codes . huiche=13//定义了别名。
var vm=new Vue({
el: #root ，
数据：{
名称：“Vue”
},
方法：
{
键盘(事件){
//console . log(event . key code)；关键编码
//console . log(event . key)；密钥的名称
console . log(event . target . value)；
}
}
})
/脚本
1.4 计算属性（computed）
1.如何在页面中使用：=={ {方法名}}==显示计算结果。
2.定义：要使用的属性/变量不存在，需要通过现有属性计算。
3.原理：底层是Object.defineProperty方法提供的getter和setter。
4.4.get函数执行的时间：
(1)它将在第一次读取时执行一次。
(2)当依赖数据发生变化时，将再次被调用
5.相比方法的优点，里面有缓存机制(复用)，会更高效，调试更方便。
6.如果要修改计算属性，必须编写集合函数来响应修改，计算所依赖的数据在集合中也会发生变化。
7.特别要注意的一点：以下面的例子为例：get函数的返回值将作为fullname的值返回，在控制台中可以看到fullname：xxx以这种形式呈现。
8.这在8.computed中指向vm
9.缩写形式：基本要求是不用set就可以缩写。请注意，调用时不要写fullname()。
div id=root
姓氏：输入类型= text v-model= firstname
芭芭拉
名称：输入类型= text v-model=姓氏
！-第一种书写方法使用插值语法-
！- h3全名：{ {名字. slice (0，3)} }-{ {姓氏}}/H3-
！第二种写作方式使用方法
！- h3全名：{ {全名()}}/H3-
！-第三种写法使用computed(计算属性)-
H3:{ {全名}}/h3
/div
脚本
Vue.config.productionTip=false
让vm=new Vue({
el: #root ，
数据：{//属性
名字：张，
姓氏：三，
},
//方法：
//{
//fullname() {
////这里指向vm
//返回this.firstname.slice(0，3) - this.lastname
//}
//}
计算值：{
全名：{
/*
1.Vue已被配置为将其指向虚拟机。
2.有人读fullname的时候会调用get，但是get只执行一次，因为Vue做了一件事，就是缓存。当它被执行一次后，如果数据被读取，它将走缓存的道路。
3.return的返回值会作为fullname的值，fullname也会被抛出给vm。
(全名：“张三”)
*/
get() {
返回this.firstname - this.lastname
},
设置(值){
//只有在修改fullname时才会调用set。
Var arr=value.split(-) //根据指定的字符串拆分为数组
this.firstname=arr[0]
this .姓氏=arr[1]
}
/*
缩写形式：基本要求是不用set就可以缩写。
调用时注意不要写fullname()。这很特别。
计算值：{
Fullname(){ //相当于全名：function () {}
返回this.firstname - this.lastname
}
}
*/
}
}
})
/脚本
1.5 监视属性（watch）
1.当被监控的属性发生变化时，自动调用回调函数执行相关操作。
2.监控属性必须存在才能被监控。
3.监视属性的两种写法：
(1)在新的Vue中配置手表。
(2)通过虚拟机进行监控。$手表
4.4.watch中的处理函数指向vm
div id=root
H1今天真的很{ { weather } }
按钮@click=change 切换天气/按钮
h3的值为：{{a}}/h3。
！-你可以在里面写简单的代码-
按钮@click=a Click我让一个1/按钮
/div
脚本
Vue.config.productionTip=false
让vm=new Vue({
el: #root ，
数据：{
标志：正确
},
计算值：{
天气(){
把这个还回去。旗子？酷:热
}
},
方法：{
更改(){
返回this.flag=！这个. flag
}
},
观察：{
标志：{
//第一个参数表示修改后的值，第二个参数表示修改前的值。
处理程序(新值，旧值){
Console.log(标志已修改)；
},
Immediate:true，//一上来就执行一次。
Deep:true //表示深度监控
}
}
})
vm。$watch(天气，{
即时：真的，
处理程序(新值，旧值){
Console.log(“天气已被修改”)
}
})
1.5.1 watch和computed的区别
watch和computed的区别是：
1.computed不一定能完成watch能完成的功能，但是computed能做到的，Watch也能做到。
2.computed依赖于return的返回值(getter)，所以不能完成异步任务，而watch可以
3 .手表是通过自己写代码修改的。
4.在学Vue当中有两个很重要的原则：
vue管理的所有函数都要写成普通函数，因为这是vue或者组件的实例化对象。所有不被Vue管理的函数都要写成箭头函数(Ajax的回调函数，timer的回调函数，Promise的回调函数)，因为这是Vue或者组件div id=root 的实例化对象
！-用手表写名字的大小写-
姓氏：输入类型= text v-model= firstname
芭芭拉
名称：输入类型= text v-model=姓氏
H2全名：{ {全名}}/h2
/div
脚本
//要求：希望1s后显示全名。
Vue.config.productionTip=false
让vm=new Vue({
el: #root ，
数据：{
名字：张，
姓氏：三，
全名：“张三”
},
观察：{
名字：{
处理程序(新值){
console . log(this)；//虚拟机
/*
这里使用arrow函数的目的是让这一点指向vue。
在这个时候，没有这个，所以他看着外面，这个外面的处理程序。
它指向虚拟机，所以这个定时器也指向虚拟机。
*/
SetTimeout(()={//这里如果用的是普通函数this，它指向的是窗口。
console . log(this)；//虚拟机
this . full name=new val - this . last name
}, 1000);
}
},
姓氏：{
处理程序(新值){
setTimeout(()={
this . full name=this . first name - new val
}, 1000);
}
}
}
})
/脚本
总结
这就是我们今天要讲的内容。本文只介绍Vue的一些基本事件的操作，希望对大家有帮助！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。