vuejs 追加html,vue.js中如何绑定事件？

vue.js中如何绑定事件？下面本篇文章给大家介绍一下vuejs中的事件绑定。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

vuejs中的事件绑定，使用来完成的，这里函数名是定义在Vue实例中的methods对象中的，Vue实例可以直接访问其中的方法。

事件绑定方式

1、 直接在标签中写js方法执行方法的第一种写法

2、调用method的办法执行方法的第一种写法

执行方法的 简写 写法export default {

data () {

return {

msg: '你好vue',

list:[]

}

},

methods:{

run:function(){

alert('这是一个方法');

}

}

}

(1)方法传参，方法直接在调用时在方法内传入参数执行方法传值111

执行方法传值2222

(2)传入事件对象事件对象eventFn(e){

console.log(e);

// e.srcElement dom节点

e.srcElement.style.background='red';

console.log(e.srcElement.dataset.aid); /*获取自定义属性的值*/

}

事件修饰符

1、stop //阻止事件继续传播 即阻止它的捕获和冒泡过程方法一： @click='show($event)' 我们有了事件对象后，我们函数中是不是就可以利用原生中的e.cancelBubble=true；

方法二： @click.stop='show()' 只要在事件后面加 .stop 就可以阻止事件冒泡

举个例子：

实例：如下点击内部点击，阻止了冒泡过程，即只执行tz这个方法，如果不加.stop，先执行tz方法，后执行gett方法。即通过了冒泡这个过程。

外部点击

内部点击

2、prevent //阻止默认事件：方法一： @click='show($event)' 我们有了事件对象后，我们函数中是不是就可以利用原生中的 e.preventDefault();

方法二： @click.prevent='show()' 只要在事件后面加 .prevent 就可以阻止默认事件。

举个例子：阻止了a标签的默认刷新点击

3、capture // 添加事件监听器时使用事件捕获模式，即在捕获模式下触发

实例：在点击最里层的点击6时，gett方法先执行，因为gett方法在捕获模式执行的，先与冒泡事件。下列执行顺序 geet->set->tz ,因为后俩个还是冒泡模式下触发的事件。

外部点击5

内部点击5

点击6

4、self //当前元素自身时触发处理函数时才会触发函数

原理：是根据event.target确定是否当前元素本身，来决定是否触发的事件/函数

实例：如果点击内部点击2，冒泡不会执行gett方法，因为event.target指的是内部点击2的dom元素，不是外部点击1的，所以不会触发自己的点击事件。

外部点击1

内部点击2

5、once //只触发一次

实例：

once

6、键盘事件

方法一：@keydown='show()' 当然我们传个$event 也可以在函数中获 ev.keyCodeif(ev.keyCode==13){

alert('你按了回车键！')

}

方法二：回车执行

上键执行

下键执行

左键执行

右键执行

更多web前端开发知识，请查阅 HTML中文网 ！！