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:鼠标放上事件
change:内容改变
dblclick:双击事件
focus:聚焦事件
接下来讲解一个ecmascript6的小知识点:方法的定义
//之前的写法 show:function(){ alert('aa'); } //ecmascript6的新写法 show(){ alert('aa'); }
简单了很多,大家都可以自己尝试一下。
每天进步一点点!
如对本文有疑问, 点击进行留言回复!!
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论