v-on:属性
v-on:属性作用更多详情可以参考官方API实例作用v-on:属性是vue中用来提供事件绑定的机制，需要与Vue构造函数中的methods属性来配合使用v-on:属性支持浏览器上所有常用事件，例如click事件，change事件，mouseover事件…更多详情可以参考官方APIhttps://cn.vuejs.org/v2/api/#v-on实例<!DOCTYPE html><
·
作用
v-on:属性是vue中用来提供事件绑定的机制，需要与Vue构造函数中的methods属性来配合使用v-on:属性支持浏览器上所有常用事件，例如click事件，change事件，mouseover事件…
更多详情可以参考官方API
https://cn.vuejs.org/v2/api/#v-on
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>v-on</title>
<script src="../js/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="button" name="" id="" value="按钮" v-on:click="show" />
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
methods:{
show:function(){
alert("hello world!")
}
}
});
</script>
</body>
</html>
v-on:属性简写
v-on:属性简写@
获取内部的数据或方法
在Vue实例中，如果想要获取data上的数据，或者想要调用methods属性中的方法时，必须通过this.属性名或者this.方法名的方式来进行访问，这里的this就代表我们的vue实例本身
v-on属性的事件修饰符
| 形式 | 说明 | 案例 |
|---|---|---|
| .stop | 阻止当前触发事件的元素的[冒泡行为] | 点击查看详情 |
| .prevent | 阻止当前元素的默认事件，例如a标签的跳转事件 |
暂无 |
| .capture | 添加事件侦听器时使用事件捕获模式 | 点击查看详情 |
| .self | 只当事件在该元素本身(比如不是子元素)触发时触发回调，例如冒泡事件，使用self该元素就不会被其他的元素冒泡事件所影响 | 点击查看详情 |
| .once | 只触发一次事件 |
v-on属性的事件修饰符支持内联
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)