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

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： 解析文本 //页面中输出 苹果

<div id="app"> <span v-text:"apple"></span> </div> var app = new Vue({ el:"#app", data:{ apple:"苹果" } })

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

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

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

<style> .changeRed{ height:30px; background:red; } </style> <div v-bind:class="className"></div> data:{ className:'changeRed' }

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

<button v-on:click="addNum">{{num}}</button> 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) } } })