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'); }
简单了很多,大家都可以自己尝试一下。
每天进步一点点!