事件（非表单事件、表单事件）
学习事件=>事件之间如何传递参数=>event事件源=>阻止默认事件=>阻止事件传播（阻止冒泡事件）=>不同的框架自己有自己的语法
div.onclick=function(){
}
div.onclick=function(n形参){
}
div.onclick=function(e事件){
//写默认事件e.preventDefault()
//冒泡 e.stopPropagation()
}
<div id="app"> <button @click='getInfo'>点击我有惊喜 【弹出一个alert提示框】</button> <button @click='getInfo1()'>点击我you有一个惊喜【弹出一个alert提示框】</button> <hr> <button @click='getMsg(10)'>我传了一个参数 【打印参数 10】</button> <button @click='getMsg1(10,"字符串")'>我传了一个参数 【打印参数（10 "字符串"）】 </button> </div> <script> new Vue({ el:'#app', data:{//属性 }, methods: {//方法 getInfo(){ alert('我是惊喜') } , getInfo1(){ alert('我是大惊喜') }, //接收参数 getMsg(n){ console.log(n,'参数') }, getMsg1(n,m){ console.log(n,m,'参数') } }, watch: {//监听 }, computed: {//计算属性 }, }) </script>
传递事件源
<div id="app"> <!-- 方式一、隐式传参 不加小括号，也有自己的event事件--> <button @click='getInfo'>普通的点击事件00</button> <hr> <!-- 方式二、 显式传参 加小括号传递的参数是$event--> <button @click='getInfo1($event)'>带参数的点击事件01</button> <hr> <!-- 方式三、 显式传参之多个参数--> <!-- <button @click='getInfo2($event,"巧克力")'>带参数的点击事件</button> --> <button @click='getInfo2("巧克力",$event)'>带参数的点击事件02</button> <hr> <!-- 方式四、--> <button @click='getInfo3()'>什么参数都没有03</button> </div> <script> new Vue({ el:'#app', data:{//属性 }, methods: {//方法 getInfo(e){ console.log(e,'事件源 方式一、') }, getInfo1(e){ console.log(e,'事件源 方式二、') }, getInfo2(e,a){ console.log(e,'事件源 方式三、') console.log(a,'第二个参数 为事件源') }, getInfo3(e){ console.log(e,'事件源 方式四、') } }, watch: {//监听 }, computed: {//计算属性 }, }) </script>
阻止默认事件和事件冒泡 1、：https://www.cnblogs.com/guomin/p/9273862.html
<style> .box { width: 200px; height: 200px; background: red; } .bigBox { width: 400px; height: 400px; background: #ccc; } </style> </head> <body> <div id="app"> <!-- 不想要默认的右键菜单=>contextmenu --> <!--<div class="box" @contextmenu='prev'>我是一个小盒子 contextmenu（右键的事件）</div> --> <div class="bigBox" @click='big'> <div @click='small' class="box">我是一个小盒子</div> </div> </div> <script> new Vue({ el: '#app', data: {//属性 }, methods: {//方法 //阻止右键默认菜单 prev(e) { console.log(e, '右键被点击了') e.preventDefault(); }, big(){ console.log('大盒子被点击了') }, small(e){ //阻止冒泡事件 e.stopPropagation(); console.log('小小小盒子') } }, watch: {//监听 }, computed: {//计算属性 }, }) </script>
表单时间 ：
@focus 获取焦点
@blur 失去焦点
@change 状态改变触发的事件
<div id="app"> <div> 请输入用户名：<input type="text" @focus='focus' v-model='val'>{{val}} </div> <hr> <div> 请输入用户名：<input :style='styleC' type="text" v-model='val' @blur='blur'> </div> <hr> <div> 请同意当前协议：<input @change='changeInfo' type="checkbox" v-model='checked'>{{checked}} </div> <hr> <div> 请同意当前协议：<input @click='getInfo' type="checkbox" v-model='checked'>{{checked}} </div> </div> <script> new Vue({ el: '#app', data: {//属性 val: '', styleC:{ borderColor:'' }, checked:false//checkbox中一个框，用string，没什么区别 但是必须用boolean。如果是多个框，那么初始值就不能是string，否则都会选中 ，要用数组 }, methods: {//方法 focus() { //项目中可能会在这里面 做正则判断 console.log('获取焦点') }, //失去焦点事件 blur() { //失去焦点的时候,对当前input输入框进行判空 console.log('失去焦点') /* if (!this.val) { console.log('请输入用户名') this.styleC.borderColor = 'red' }else{ this.styleC.borderColor='' } */ this.val ? this.styleC.borderColor='':this.styleC.borderColor = 'red' }, //状态改变触发的事件 changeInfo(){ console.log(this.checked,'我被触发了') }, getInfo(){//在表单中不要用click事件 this.checked = !this.checked console.log(this.checked,'我被点击了。。。。') } }, watch: {//监听 }, computed: {//计算属性 }, }) </script>
事件修饰符
事件修饰符 （可参考）：https://www.cnblogs.com/xuqp/p/9406971.html
<div id="app"> <!-- vue中阻止默认事件 .prevent --> <div class="box" @contextmenu.prevent='prv'></div> <hr> <!-- vue中阻止冒泡事件 .stop --> <div class="bigBox" @click='big'> <div class="box" @click.stop='small'></div> </div> <hr> <!-- vue中只触发自己的方法 .self --> <div class="bigBox" @click.self='big1'> <div class="box" @click='small1'>111</div> </div> <hr> <!-- vue中只触只触发一次 .once --> <div class="bigBox" @click.once='big2'> <div class="box" @click='small2'>222</div> </div> <hr> <!-- vue中事件捕获 .capture --> <div class="bigBox" @click.capture='big3'> <div class="box" @click='small3'>333</div> </div> </div> <script> new Vue({ el: '#app', data: {//属性 }, methods: {//方法 prv() { console.log('我是右键') }, small() { console.log('我是小盒子') }, big() { console.log('我是da盒子') }, small1() { console.log('我是小盒子111') }, big1() { console.log('我是da盒子111') }, small2() { console.log('我是小盒子222') }, big2() { console.log('我是da盒子222') }, small3() { console.log('我是小盒子333') }, big3() { console.log('我是da盒子333') } }, watch: {//监听 }, computed: {//计算属性 }, }) </script>
键盘修饰符
<div id="app"> <div> <input type="text" v-model='msg' @keydown='enter'> </div> <hr> <div> <!-- <input type="text" v-model='msg' @keydown.enter='enter1'> --> <input type="text" v-model='msg' @keydown.13='enter1'> </div> <div> <input type="text" v-model='msg' @keydown.left='left'> </div> <div> <input type="text" v-model='msg' @keydown.right='right'> </div> <div> <input type="text" v-model='msg' @keydown.up='up'> </div> <div> <input type="text" v-model='msg' @keydown.down='down'> </div> </div> <script> new Vue({ el: '#app', data: {//属性 msg: '' }, methods: {//方法 enter(e) { console.log(e, '键盘事件') if (e.keyCode == 13) { alert('我是回车') } if (e.keyCode == 40) { alert('我是键盘下箭头') } }, enter1() { alert('我是能是回车才可以被触发') }, left(){ alert('左边') }, right(){ alert('right') }, up(){ alert('up') }, down(){ alert('down') }, }, watch: {//监听 }, computed: {//计算属性 }, }) </script>
表单修饰符（可查看网址）：https://www.cnblogs.com/qjuly/p/8652756.html
<div id="app"> <div> <input type="text" v-model='val'>{{val}} </div> <div> 延迟在光标移开后显示(lazy)： <input type="text" v-model.lazy='val'>{{val}} </div> <div> <!-- .number 必须是以数字开头后面的字符就无效，如果以字符开头那么就不起作用 --> <input type="text" v-model.number='val'>{{val}} </div> <div> 只能是数值型 <input type="number"> </div> <hr> <div> <!-- .trim 去掉首尾两端的空格 --> <input type="text" v-model.trim='val'>{{val}} </div> </div> <script> new Vue({ el: '#app', data: {//属性 val: '' }, methods: {//方法 }, watch: {//监听 }, computed: {//计算属性 }, }) </script>