目录
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',}], }, })
1019
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
