一.Vue生命周期
一:简介:生命周期
a:又名生命周期回调函数、生命周期函数、生命周期钩子
b:是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数
c:生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的
d:生命周期函数中的 this 指向是vm或组件实例对象
简述:
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数。
二.如图我们可以简单了解vue的生命周期
三.简述生命周期中的一些属性
属性值如下:
1.beforeCreate初始化之前,不能获取data中的数据
2.created初始化之后,获取data中的数据
3.beforeMount解析前|挂载前
4.mounted解析后|挂载后
5.beforeUpdate更新前
6.updated更新后
7.beforeDestroy销毁前(($destroy方法被调用的时候就会执行),一般在这里善后:清除计时器、清除非指令绑定的事件等等…’))
8.destroyed销毁后()
四.代码示例:
<h1 v-show="bool" class="box">{{userName}}</h1>
<button @click="func()">点击</button>
<hr>
<h1 :style="{opacity}">我是测试文本</h1>
<button @click="opacity=1">点击显示</button>
<button @click="stop()">停止</button>
Vue.config.productionTip = false;
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("触发了销毁后");
},
五.组件生命周期函数的分类图
通过前面的讲解,我这还有一张图 大家可以看看
二.过滤器
一、Vue中的过滤器是什么
过滤器(filter)是输送介质管道上不可缺少的一种装置,大白话,就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用处理,我们也可以理解其为一个纯函数。
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
但是:Vue3
中已废弃filter
注意:过滤器分为全局过滤器,局部过滤器
二.全局过滤器
全局过滤器语法:
Vue.filter("名称",function(value){})
代码示例:
<h1>{{time}}</h1>
<h1>{{time|times}}</h1>
<h1>{{time|times|myTime}}</h1>
Vue.filter("myTime",function(value){
// console.log(value);
// return value.slice(0,11);
// return value.substring(0,11);
return value.substr(0,11);
})
三.局部过滤器
语法:
new Vue({filters:{名称(value){}}}),
代码示例:
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)+"日");
}
四.总结过滤器
局部过滤器优先于全局过滤器被调用
一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右
过滤器
1.局部过滤器new Vue({filters:{名称(value){}}}),
全局过滤器Vue.filter("名称",function(value){})
2.返回一个新的数据
3.使用时|名称, 多个过滤器串联,拿取的值是前一个
让我们来试试官方案例:
如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>过滤器</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
</head>
<body>
<div id="root">
<h2>时间</h2>
<h3>当前时间戳:{{time}}</h3>
<h3>转换后时间:{{time | timeFormater()}}</h3>
<h3>转换后时间:{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
<h3>截取年月日:{{time | timeFormater() | mySlice}}</h3>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
// 全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,11)
})
new Vue({
el:'#root',
data:{
time:1626750147900,
},
// 局部过滤器
filters:{
timeFormater(value, str="YYYY年MM月DD日 HH:mm:ss"){
return dayjs(value).format(str)
}
}
})
</script>
</html>