v-on
<body>
<div id="app">
<button v-on:click="data('asd')">hello</button>
<button v-on:click="numjj()">点击加一</button>
{{num}}
<hr>
<div v-on:click="data('1')" style="background: red;width: 700px; height: 700px;">1
<div v-on:click="data('2')" style="background: blue;width: 300px; height: 300px;">2
<a v-on:click.stop.prevent="data('3')" href="https://www.baidu.com/"
style="background: yellow;width: 200px; height: 200px;display: block;">3</a>
</div>
</div>
</div>
</body>
</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// v-on指令
// 作用：绑定事件
// 语法：v-on:事件名="方法名"
// 简写：@事件名="方法名"
// 事件修饰符：
// .stop 阻止事件冒泡
// .prevent 阻止默认行为
// .capture 事件捕获
// .self 只有自身触发事件才会执行
// .once 事件只触发一次
// .passive 事件默认行为立即执行
// 键盘修饰符：
let vue = new Vue({
el: app,
data() {
return {
num: 0
}
},
methods: {
data(str) {
alert(str)
},
numjj() {
this.num++
}
}
})
</script>
浙公网安备 33010602011771号