目录
1、事件相关
1.1、事件绑定
注意如果需要传参数在view里面就需要写括号,如果不传就不需要,传事件在括号里写$event<div id='block'> <button v-on:click="click1">btb</button> //非简写 <button @click="click1">btb</button> //简写 <button @click="click($event)">btb</button> //传参 <button @click="click">btb</button> //不传参 </div> new Vue({ el: '#block', data: { link: 'http:xxx.com', }, methods:{ click(e){ console.log(e); }, click1(){ alert('nihao') } } })
1.2、事件修饰符(可以连写)
1 阻止冒泡修饰符stop
<div id='block'> <div @click="click1">BOX1 <div @click.stop="click1">BOX2</div> </div> </div> new Vue({ el: '#block', data: { link: 'http:xxx.com', }, methods:{ click1(){ alert('nihao') } } })
2 阻止默认行为 prevent
<div id='block'> <a href="http:xxx.com" @click.prevent="click1">link</a> </div> new Vue({ el: '#block', data: { link: 'http:xxx.com', }, methods:{ click1(){ alert('nihao') } } })
3 只执行一次 once
<div id='block'> <a href="http:xxx.com" @click.prevent.once="click1">link</a> </div> new Vue({ el: '#block', data: { link: 'http:xxx.com', }, methods:{ click1(){ alert('nihao') } } })
4 使用事件的捕获模式 capture
一般事件是先捕获(由外而内)后冒泡(由内而外),事件的执行默认在冒泡阶段发生,所以用capture后,可以让事件在捕获阶段发送,即由外而内发送。
//事件在冒泡阶段发生 <div id='block'> <div @click="click">BOX1 <div @click="click1">BOX2</div> </div> </div> new Vue({ el: '#block', data: { link: 'http:xxx.com', }, methods:{ click(){ console.log('BOX1被点击了'); }, click1(){ console.log("BOx2被点击了"); } } }) //事件在捕获阶段发生 <div id='block'> <div @click.capture="click">BOX1 <div @click="click1">BOX2</div> </div> </div> new Vue({ el: '#block', data: { link: 'http:xxx.com', }, methods:{ click(){ console.log('BOX1被点击了'); }, click1(){ console.log("BOx2被点击了"); } } })
5 当触发的事件属于点击的元素时才执行事件 self
//这时的会发生冒泡,两个事件都会执行,但是点击的元素是BOX2 <div id='block'> <div @click="click">BOX1 <div @click="click1">BOX2</div> </div> </div> new Vue({ el: '#block', data: { link: 'http:xxx.com', }, methods:{ click(e){ console.log(e.target); }, click1(e){ console.log(e.target); } } }) //这门给后面要冒泡的元素加上self后就不触发冒泡 <div id='block'> <div @click.self="click">第一层 <div @click="click1"> 第二层 </div> </div> </div> new Vue({ el: '#block', data: { link: 'http:xxx.com', }, methods:{ click(e){ console.log("space1"); console.log(e.target); }, click1(e){ console.log("space2"); console.log(e.target); } } })
6 解决先执行函数在执行默认事件的行为 passive
比如一个滚轮滚动事件@wheel 如果滚轮事件的函数里面运算量非常大的话,如果我们滚动了滚轮,页面会先执行函数,函数执行完毕页面才会滚动,当我们加上passive后,会先滚动页面在执行函数。
当然这个问题也可以通过把事件@wheel改成@scroll来解决。
<div id='block'> //注意这里加了passive,但是这个问题可以通过替换成scroll解决 <ul @wheel.passive="a" style="height: 50px;overflow: auto;border: 1px solid #000;"> <li style="height: 20px;">1</li> <li style="height: 20px;">2</li> <li style="height: 20px;">3</li> <li style="height: 20px;">4</li> </ul> </div> new Vue({ el: '#block', data: { link: 'http:xxx.com', }, methods:{ a(){ for(let i=0;i<=10000;i++){ console.log("as"); } } } }) //Chrome浏览器用不加passive的wheel页面也会动,但是一卡一卡的,可能是浏览器的优化,差别比较细微
2、键盘事件(keyup和keydown)
2.1、通过获取键值
<div id='block'> <input type="text" @keyup="a" placeholder="keyup"></input> <input type="text" @keydown="a" placeholder="keydown"></input> </div> new Vue({ el: '#block', data: { link: 'http:xxx.com', }, methods:{ a(e){ console.log(e.keyCode); console.log(e.code); } } })
2.2、通过键盘事件的修饰符号
<div id='block'> <input type="text" @keyup.enter="a" placeholder="keyup"></input> <input type="text" @keydown.space="a" placeholder="keydown"></input> </div> new Vue({ el: '#block', data: { link: 'http:xxx.com', }, methods:{ a(e){ console.log(e.keyCode); console.log(e.code); } } })
常用的修饰符有:
enter 回车
space 空格
delete 删除和退格
tab 换行
left 左
right 右
up 上
down 下
2.3、组合键的触发
<div id='block'> <input type="text" @keyup.ctrl.a="a" placeholder="keyup"> </div> new Vue({ el: '#block', data: { link: 'http:xxx.com', }, methods:{ a(e){ console.log(e.keyCode); console.log(e.code); } } })
3、计算属性
要注意comouted里面的getter需要写成普通函数,如果写成箭头函数的话,this指代的就是Window了,如果我们的vue实例需要用到Window的话,就要在data里面添加Window
<div id='block'> {{link_head}} <br> {{link_body}} <br> {{link}} </div> let a = new Vue({ el: '#block', data: { link_head: 'http:', link_body: 'xxx.com' }, computed:{ link:{ get(){ console.log('read head'); console.log(this); return this.link_head + this.link_body; }, set(value){ console.log('setter',value); } } } })
如果不修改计算的值,只获取的话可以简写
<div id='block'> {{link_head}} <br> {{link_body}} <br> {{link}} </div> let a = new Vue({ el: '#block', data: { link_head: 'http:', link_body: 'xxx.com' }, computed:{ link(){ return this.link_head + this.link_body; } } })
4、监视属性
immediate为ture,是页面一加载就执行
handler是监视的函数,有两个参数
deep是深度监视
第一种写法
<div id='block'> <button @click="num++">{{num}}</button> </div> let a = new Vue({ el: '#block', data: { num: 1, }, watch:{ num:{ immediate:true,//一上来直接执行 handler(NewValue,OldValue){ console.log(NewValue+'-'+OldValue); } } } })
第二种写法
<div id='block'> <button @click="num++">{{num}}</button> </div> let a = new Vue({ el: '#block', data: { num: 1, } }) a.$watch('num', { immediate: true, //一上来直接执行 handler(NewValue, OldValue) { console.log(NewValue + '-' + OldValue); } })
深度监视deep
//这样的话监视不到,因为watch监视的num是{a:1,b:1}这个整体 <div id='block'> <button @click="num.a++">{{num.a}}</button> <button @click="num.b++">{{num.b}}</button> </div> let a = new Vue({ el: '#block', data: { num: { a: 1, b: 1, }, }, watch:{ num:{ handler(NewValue,OldValue){ console.log(NewValue+'-'+OldValue); } } } })
//这样的话可以监视到,只能监视局部的变化,注意加引号 <div id='block'> <button @click="num.a++">{{num.a}}</button> <button @click="num.b++">{{num.b}}</button> </div> let a = new Vue({ el: '#block', data: { num: { a: 1, b: 1, }, }, watch:{ "num.a":{ handler(NewValue,OldValue){ console.log(NewValue+'-'+OldValue); } } "num.b":{ handler(NewValue,OldValue){ console.log(NewValue+'-'+OldValue); } } } })
//这样的话就算局部变化,也可以监视到,注意NewValue和OldValue是Object对象 <div id='block'> <button @click="num.a++">{{num.a}}</button> <button @click="num.b++">{{num.b}}</button> </div> let a = new Vue({ el: '#block', data: { num: { a: 1, b: 1, }, }, watch:{ num:{ deep:true, handler(NewValue,OldValue){ console.log(NewValue+'-'+OldValue); } } } })
第一种方法的的简写方法
<div id='block'> <button @click="num++">{{num}}</button> </div> let a = new Vue({ el: '#block', data: { num: 1, }, watch:{ num(NewValue,OldValue){ console.log(NewValue+'-'+OldValue); } } })
第二种方法的简写方法
<div id='block'> <button @click="num++">{{num}}</button> </div> let a = new Vue({ el: '#block', data: { num: 1, }, }) a.$watch('num',function(NewValue,OldValue){ console.log(NewValue+'-'+OldValue); })
所有被Vue管理的函数应写成普通函数,这样他的this才是vm,
所有不被Vue管理的函数应写成箭头函数(延时,ajax回调),这样他的this才可以指到vm上
5、样式绑定
5.1、class样式
利用v-bind的值绑定
.btn{ border: 5px solid #000000; color: aqua; } <div id='block'> <button :class="cls" @click="num++">12</button> </div> Vue.config.productionTip = false; let a = new Vue({ el: '#block', data: { cls: 'btn', }, })
利用v-bind的对象绑定
.btn{ border: 5px solid #000000; color: aqua; } <div id='block'> <button :class="cls" @click="num++">12</button> </div> let a = new Vue({ el: '#block', data: { cls:{ btn: false, } }, })
5.2、style样式绑定
对象引入
<div id='block'> <button :style="cls" @click="num++">12</button> </div> let a = new Vue({ el: '#block', data: { cls:{ border: '5px solid #000000', color: 'aqua', } }, })
数组引入
<div id='block'> <button :style="cls" @click="num++">12</button> </div> let a = new Vue({ el: '#block', data: { cls:[{border: '5px solid #000000',},{color: 'aqua',}], }, })