做企业规划的网站,wordpress删除所有文章,广州网站建设教程,北京市政建设集团有限公司一、定义事件
Vue 元素的事件处理和 DOM 元素的很相似#xff0c;但是有一点语法上的不同
使用修饰符#xff08;v-on:的缩写#xff09;事件名的方式 给dom添加事件后面跟方法名#xff0c;方法名可以直接加括号如clickadd()里面进行传参。对应的事件处理函…一、定义事件
Vue 元素的事件处理和 DOM 元素的很相似但是有一点语法上的不同
使用修饰符v-on:的缩写事件名的方式 给dom添加事件后面跟方法名方法名可以直接加括号如clickadd()里面进行传参。对应的事件处理函数必须在 methods对象中定义。
templatediv!-- 在button上定义点击事件 --button clickhello(传入的参数)你好/button/div
/template
script
export default {/*** methods 在vue定义 方法的属性对象* 所有的方法都必须在methods里面定义*/methods: {hello (msg) {console.log(事件触发啦哈哈哈)console.log(msg)}}
}/script
二、事件修饰符
为了更好地处理事件Vue3提供了一些便利的事件修饰符。事件修饰符可以用于改变默认事件行为、限制事件触发条件等如.stop、.prevent、.capture、.self、.once等等。下面是一些常用的事件修饰符用法
1、.stop
阻止事件冒泡即停止事件在父元素中的传播。
templatediv classbox clickhandle2div classbox2 clickhandle/div/div
/templatescript
export default {methods: {handle () {console.log(触发)},handle2 () {console.log(冒泡)}}
}/script
2、.prevent
阻止事件的默认行为如提交表单或点击链接后的页面跳转。
template!-- 只触发点击事件不触发跳转 --a hrefhttps://www.baidu.com click.preventhandle百度/a
/templatescript
export default {methods: {handle() {console.log(触发);}},
};
/script
3、.once
只触发一次事件处理方法之后解绑事件
templatebutton click.oncehandle点击一次就失效/button
/templatescript
export default {methods: {handle() {console.log(触发);},},
};
/script
三、event对象
1、默认传入获取event
template!-- 如果事件什么都不传、并且不写()那么事件处理函数会默认接收到event对象--button clickhandle点击/button
/templatescript
export default {methods: {handle(event) {console.log(event);},},
};
/script
2、携带其他参数获取event
template!-- 使用在template里面使用$event获取当前事件的event对象--button clickhandle(第一个参数, $event)点击/button
/templatescript
export default {methods: {handle(msg, event) {console.log(event);},},
};
/script
四、在函数内使用this获取当前Vue上下文
可以直接使用this.xx 使用data里定义的状态或者使用this.xx()调用methods里面定义的其他函数
注意this指向问题
templatebutton clickhandle点击/button
/templatescript
export default {data() {return {num: 1,};},methods: {handle() {console.log(this.num);this.handle2()},handle2() {console.log(第二个方法);},},
};
/script
