一、在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>