<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on和@</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-on指令的作用是：为元素绑定事件 -->
<!-- 事件名不需要写on -->
<!-- 可以简写为@ -->
<!-- 绑定的方法定义在methods里面 -->
<p @click="changeMesssage">{{message}}</p>
<input type="button" value="v-on指令" v-on:click="doMessage">
<input type="button" value="@指令" @click="doMessage">
<!-- 双击才会触发 -->
<input type="button" value="双击事件" @dblclick="doMessage">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"马赫真帅"
},
methods:{
doMessage:function(){
alert("马赫太帅了")
},
changeMesssage:function(){
this.message+=",无敌了"
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on补充</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- v-on补充 -->
<div id="app">
<input type="button" value="按钮" @click="pressButton(666)"><br/>
<!-- keyup是当按下键盘抬起触发，keydown是当按下键盘触发 -->
<!-- 事件的后面跟上.修饰符可以对事件进行限制， .enter就是对回车键进行限制 -->
<input type="text" @keydown.s="sayHi">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
},
methods:{
pressButton:function(flag){
console.log(flag)
},
sayHi:function(){
alert("马赫好帅啊")
}
}
})
</script>
</body>
</html>