事件处理
事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用v-on指令监听DOM事件调用JS方法 -->
<button v-on:click="greet1">Greet</button>
<!-- 在内联JS语句中调用方法 -->
<button v-on:click="greet2('abc',$event)">Greet</button>
<!-- vue提供的事件修饰符 -->
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'vue'
},
methods: {
greet1: function () {
alert('hello ' + this.name);
},
greet2: function (str, event) {
alert(str);
if (event) {
// 阻止按钮默认行为
event.preventDefault();
// 阻止点击事件传递
event.stopPropagation();
}
}
}
})
</script>
</body>
</html>
131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
