【Vue】指令之v-on

197 阅读1分钟
【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 官方文档