4.常用指令
4.1 v-on
v-on 绑定事件监听器。事件类型由参数指定。缩写：@
示例：
v-bind 实例： <br>
<button v-on:click="showRed" :title=" title + '你确定没有骗人？' ">按钮</button>
/**
创建一个VUE实例，当我们导入VUE的资源后，浏览器的内存中就多了一个VUE的构造函数；
我们创建的这个 vm 对象就是MVVM中的vm调度者。
**/
var vm = new Vue({
el:'#app',
// data中的属性，存放的就是el当中需要用到的属性，
// 这个data 也就是MVVM中的M，Model层用来保存数据
data:{
msg:'hello vue',
html:'<h1> the hello world !</h1>',
title:'点击这里可以领取红包！'
},methods:{
showRed:function(){
alert("给你的红包0.01!");
}
}
});
效果：
事件修饰符
4.1 .stop 阻止冒泡事件
.stop阻止事件冒泡；示例如下：
<div id="app">
<div class="innerHtml" @click="divClick">
<button class="btn" @click.stop="btnClick">点击我</button>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hello vue'
},methods:{
divClick:function(){
console.log("div 被点击了");
},btnClick:function(){
console.log("btn 被点击了");
}
}
});
</script>
<!-- 没有使用stop事件修饰符；点击按钮会冒泡事件再次点击div -->
[Log] btn 被点击了 (event.html, line 31)
[Log] div 被点击了 (event.html, line 29)
<!-- 使用stop事件修饰符；点击按钮会阻止冒泡事件再次点击div -->
btn 被点击了
4.2 .prevent
调用 event.preventDefault() 用于阻止默认事件触发。
<div id="app">
<!--
如果不加事件修饰符，点击该链接后会立刻跳往百度并且打印控制台
如果加了阻止默认事件修饰符，点击后不会跳转到百度并且会打印日志
-->
<a href="http://www.baidu.com" title="click me" @click.prevent="showName">点我看看是什么网站</a>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hello vue'
},methods:{
showName:function(){
console.log("你点击的是百度！");
}
}
});
</script>
4.3 .capture
添加事件侦听器时使用 capture 模式。即：从外到里捕捉事件
<body>
<div id="app">
<!--
不使用.capture时点击按钮，默认是先执行按钮的点击事件；在执行外层div的点击事件；
使用.capture时点击按钮，先执行外层div的点击事件；在执行内层按钮的点击事件；
-->
<div class="innerHtml" @click.capture="divClick">
<button class="btn" @click="btnClick">点击我</button>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hello vue'
},methods:{
divClick:function(){
console.log("div 被点击了");
},btnClick:function(){
console.log("btn 被点击了");
}
}
});
</script>
执行效果：
[Log] div 被点击了 (event.html, line 37)
[Log] btn 被点击了 (event.html, line 39)
4.4 .once 事件只触发一次
.once - 只触发一次回调。
<!--
@click.once.prevent="showName" 表示点击调用showName只执行一次；下次就不在执行showName直接跳转；
@click.prevent.once="showName" 表示只起效一次阻止默认点击事件，下次不在阻止。
-->
<a href="http://www.baidu.com" title="click me" @click.once.prevent="showName">点我看看是什么网站</a>
4.5 .self 只阻止自己的事件回调
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。和stop不同的是stop会阻止后续所有的。
<div class="out" @click="outClick">
<div class="innerHtml" @click.self="divClick">
<button class="btn" @click="btnClick">点击我</button>
</div>
</div>
[Log] btn 被点击了 (event.html, line 50)
[Log] out div被点击了！ (event.html, line 54)
本文由 huzd 创作，采用 知识共享署名4.0 国际许可协议进行许可本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名最后编辑时间
为:
2021/12/20 19:44