v-on
- v-on指令的作用是:为元素绑定事件
- 时间名不需要写on
- 指令可以简写为“@”
- 绑定的方法我们定义在methods属性中
- 方法的内部我们通过this关键字可以访问定义在data数据中
本小节代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt">
<input type="button" value="v-on简写" @click="doIt">
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods: {
doIt:function(){
alert("做it");
}
},
})
</script>
</body>
</html>
双击事件
<input type="button" value="双击事件" @dblclick="doIt">