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

发布时间：2020-12-16 23:27:42 所属栏目：百科来源：网络整理

导读：v-on指令用来触发页面事件的指令。 script type="text/javascript"gt; span style="color: #0000ff"gt;var/span vm = span style="color: #0000ff"gt;new/spanspan style="color: #000000"gt; Vue({ el : /span"#app"span style="color: #000000"gt;,data :

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

<script type="text/javascript"&gt;
    <span style="color: #0000ff"&gt;var</span> vm = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; Vue({
        el : </span>"#app"<span style="color: #000000"&gt;,data : {},methods:{
            show:</span><span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt;(){
                alert(</span>'aa'<span style="color: #000000"&gt;);
            }
        }
    });
</span></script>

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

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

运行结果：

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

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

mouSEOver：鼠标放上事件

mouSEOut：鼠标移开事件

change：内容改变

dblclick：双击事件

focus：聚焦事件

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

show:'aa'<span style="color: #008000">//<span style="color: #008000">ECMAScript6的新写法
<span style="color: #000000">show(){
alert('aa'<span style="color: #000000">);
}

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

每天进步一点点！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!