标签：没有 mod 钩子函数 bounce mil 定时器 需要 style xxx
生命周期就是从出生到死亡，从创建到销毁的一个过程。
vue中的生命周期的概念，是我们的一个重点内容。不仅仅是在面试中，在开发项目的过程中。不同的生命周期阶段，数据和希望的逻辑都不太一样。
它在vue中是钩子函数，函数方法。
一共有八大生命周期函数：
创建前 beforeCreate
创建 created
挂载前 beforeMount
挂载 mounted
更新之前 beforeUpdate
更新 updated
销毁之前 beforeDestroy
销毁 destroyed
可查看的网址1、：https://www.jianshu.com/p/3d1c3b194ea5
可查看的网址1、：https://www.cnblogs.com/AlbertP/p/10754880.html
<div id="app"> <h1>{{msg}}</h1> <div> <input type="text" v-model=‘msg‘> </div> </div> <button>点击我销毁</button> <script> let vm = new Vue({ el: ‘#app‘, data: { msg:‘葡萄美酒夜光杯‘ }, //template:‘<h1>我是Template模板</h1>‘, // render(createElement){ // return createElement(‘h1‘,‘我是render函数渲染的内容‘) // }, watch: { }, computed: { }, methods: { getBanner(){ //调取轮播图接口 $.ajax({ url:‘www.zuibang/banner‘, data:{} }) } }, //生命周期，未来在应用的时候也不用每一个都写，你需要谁你就写谁。 beforeCreate() { //初始化---创建之前，没有el元素，data属性也没有值 console.log(this.$el,‘元素‘) console.log(this.$data,‘data属性‘) console.log(this.msg,‘定义的属性内容‘) console.log(‘----创建之前----‘) }, created() { //创建的时候，没有el元素，出现data属性 console.log(this.$el,‘元素‘) console.log(this.$data,‘data属性‘) console.log(this.msg,‘定义的属性内容‘) console.log(‘----创建----‘) }, beforeMount() { //在挂载之前,出现el元素，出现data属性，这个阶段data属性并没有渲染到DOM中，只是出现了{{}},虚拟DOM console.log(this.$el,‘元素‘) console.log(this.$data,‘data属性‘) console.log(this.msg,‘定义的属性内容‘) console.log(‘----挂载之前----‘) }, mounted() { //生命周期执行到挂载的时候，出现el元素，有data属性，这个时候数据被渲染到了 el元素中。 //这个生命周期函数，就我们最常用，这里面可以写，轮播图，定时器，存储，调取接口，调用ajax(),调取axios //页面一加载肯定走这个函数 //挂载之前的四个函数，页面一加载就执行，而且只执行一次 console.log(this.$el,‘元素‘) console.log(this.$data,‘data属性‘) console.log(this.msg,‘定义的属性内容‘) console.log(‘----挂载----‘) // this.getBanner() }, beforeUpdate() { //当数据有变化的时候会触发当前函数。这个时候不会触发整个页面的重新渲染，只是局部数据重新渲染，所以前四个生命周期函数并没有被重新触发。 console.log(this.$el,‘元素‘) console.log(this.$data,‘data属性‘) console.log(this.msg,‘定义的属性内容‘) console.log(‘----更新之前----‘) }, updated() { console.log(this.$el,‘元素‘) console.log(this.$data,‘data属性‘) console.log(this.msg,‘定义的属性内容‘) console.log(‘----更新----‘) }, beforeDestroy() { console.log(this.$el,‘元素‘) console.log(this.$data,‘data属性‘) console.log(this.msg,‘定义的属性内容‘) console.log(‘----销毁之前----‘) }, destroyed() { console.log(this.$el,‘元素‘) console.log(this.$data,‘data属性‘) console.log(this.msg,‘定义的属性内容‘) console.log(‘----销毁----‘) }, }) //.$mount(‘#app‘) 手动挂载 console.log(vm,‘vue实例‘) //创建一个销毁事件 let btn = document.querySelector(‘button‘) btn.onclick = function(){ console.log(‘我被触发了‘) //调取生命周期销毁方法 vm.$destroy() } </script>
第一道：页面加载的时候，会触发几个钩子函数（生命周期函数）
触发四个
创建前 beforeCreate
创建 created
挂载前 beforeMount
挂载 mounted
第二道：你经常使用的生命周期函数有哪些？
两个，mounted(){}，挂载。 updated(){}更新
第三道：你如何理解生命周期图示
创建之前所有内容都是undefined，没有el元素也没有data属性。创建的时候依然没有el元素，这个时候出现了data属性。
在挂载之前出现大量的操作，首先判断有没有el,有el生命周期继续执行，没有el分两种情况①什么操作都没有再做，生命周期结束。
②手动去挂载，执行$mount(‘挂载点‘),生命周期继续执行。el元素找到挂载点之后，它判断是否有template模板。如果有template模板，
直接编译渲染,如果这个时候存在render函数，优先走render。如果没有就用外部的html作为模板编译，其实就是你自己定义的那个容器。
（可以看出优先级的比较，render>template>outerHTML）挂载的时候用这个实际内容去替换之前用{{}}去占位的内容。
当data数据被修改的时候，触发更新之前，然后虚拟DOM重新渲染。就更新了。当你想要销毁的时候，就是执行销毁函数，你要调用$destory这个方法
场景：
切换 v-if和v-show
组件之间切换
路由
过渡动画的过程（6种状态）
离开（leave）
离开之前 leave
离开过程中 leave-active
离开之后 leave-to
进入（enter）
进入之前 enter
进入过程中 enter-active
进入之后 enter-to
<!-- 自定义动画--> <style> .box { width: 100px; height: 100px; background: red; position: absolute; left: 50px; top: 100px; } .aa-leave { left: 100px } .aa-leave-active { transition: all 1s; } .aa-leave-to { left: 1100px; } .aa-enter { left: 1200px } .aa-enter-active { transition: all 0.5s; } .aa-enter-to { top: 400px; left: 200px; } </style> </head> <body> <div id="app"> <button @click=‘getShow‘>点击我有惊喜</button> <!-- 想要那个标签块出现动画，就在哪个标签的外面加transition标签 --> <transition name=‘aa‘> <div v-show=‘flag‘ class="box"></div> </transition> </div> <script> new Vue({ el: ‘#app‘, data: { flag: true }, watch: { }, computed: { }, methods: { //出现消失事件 getShow() { this.flag = !this.flag } } }) </script>
除了自定义方式，我们也可以掉动画库
官网地址：https://daneden.github.io/animate.css/
安装方式推荐NPM ---- npm install animate.css
CDN方式（可以直接引入，也可以打开另存为文件再引入）
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css
注意点：
一般在项目中我们的过渡动画都不会全写上，会造成眼花缭乱。所以我们就写一种,一般选择进来的动画 enter-active-class
<div id="app"> <button @click=‘getShow‘>点击我有惊喜</button> <!-- 想要那个标签块出现动画，就在哪个标签的外面加transition标签 --> <transition leave-active-class=‘animated rotateOut‘ enter-active-class=‘animated bounceInRight‘> <!-- 建议只写进入的动画否则动画样式过多 容易页面混乱 --> <div class="one" v-if=‘flag‘> 我是第一块内容：举杯邀明月，对影成三人 </div> </transition> <transition leave-active-class=‘animated rotateOut‘ enter-active-class=‘animated bounceInLeft‘> <div class="two" v-if=‘!flag‘> 我是第二块内容：五花马，千金裘。。。 </div> </transition> </div> <script> new Vue({ el:‘#app‘, data:{ flag:true }, watch: { }, computed: { }, methods: { //出现消失事件 getShow(){ this.flag = !this.flag } } }) </script>
在vue中提供方法，你可以自己定义过滤去去格式化你的文本。格式化的就是插值表达式的内容。
过滤符： |
项目中经常用到的过滤器方法是：时间戳的转换
后端返给前端的事件数据，一定不是你想要的。一般显示时间的格式 2020/02/28
后端返回来的数据格式是时间戳1582872812927（获取当前时间时间戳，new Date().getTime()）
定义过滤器
过滤器的方法
局部过滤器在vue实例中有一个filters：{
//对电话号码进行格式化 188****5566
toTel(n){
// return n.slice(0,3)+"****"+n.slice(7)
return n.substr(0,3)+"****"+n.substring(7)
}
}
2种
第一个是局部过滤器
<div id="app"> <h1>{{name | toUpper}}</h1> <h1>全是小写---{{name| toLower}}</h1> <hr> <h2>中奖名单</h2> <ul> <li v-for=‘item in dataList‘ :key=‘item.id‘> <span>姓名：{{item.name}}</span>--- <span>电话号码：{{item.tel | toTel}}</span> </li> </ul> </div> <script> new Vue({ el:‘#app‘, data:{ name:‘zhangDaDa‘, dataList:[ { id:1, name:‘李易峰‘, tel:‘18819012345‘ }, { id:2, name:‘杨幂‘, tel:‘17719018888‘ }, { id:3, name:‘四字弟弟‘, tel:‘16619444345‘ }, { id:4, name:‘珠穆朗玛峰‘, tel:‘15677823412‘ } ] }, watch: { }, computed: { }, methods: { }, filters:{ //转换大写的方法 toUpper(n){ //n是你要转化的内容 console.log(n) return n.toUpperCase() }, //转换成小写的方法 toLower(n){ return n.toLowerCase() }, //对电话号码进行格式化 188****5566 toTel(n){ // return n.slice(0,3)+"****"+n.slice(7) return n.substr(0,3)+"****"+n.substring(7) } } }) </script>
第二个是全局过滤器（推荐）
官方提供全局方法 Vue.filter() 这个方法中有两个参数，第一个参数是过滤器的名称，第二个参数是过滤器的所有内容
<div id="app"> <h1>当前商品单价是---{{price | toPrice}}</h1> </div> <script> //在项目中我们都用全局过滤器 Vue.filter(‘toPrice‘,(n)=>{ return n.toFixed(2) }) new Vue({ el:‘#app‘, data:{ price:18.889 }, watch: { }, computed: { }, methods: { } }) </script>
过滤器传参
<div id="app"> <h1>{{msg |toUpper }}</h1> <h2>产品需求就转化10个字符 其他的原样输出</h2> <h1>{{msg |toUpper(10) }}</h1> <!--toUpper(这里传入实参)--> <h2>产品需求就转化500个字符 其他的原样输出</h2> <h1>{{msg |toUpper(500) }}</h1> <!--toUpper(这里传入实参)--> </div> <script> //第一参数n是要转化的内容，第二个参数是你传递的实参 Vue.filter(‘toUpper‘,(n,x)=>{ console.log(n,‘nnnnnn‘) console.log(x,‘xxxxxx‘) //逻辑优化，首先判断一下n是否有值 if(x==undefined){ return n.toLowerCase() } if(x<n.length){ return n.slice(0,x).toUpperCase()+n.slice(x) } return n.toUpperCase() }) new Vue({ el:‘#app‘, data:{ msg:‘How do I love thee? Let me count the ways.‘ }, watch: { }, computed: { }, methods: { } }) </script>
过滤器案例
标签：没有 mod 钩子函数 bounce mil 定时器 需要 style xxx
原文地址：https://www.cnblogs.com/3526527690qq/p/12388767.html
