v-on 为HTML标签绑定事件
代码演示:
在下面的代码中,在input标签中定义了一个按钮,并且使用v-on为input标签绑定了一个事件click,当鼠标点击该按钮时,会触发指定的方法handle,如果该方法有返回值,则在视图区域的方法handle后面加上()。如果没有返回值则可以不加,这里加上了。
在定义的vue对象中,在methods区域定义了一个method为handle()。当点击时会触发该方法弹出“被点了一下~~~”。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-on</title><script src="js/vue.js"></script>
</head>
<!-- v-on 为HTML标签绑定事件 -->
<body><!-- 3.定义vue所要操作的视图 --><div id="app"><input type="button" value="点我一下" v-on:click="handle()"> <!-- event指定要绑定的是什么事件 函数里不需要传递参数,()可以加可以不加 --><input type="button" value="点我一下" @click="handle()"> <!-- --></div>
</body>
<script>// 2.创建vue对象,指定vue的管辖区域,数据和方法new Vue({el:"#app",data:{},methods: {handle:function() {alert("被点了以下~~~");}},})
</script>
</html>