<script src="../libs/vue.js"></script>
<div id="app">
<!--v-on：XXX 完整的语法-->
<button v-on:click="showAlert">按钮</button>
<!--v-on：XXX 缩写@ 语法糖-->
<!--v-on：XXX 动态参数@[xxx]="xxx"-->
<button @click="showAlert()">按钮</button>
<br>
<button @click="say('hello')">带参数的按钮</button>
<!--访问原始的dom事件-->
<button @click="showLog('原始事件点击',$event)" name="Button">获取原始事件的按钮</button>
<button @click="showEvent($event)" name="Btn">获取原始事件的按钮</button>
<div @click="divClick">
<!--stop 修饰符 阻止冒泡事件-->
<button @click.stop="btnClick">修饰符stop按钮</button>
</div>
<form action="baidu">
<!--prevent 修饰符 阻止默认事件-->
<button @click.prevent="submitClick">修饰符prevent按钮</button>
</form>
<!--once 修饰符 一次的点击事件-->
<button @click.once="onceClick">只允许点击一次的按钮</button>
<!--keyup enter enter键的监听-->
<input type="text" @keyup.enter="keyUp">
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
message: 'hello vue'
},
methods: {
keyUp(){
console.log("=====keyUp=====")
},
onceClick(){
console.log("=====onceClick=====")
},
submitClick(){
console.log('=====submitClick====')
},
divClick(){
console.log('=====divClick====')
},
btnClick(){
console.log('=====btnClick====')
},
//获取data里的数据
showAlert() {
alert(this.message)
},
say(msg) {
alert(msg)
},
showLog(msg, event) {
console.log(msg)
console.log(event)
//获取点击事件的对象
console.log(event.target)
console.log(event.target.name)
},
showEvent(event) {
console.log(event)
//获取点击事件的对象
console.log(event.target)
console.log(event.target.name)
}
}
})
</script>
常用的按键码：
（1）.enter
（2）.tab
（3）.delete (捕获“删除”和“退格”键)
（4）.esc
（5）.space
（6）.up
（7）.down
（8）.left
（9）.right
网友评论