Vue.js火速上手第四章——v-on指令绑定方法_vue.js第四章上机指导-CSDN博客

本文链接：https://blog.csdn.net/tangdaren2/article/details/106686988

一、在index.html中添加v-on指令

给button绑定自行定义的onClick方法

<button v-on:click="onClick">点击</button>

二、在main.js中定义onClick方法

		methods:{
			onClick:function(){
				console.log('clicked');
			},
		},

三、在前台点击按钮，查看console输出

控制台输出“clicked”字符串。

四、同个标签绑定多个事件

在button中绑定多个v-on

<button v-on="{mouseenter:onEnter,mouseleave:onOut}" v-on:click="onClick2">绑定多个事件</button>

在main.js中，自定义onEnter，onOut，onClick2三个方法

onEnter:function(){
				console.log('enter in');
			},
			onOut:function(){
				console.log('out');
			},
			onClick2:function(){
				console.log('第二个按钮被点击');
			},

在浏览器中验证：

五、v-on绑定submit

			<form v-on:submit.prevent="onSubmit" v-on:keyup="onKeyup" v-on:keyup.enter="onEnter">
				<input type="text">
				<button type="submit">提交</button>
			</form>

添加onSubmit、onKeyup、onEnter方法

                onSubmit:function(){
				console.log('submitted');
			},
			onKeyup:function(){
				console.log('key pressed');
			},
			onEnter:function(){
				console.log('entered');
			}

六、本篇所有代码

v-on:指令可以简写为@

本篇main.js代码

var app=new Vue({
		el: '#app',
		data:{
			url:'http://www.baidu.com',
		},
		methods:{
			onClick:function(){
				console.log('clicked');
			},
			onEnter:function(){
				console.log('enter in');
			},
			onOut:function(){
				console.log('out');
			},
			onClick2:function(){
				console.log('第二个按钮被点击');
			},
			onSubmit:function(){
				console.log('submitted');
			},
			onKeyup:function(){
				console.log('key pressed');
			},
			onEnter:function(){
				console.log('entered');
			}
		},
});

index.html代码

<html>
	<head>
		<title>chapter18.3</title>
	</head>
	<body>		
		<div id="app">
			<button v-on:click="onClick">点击</button><br/>
			<button v-on="{mouseenter:onEnter,mouseleave:onOut}" v-on:click="onClick2">绑定多个事件</button><br/>
			<form v-on:submit.prevent="onSubmit" @keyup="onKeyup" @keyup.enter="onEnter">
				<input type="text">
				<button type="submit">提交</button>
			</form>
		</div>
		<script src="lib/vue.js"></script>
		<script src="js/main.js"></script>
	</body>
</html>