vue学习笔记5-事件绑定-v-on

雪地二货

发布于 2018-09-18 18:14:25

5390

发布于 2018-09-18 18:14:25

用于绑定事件用。

<button onclick="clickit()">点我</button>
function clickit(){
    alert("ok")
}

这样可以实现事件绑定需求，在vue中使用v-on也可以进行事件绑定

<button v-on:click="clickit()">点我</button>

但是效果没了。因为vue的方法定义只能定义在vue中

<button v-on:click="clickit">点我</button>
var vm = new Vue({
    el : "#app",
    methods : {
        clickit : function(){
            alert("vue内部点击了")
        }            
    }
})

这是第一种v-on的使用方式第二种——

<button v-on="{click:clickit}">点我</button>

效果相同，但还是第一种更多，因为v-on也可以进行简写，可以直接用@后面接事件。

<button @click="clickit">点我</button>

效果也相同。而且vue也封装了好多方法，可以用这些方法简介开发例如@keyup.enter="a"，如果按下键盘的时候按下的是回车，那么就可以直接触发a方法。详细在https://cn.vuejs.org/v2/guide/events.html中有记载菜鸟教程里面也有http://www.runoob.com/vue2/vue-events.html

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

http