VUE基础篇Part1 Part2（生命周期钩子，指令，过滤器）

短命女 2022-01-27 13:47 181阅读 0赞

VUE基础篇，包括以下内容：  
1、生命周期、钩子  
2、指令  
3、过滤器

## 1、生命周期、钩子 ##

**生命周期：**  
Vue实例从创建到销毁的过程，就是生命周期。  
从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

**生命周期钩子：**  
就是可以让你在页面生成的不同阶段执行动作的api，作用就是只要页面到了这个阶段就会触发这个对应钩子里的js

**钩子共分为8个阶段：**  
1.beforeCreate — created  
2.beforeMount — mounted  
3.beforeUpdate — updated  
4.beforeDestroy — destroyed  
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

**创建前/后：** 在beforeCreated阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。

**载入前/后：** 在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

**更新前/后：** 当data变化时，会触发beforeUpdate和updated方法。

**销毁前/后：** 在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

## 2、指令 ##

今天学习的基础的指令有四个：  
**1、v-text: 解析文本  
2、v-html：解析html  
3、v-bind: 绑定元素属性  
4、v-on: 绑定事件**

举例说明：  
**1、v-text： 解析文本**  
//页面中输出 苹果

var app = new Vue({ 
    	el:"#app",
    	data:{ 
    		apple:"苹果"
    	}
    })

**2、v-html 解析html**  
// 看我会不会变蓝 这几个字变为蓝色

data:{ 
    	blue:'<span style="color:blue">看我会不会变蓝</span>'
    }

**3、v-bind 绑定元素**  
//页面出现一块高度为30px宽度为100%的红色方块

data:{ 
    	className:'changeRed'
    }

**4、v-on 绑定事件**  
//每次点击按钮都会加1

data:{ 
    	num:0
    },
    methods:{ 	//方法要放在与data同级的methods当中
    	addNum:function(){ 
    		this.num = this.num + 1 //vue中的this就是这个实例本身
    	}
    }

## 3、过滤器 ##

过滤器：传入一个值，可以选择性的过滤掉不需要显示的数据（如网站上显示的时间）

<div id="app">
    	{
       {time | formateDate}}
    </div>

var addZero = function(value){ 	//如果小于10的话就往前面补个0
    	return value > 10? value : '0' + value
    }
    var app = new Vue({ 
    	el: "#app",
    	data: { 
    		time: new Date()
    	},
    	filters:{ 	//定义一个过滤器
    		formateDate:function(value){ 	//必须传入一个值用来过滤，默认是value
    			var time = new Date(value)
    			var year = time.getFullYear()
                var month = addZero(time.getMonth() + 1)   //这里的月份会比实际月份少1，所以加上1
                var day = addZero(time.getDay())
                var hour = addZero(time.getHours())
                var min = addZero(time.getMinutes())
                var sec = addZero(time.getSeconds())
    
    			return year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec
    		}
    	},
    	//让这个时间每秒钟会在网站上自动更新,mounted表示渲染完成后的状态
    	mounted:function{ 
    		var _this = this
    		this.timer = setInterval(()=>{ 
    			_this.time = new Date()
    		},1000) 
    	},
    	//定时器每次用完之后要销毁，所以用beforeDestory
    	beforeDestory:function{ 
    		if(this.timer){ 
    			clearInterval(this.timer)
    		}
    	}
    })