目录
㋀㏩
✎ 事件处理
◆ v-on
② v-on demo（v-on:click="method1()"、@click="method1()"）
④ v-on 总结（举一反三重点）
✎ 事件修饰符
扫描二维码关注公众号，回复：
8509148 查看本文章
① 作用解析
① 作用解析
◆ 事件修饰符-3（capture（从父节点向子节点传递事件））
-
事件处理
-
v-on
-
问题：什么是 v-on？
v-on指令用来监听DOM事件，将事件与vue实例相结合。
-
v-on demo（v-on:click="method1()"、@click="method1()"）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE-004</title>
</head>
<body>
<div id="app">
<button type="button" v-on:click="method1()">触发时间</button>
<br />
<br />
<!-- 简写形式 -->
<button type="button" @click="method1()">触发简写</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script type="text/jscript">
var myvue = new Vue({
el: "#app",
data: {},
methods: {
// 涉及逻辑业务处理
method1: function() {
alert("触发了vue")
}
},
})
</script>
</body>
</html>
-
v-on gif 效果
-
v-on 总结
- add event 在模板中添加事件 @click="method1()"
-
define function 在method中定义事件
举一反三：@click="method1()" 对应的当文本框失去焦点的时候做一个验证同理@blur="a()"
-
事件修饰符
-
事件修饰符（全部图例）
-
事件修饰符-1（stop（阻止，冒泡））
-
作用解析
点击child()事件的时候，父元素的点击事件也会被触发，这个时候就用到了事件修饰符。比如说只想触发子节点事件，父节点不想触发加上【.stop】，【.stop】作用是阻止冒泡的，仅在当前节点触发，别的它都不管。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE-004</title>
</head>
<body>
<div id="app">
<!-- 点击div的时候也写一个事件，parent -->
<div @click="parent()">
<button type="button" @click.stop="child()">触发事件</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script type="text/jscript">
var myvue = new Vue({
el: "#app",
data: {},
methods: {
// 涉及逻辑业务处理
child: function() {
alert("触发了子节点事件")
},
parent: function() {
alert("触发了父节点事件")
}
},
})
</script>
</body>
</html>
-
.stop gif 效果
-
事件修饰符-2（once（触发一次））
-
作用解析
注意：修饰符可以连着写哦！！！！！！！
<div id="app">
<!-- 点击div的时候也写一个事件，parent -->
<div @click="parent()">
<!-- 子-》父-》父 -->
<button type="button" @click.stop.once="child()">触发事件</button>
</div>
</div>-
.stop.once gif 效果
-
事件修饰符-3（capture（从父节点向子节点传递事件））
略
