事件监听
基础用法
- 监听dom事件使用v-on指令： v-on:事件类型="一个函数" 。这个事件类型可以自定义。
- v-on 指令绑定事件后，就会监听相应的事件，并在触发时运行一些 JavaScript 代码。
<div id="box1">
<button v-on:click="counter += 1">点我</button>
<p>已点击 {{ counter }} 次</p>
</div>
<script>
var practice1 = new Vue({
el: '#box1',
data: {
counter: 0
}
})
</script>
展示效果
缩写
v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-on 提供了特定简写：
<!-- 完整语法 -->
<a v-on:click="doSomething">click</a>
<!-- 缩写 -->
<a @click="doSomething">click</a>
@click是v-on:click的简写形式，@即表示v-on:。- 它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于特性名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的。
作用
绑定事件监听，表达式可以是一个方法的名字或一个内联语句，
如果没有修饰符也可以省略，用在普通的html元素上时，只能监听原生DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
常用事件
- v-on:click
- v-on:keydown
- v-on:keyup
- v-on:mouseenter
- v-on:mouseleave
- v-on:mousedown
- v-on:mouseover
- v-on:submit
示例
<!-- v-on:submit 阻止默认行为 -->
<form v-on:submit.prevent></form>
Vue.js 提供了一个 $event 变量，使用它可以访问原生 DOM 事件。$event 变量可以通过方法传入。
<div id="app">
<!-- 内联语句 -->
<a href="www.163.com" v-on:click="openUrl('被禁用喽',$event)">被禁用喽</a>
</div>
<script>
var app = new Vue({
el:"#box",
data: {
count:0
},
methods: {
openUrl:function (param,event) {
event.preventDefault();
console.log("param"+ param);
}
}
})
</script>
输出结果：
param:被禁用咯这个示例利用传入的 event 参数，禁用了原有的链接跳转逻辑。
事件修饰符
.stop
<!-- v-on:click.stop 阻止事件冒泡 -->
<button v-on:click.stop="show">B</button>
.prevent
<!-- v-on:click.prevent 阻止默认行为 -->
<a href="http://www.baidu.com/" v-on:click.prevent>A</a>
<!-- 没有表达式-->
<a href="http://www.baidu.com/" v-on:click.prevent="show">B</a>
<!-- 有表达式 -->
<!-- 举例 -->
<div id="app">
<a href="http://www.baidu.com/" v-on:click.prevent>A</a>
<br />
<a href="http://www.baidu.com/" v-on:click.prevent="show">B</a>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
methods:{
show(){
console.log("1")
}
}
})
</script>A链接的默认事件是跳转到baidu.com，添加了prevent后，点击A，默认事件无效。
B链接的默认事件也是跳转到baidu.com，添加了带有表达式的prevent后，点击B，跳转事件无效，但手动添加的show方法有效，
控制台中显示1，因为show不是默认事件。
.capture
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">text</div>.self
<!-- v-on:click.self -->
<div v-on:click.self="show2"></div>
功能：当事件是从侦听器绑定的元素本身触发时才触发回调。
举例：
<div id="app">
<div style="width: 100px;height: 100px;background-color: #008000;" v-on:click="show1">
第一层
<div v-on:click.self="show2">
第二层
<div v-on:click="show3">
第三层
<div v-on:click="show4">
第四层
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
methods: {
show1() {console.log("1")},
show2() {console.log("2")},
show3() {console.log("3")},
show4() {console.log("4")}
}
})
</script>
假设我们没有在第二层的div上添加self，那么我们点击第四层的时候，控制台将会出现结果4 3 2 1（冒泡），
添加了之后，点击第四层，控制台显示4 3 1，因为第二层的self把第二层的事件设置成了仅自己调用时才有效，
所以冒泡把第二层跳过了。
.keyCode | keyAlias
<!-- .{keyCode | keyAlias} 用特定按键触发事件 -->
<input type="text" v-on:keydown.13="show1" /><br/>
<!-- 使用KeyCode 13代表enter键 -->
<input type="text" v-on:keydown.right="show2" />
<!-- 使用别名，right代表方向键右 -->
.native
功能：监听组件根元素的原生事件。
<div id="app">
<mycomponent v-on:click.native="myfn"></mycomponent>
</div>
<script type="text/javascript">
Vue.component('mycomponent',{
template:`<a href="#">点我</a>`
})
var vm = new Vue({
el: '#app',
methods:{
myfn(){
console.log(1);
}
}
});
</script>- 使用native修饰符需要先创建一个自定义组件，然后在html中调用组件时，再使用。
- 如果v-on:click不加.native,那么点击是无效的，控制台不会出现任何内容。
.once
功能：只触发一次回调。多次点击，控制台只出现一次结果。
<mycomponent v-on:click.native.once="myfn"></mycomponent>
- 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。
动态参数
2.6.0 新增
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
<a v-on:[eventName]="doSomething"> ... </a>在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。
原文地址：https://www.cnblogs.com/mrsdong/p/12144375.html
时间： 2024-11-07 02:41:24