watch需要注意的点
如果对象的变化值相同,watch是无法监听到。同理,一个对象里面不同的属性如果变化值相同,也无法监听到第一个之后的属性变化。
created(){
var a=1
a=2
a=2
}
watch:{
//无法监听到第二次为2的赋值
console.log("1")
}
created(){
var a={
b:true,
c:true
}
a.b=false
a.c=false
}
watch:{
//无法监听到第二次为false的赋值
console.log("1")
}
处理click事件冒泡
<div @click="clickDiv">
<button @click="clickButton">事件冒泡</button><br>
</div>
事件捕获
先执行外面嵌套的一层,再向里执行
<div @click.capture="clickDiv">
<button @click="clickButton">事件捕获</button><br>
</div>
如果希望先执行 div 事件,再执行 button 的事件,可以在 div 上使用 @click.capture 的写法,让事件由外向内执行
阻止冒泡
<div @click="clickDiv">
<button @click.stop="clickButton">阻止事件冒泡</button><br>
</div>
如果我们希望点击按钮时只执行按钮的事件,可以在按钮上使用 @click.stop 的写法阻止事件冒泡。
加载提示
第一种方法:标签内写
在标签中添加全局方法,绑定data数据
<div
class="container"
v-loading="loading"
element-loading-text="加载中..."
element-loading-background="rgba(0, 0, 0, 0.8)"
>
</div>
数据请求完,在.then后.finally
.finally(() => {
this.loading = false;
});
第二种方法:js中写
在created中设置loading配置
this.loading = this.$loading({
lock: true,
text: "Loading",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
数据请求完,在.then后.finally
.finally(() => {
this.loading.close()
});
数组指定某元素向前排序
sortData(list) {
list.forEach((item, index, arr) => {
if (item.name.indexOf("等待") != -1) {
arr.splice(0, 0, item);
arr.splice(index + 1, 1);
}
});
return list;
}
js监听整个页面回车事件
document.onkeydown = () => {
let key = window.event.keyCode;
//事件中keycode=13为回车事件
if (key == 13) {
//这里填需要执行的方法
}
};
vue中监听回车事件
注意点:@click和@keyup是不能在一个元素上同时使用的
方法一:普通组件中监听回车事件
<input @keyup.enter="触发的方法"/>
方法二:elementui组件中监听回车事件
<el-input @keyup.enter.native="触发的方法"></el-input>
定时器控制滚动效果
首先发送请求获取数据,必须在数据渲染后才能在定时器中取得滚动条长度
// nextTick 数据渲染完后执行的全局方法
this.$nextTick(() => {
this.scrollTime(); //里含定时器
});
实现滚动效果:
scrollTime() {
let scrollDiv = this.$refs.list; //获取dom元素
this.timer = setInterval(() => {
let scrollDivHeight = scrollDiv.scrollHeight; //滚动条长度
scrollDiv.scrollTop++;
//滚动条长度-容器长度=滑动到最底部时滚动条顶部的位置
if (scrollDiv.scrollTop == scrollDivHeight - scrollDiv.clientHeight) {
scrollDiv.scrollTop = 0;
}
}, 40);
},
最后生命周期函数中清理定时器
destroyed() {
clearInterval(this.timer);
},
promise对象的方法
在项目中如果在一个组件中发送多个promise请求,需要等所有请求响应后再做数据处理可以使用以下方法:(内容引用阮一峰的ECMAScript 6入门)
1.promise.allSettled()
const p=Promise.allSettled([p1,p2,p3])
只有等到参数数组的所有 Promise 对象都发生状态变更(不管是fulfilled
还是rejected
),返回的 Promise 对象才会发生状态变更。一旦发生状态变更,状态总是fulfilled
,不会变成rejected
。p1
、p2
、p3
的返回值组成一个数组,传递给p
的回调函数。
2.promise.all()
const p=Promise.all([p1,p2,p3])
p
的状态由p1
、p2
、p3
决定,分成两种情况。
(1)只有p1
、p2
、p3
的状态都变成fulfilled
,p
的状态才会变成fulfilled
,此时p1
、p2
、p3
的返回值组成一个数组,传递给p
的回调函数。
(2)只要p1
、p2
、p3
之中有一个被rejected
,p
的状态就变成rejected
,此时第一个被reject
的实例的返回值,会传递给p
的回调函数。
3.promise.race()
const p=Promise.race([p1,p2,p3])
只要p1
、p2
、p3
之中有一个实例率先改变状态,p
的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p
的回调函数。
4.peromise.any()
const p=Promise.any([p1,p2,p3])
只有等到参数数组的所有 Promise 对象都发生状态变更,返回的 Promise 对象才会发生状态变更。
p
的状态由p1
、p2
、p3
决定,分成两种情况。
(1)p1
、p2
、p3
的状态都变成rejected
,Promise.any就会抛出错误。
(2)只要p1
、p2
、p3
之中有一个被fulfilled
,p
的状态就变成fulfilled
,此时第一个被fulfilled
的实例的返回值,会传递给p
的回调函数。