1. 点击事件参数（click）
1.1 基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script>
new Vue({
el: "#app",
data: {
counter: 0,
},
});
</script>
</body>
</html>
- 结果显示
按钮每点击依次计数 +1
image.png
1.2 绑定一个方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
name: "Vue.js",
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
alert("Hello " + this.name + "!");
if (event) {
alert(event.target.tagName);
}
},
},
});
// 也可以用 JavaScript 直接调用方法
app.greet(); // -> 'Hello Vue.js!'
</script>
</body>
</html>
-
结果显示
image.png
- 点击按钮弹窗
image.png
- 点击确定弹窗
image.png
1.3 冒泡事件
说明
下层发生的事件，会冒泡到上一层。
示例
代码说明：
- 我们对 按钮的点击事件 绑定了
greet02（将弹出一个hello 02的弹窗）- 在它的上层 div 绑定了
greet01（将弹出一个hello 01的弹窗）- 当点击按钮事件被触发后，这个事件会冒泡（即被传递到按钮的上层）
因此我们预计，弹窗
hello 02确认后，将会弹出 弹窗hello 01
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app" v-on:click="greet01">
<button v-on:click="greet02">Greet</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
name: "Vue.js",
},
methods: {
greet01: function (event) {
alert("Hello 01");
},
greet02: function (event) {
alert("Hello 02");
},
},
});
// 也可以用 JavaScript 直接调用方法
app.greet(); // -> 'Hello Vue.js!'
</script>
</body>
</html>
- 点击按钮
image.png
- 确认后二次弹窗
image.png
2. 点击事件修饰符
2.1 .stop （阻止冒泡）
使用说明
添加该修饰符后，事件不会冒泡到上一层。
使用示例
- 代码
我们将冒泡事件中的代码做如下修改（在button的事件参数后加stop修饰符）
<div id="app" v-on:click="greet01">
<button v-on:click.stop="greet02">Greet</button>
</div>
- 结果显示
点击按钮后，弹出Hello 01弹窗
确认后不会再弹出Hello 02
2.2 capture （捕获冒泡）
使用说明
冒泡的例子中我们可以看到：
- 先执行了按钮绑定的函数
- 随着事件冒泡到上一层才执行了上一层绑定的函数
而 capture参数将优先执行它所在的绑定。
使用示例
我们将冒泡示例中，按钮上层的 div 模块 绑定参数加
.capture修饰符。
我们预期，将看到点击按钮后，先弹窗Hello 01，再显示弹窗Hello 02
<div id="app" v-on:click.capture="greet01">
<button v-on:click="greet02">Greet</button>
</div>
2.3 .self （只监听触发该元素的事件）
使用说明
只监听触发该元素的事件。
即，如果事件冒泡到了该层，是不会被监听的
使用示例
如上边的冒泡示例中，如果我们在button的上层事件参数添加了
.self修饰符。我们点击button，事件即使冒泡到div层也不会被监听。
代码修改如下：
<div id="app" v-on:click.self="greet01">
<button v-on:click="greet02">Greet</button>
</div>
- 结果显示
点击按钮后，只有弹窗Hello 02弹窗（确认后不会弹出Hello 02）
2.4 once （事件只触发一次）
使用说明
修饰的事件参数只会触发一次。
使用示例
将冒泡示例中的代码做如下修改
<div id="app" v-on:click="greet01">
<button v-on:click.once="greet02">Greet</button>
</div>
预期：
- 第一次点击button，弹窗
Hello 02弹出，确认后弹出Hello 01- 以后点击，只有
Hello 01会弹出。
- 结果显示
符合预期。
2.5 鼠标的修饰符
-
.left- 左键事件 -
.right- 右键事件 -
.middle- 中间滚轮事件
image.png
