【Vue】学习笔记——Vue
常用指令之v-on
v-on
指令是事件绑定指令,当用户需要点击,按下键盘,滚动鼠标等操作时,想要添加一些自己的逻辑处理时,就可以为特定的元素绑定一些特定的事件。
1. v-on的使用
<button v-on:事件名="方法名">事件绑定</button>
具体实例如下:
<body>
<div id="app">
<input type="button" value="事件绑定" v-on:click="todo">
<input type="button" value="事件绑定" v-on:mouseenter="todo">
<input type="button" value="事件绑定" v-on:dblclick="todo">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</script>
<script>
var app = new Vue({
el:"#app",
methods: {
todo:function() {
//方法执行的逻辑
}
}
});
</script>
</body>
2. v-on的简写
简洁的写法:用
@
符号替代v-on:
。
<div id="app">
<input type="button" value="事件绑定" @click="todo">
<input type="button" value="事件绑定" @mouseenter="todo">
<input type="button" value="事件绑定" @dblclick="todo">
</div>
3.总结
v-on
指令作用是为元素绑定事件v-on
指令可以简写为@
- 绑定的方法在
methods
中
关于
v-on
官方文档