1. 事件绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div id="app"><div>{{num}}</div><div><button v-on:click='num++'>点击1</button><button v-on:click='handle'>点击2</button><button v-on:click='handle()'>点击3</button><button @click='handle()'>点击4</button><hr><button @click='handle1(123,456,$event)'>按钮1</button><button @click='handle2'>按钮2</button><button @click='handle2($event)'>按钮3</button></div></div><script src="../vue.js"></script><script>var vm = new Vue({el: '#app',data: {num: 0},methods: {handle() {console.log('ttt');}, handle1: function(param1, param2, event) {this.num++;console.log(param1+param2);console.log(event.target.tagName);},handle2: function(event) {console.log(event.target.innerHTML);}}})</script>
</body>
</html>
2. 事件处理
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../vue.js"></script><style>div {width: 200px;height: 100px;}</style><script></script>
</head><body><div id="app"><div @click='test(2,3)' style="background-color: yellow"></div> </div><script>var vm = new Vue({el: '#app',data: {},methods: {test(num1,num2) {alert(num1 + num2);},show() {console.log('右键按下');}},computed: {},watch: {}});</script>
</body></html>
3. 事件修饰符1
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div id="app"><h1>事件修饰符</h1><div @click='father'> <button @click.stop='son'>点击儿子</button> </div><div><a href="https://www.baidu.com" @click.prevent>百度</a> </div><hr><h1>按键修饰符</h1><form action="">userName: <input type="text" v-model='name' @keyup.delete='clearAll'><br>passWord: <input type="text" v-model='password' @keyup.enter='enter'><input type="button" name="" id="" value="提交" @click='submit'></form></div><script src="../vue.js"></script><script>var vm = new Vue({el: '#app',data: {name: 'tom',password: 'admin'},methods: {father: function() {console.log('father');},son: function(event) {console.log('son');},handle: function() {},enter() {console.log('666');}, submit: function() {console.log(this.name + ' ' + this.password);},clearAll: function() {this.name = '';}}}); </script>
</body></html>
4. 事件修饰符2
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script></script>
</head><body><div id="ok"><a href="https://www.baidu.com" v-on:click.prevent>跳转百度</a><div v-on:click.self="click_div"><button v-on:click.once="click_btn">点击</button></div><button v-on:click.left="leftHandle">左键触发</button><button v-on:click.middle="middleHandle">中键触发</button><button v-on:click.right="rightHandle">右键触发</button><div v-on:click="hello">sfsfs</div></div><script src="../vue.js" type="text/javascript"></script><script type="text/javascript">var vm = new Vue({el: '#ok',data: {},methods: {click_div() {alert('点击了div');},click_btn() {alert('点击了button');},leftHandle() {alert('左键触发');},rightHandle() {alert('右键触发');},middleHandle() {alert('中键触发');},hello() {alert('HelloWorld');}}});</script>
</body></html>
5. 自定义事件修饰符
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><h1>自定义按键修饰符</h1><form action="">userName: <input type="text" v-model='name' v-on:keyup.65='clear'><br> userName: <input type="text" v-model='name' v-on:keyup.a='clear'><br> passWord: <input type="text" v-model='password' v-on:keyup.enter=''><input type="button" name="" id="" value="提交" v-on:click=''></form></div><script src="../vue.js"></script><script>Vue.config.keyCodes.a = 65; var vm = new Vue({el: '#app',data: {num: 0,name: 'Zhang',password: '123'},methods: {clear: function() {this.name = '';}}})</script>
</body></html>
