生命周期
-
又名生命周期回调函数、生命周期函数、生命周期钩子
-
是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数
-
生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的
-
生命周期函数中的 this 指向是vm或组件实例对象
生命周期
1.生命周期函数,钩子函数
2.生命周期函数命名不能修改
3.this指向Vue实例(vm)
----------------------
过滤器
1.局部过滤器new Vue({filters:{名称(value){}}}),
全局过滤器Vue.filter(“名称”,function(value){})
2.返回一个新的数据
3.使用时|名称, 多个过滤器串联,拿取的值是前一个
Vue.filter("myTime",function(value){
// console.log(value);
// return value.slice(0,11);
// return value.substring(0,11);
return value.substr(0,11);
})
var vm = new Vue({
el:"#app",
data() {
return {
time:Date.now(),
userName:"张三",
bool:true,
// opacity:"opacity:1",
opacity:1,
timeValue:"",
}
},
methods: {
sum(){
return 100;
},
func(){
this.userName = "9999"
},
stop(){
this.$destroy();
}
},
// beforeCreate初始化之前,不能获取data中的数据
beforeCreate() {
// console.log(this.userName);
// console.log(this.sum());
},
// created初始化之后,获取data中的数据
created() {
// console.log(this.userName);
// console.log(this.sum());
},
// beforeMount解析前|挂载前
beforeMount() {
// this.bool = false;
// document.getElementsByClassName("box")[0].style.color = "red";
},
// mounted解析后|挂载后
mounted() {
// this.userName = "王五";
// document.getElementsByClassName("box")[0].style.color = "red";
this.timeValue = setInterval(()=>{
this.opacity-=0.01;
if(this.opacity<=0){
this.opacity=1;
}
},10)
},
// beforeUpdate更新前
beforeUpdate() {
// setTimeout(()=>{
// this.userName = "李四";
// },1000)
},
// updated更新后
updated() {
// this.userName = "王五";
},
// beforeDestroy销毁前
beforeDestroy() {
clearInterval(this.timeValue);
console.log("触发了销毁前");
},
// destroyed销毁后
destroyed() {
console.log("触发了销毁后");
},
// 局部过滤器
filters:{
times(value,str="YYYY年MM月DD日 HH:mm:ss"){
console.log(value);
return dayjs(value).format(str);
return new Date(value);
let a = new Date(value);
return a.toISOString();
let day = parseInt(value/1000/60/60/24);
let days = day;
let year = 1970;
while (day>=366) {
if(year%4==0){
day-=366;
}else{
day-=365;
}
year+=1;
}
let month = 1;
while(day>=28){
if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
if(day<31){
break;
}
day-=31;
}else if(month==4||month==6||month==9||month==11){
if(day<30){
break;
}
day-=30;
}else if(month==2&&year%4==0){
if(day<29){
break;
}
day-=29;
}else{
if(day<28){
break;
}
day-=28;
}
month+=1;
}
console.log(year+"年"+month+"月"+(day+1)+"日");
}
}
})
console.log(vm);