<div id="app">
{{message}}
<!-- @==v-on: -->
<!-- 事件调用无参数 -->
<button @click="btn1Click()">1</button>
<button @click="btn1Click">1</button>
<!-- 当定义事件时,写函数省略了小括号,但方法本身需要一个参数 -->
<!-- <button @click="btn2Click(2)">2</button> -->
<!-- 当没传时,形参为undefine -->
<button @click="btn2Click()">2</button>
<!-- 当需要参数,但省略了括号,vue会默认将浏览器生成的event事件传到方法中 -->
<button @click="btn2Click">2</button>
<!-- 方法定义时,需要event对象,又需要其他参数 -->
<!-- abc会传入event,而event会传入undefine -->
<button @click="btn3Click">3</button>
<!-- 需要event时,正确写法:$event -->
<button @click="btn3Click(3,$event)">3</button>
</div>
<script src="js/vue.js">
</script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello'
},
methods: {
btn1Click(){
console.log('btn1');
},
btn2Click(a){
console.log('btn',a);
},
btn3Click(a,event){
console.log('btn',a,event);
}
}
})
</script>
<div id="app">
<div @click="divClick">
<!-- .stop防止冒泡 -->
<button @click.stop="btnClick">1</button>
</div>
<!-- .prevent 阻止默认事件-->
<form action="b">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
<!-- 监听键入 -->
<input type="text" @keyup.enter="keyUp">
</div>
<script src="js/vue.js">
</script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello'
},
methods: {
divClick(){
console.log('div');
},
btnClick(){
console.log('btn');
},
submitClick(){
console.log('sub');
},
keyUp(){
console.log('up');
}
}
})
</script>
.once
只触发一次回调