欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-10 11:33:50
v-on指令用来触发页面事件的指令。 如上代码,指令书写格式为:v-on:事件名称,不要忘记书写:,等于号后面的内容是Vue对象里声明的方法。 在Vue对象里,我们添加了一个新的属性,叫做methods,它用来声明方法对象,其中show即为我们声明的方法对象。 运行结果: 在Vue中,我们还可以对v ......

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

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

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

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

mouseover:鼠标放上事件

mouseout:鼠标移开事件

change:内容改变

dblclick:双击事件

focus:聚焦事件

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

 

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

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

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

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

 

每天进步一点点!