博客详情

vue中v-on绑定html元素事件 (原创)

作者：朝如青丝暮成雪
发布时间：2019-03-23 14:49:56 文章分类：vue 阅读(1462) 评论(0)

vue中绑定事件处理函数

绑定时间处理函数在vue中使用"v-on:事件名"来指定，"v-on:事件名"可以简写为"@事件名"。

代码如下：

			<!DOCTYPE html>
		
			<html lang="en">
		
			<head>
		
			<meta charset="UTF-8">
		
			<title>Title</title>
		
			<script src="../lib/vue-2.2.2.js"></script>
		
			</head>
		
			<body>
		
			<div id="app">
		
			<!-- v-on:xxx 绑定元素事件(methods) vue中提供的事件绑定机制
		
			 v-on:xxx 可简写为 @xxx
		
			 -->
		
			<!--<button type="button" v-on:click="hello('你好')" v-on:mouseover="mouseover">
		
			 {{msg}}</button>-->
		
			<button type="button" @click="hello('你好')" @mouseover="mouseover" >{{msg}}</button>
		
			</div>
		
			</body>
		
			<script>
		
			var vm=new Vue({
		
			el:"#app",
		
			data:{
		
			msg:"我是按钮"
		
			},
		
			methods:{
		
			hello:function (s) {
		
			//alert('hello msg');
		
			window.alert(s);
		
			},
		
			mouseover:function () {
		
			console.log('111');
		
			}
		
			}
		
			});
		
			</script>
		
			</html>