Vue学习之路第六篇：v-on

v-on指令用来触发页面事件的指令。

<body>
    <div id="app">
        <button v-on:click="show()">点击</button>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el : "#app",
            data : {},
            methods:{
                show:function(){
                    alert('aa');
                }
            }
        });
    </script>
</body>

如上代码，指令书写格式为：v-on:事件名称，不要忘记书写:，等于号后面的内容是Vue对象里声明的方法。

在Vue对象里，我们添加了一个新的属性，叫做methods，它用来声明方法对象，其中show即为我们声明的方法对象。

运行结果：

在Vue中，我们还可以对v-on进行简化，用@来代替，效果是一样的，代码如下所示：

<button @click="show()">点击</button>

除了click事件，我们还可以定义其他的一些常用事件，如：

mouseover：鼠标放上事件

mouseout：鼠标移开事件

change：内容改变

dblclick：双击事件

focus：聚焦事件

blur：失去焦点事件
 
 
还有很多，这里不一一列举了，有兴趣的童鞋可以自己研究一下，手动尝试一下。

 

接下来讲解一个ECMAScript6的小知识点：方法的定义

//之前的写法
show:function(){
    alert('aa');
}

//ECMAScript6的新写法
show(){
    alert('aa');
}

简单了很多，大家都可以自己尝试一下。

 

每天进步一点点！

posted on 2019-01-24 17:32  Devil'soul  阅读(1069)  评论(0)    收藏  举报

导航