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进行简化，用@来代替，效果是一样的，代码如下所示：
<button @click="show()">点击</button>
除了click事件，我们还可以定义其他的一些常用事件，如：
mouseover：鼠标放上事件
mouseout：鼠标移开事件
change：内容改变
dblclick：双击事件
focus：聚焦事件
blur：失去焦点事件
还有很多，这里不一一列举了，有兴趣的童鞋可以自己研究一下，手动尝试一下。
接下来讲解一个ecmascript6的小知识点：方法的定义
//之前的写法
show:function(){
alert('aa');
}
//ecmascript6的新写法
show(){
alert('aa');
}
简单了很多，大家都可以自己尝试一下。
每天进步一点点！