VUE-生命周期-动画/过渡-过滤器

一、实例的生命周期

1. vue对象的生命周期

1). 初始化显示
* beforeCreate()
* created()
* beforeMount()
* mounted(): 挂载

2). 更新状态
* beforeUpdate()
* updated()

3). 销毁vue实例: vm.$destory()
* beforeDestory()
* destoryed()

 <div id="demo">
        <button @click='destoryVue'>销毁vue</button>
        <p v-show="ptext">我是一个快乐的小per</p>
    </div>


 <script>
        const vm=new new Vue({
            el:'#demo',
            data:{
              ptext:true,
            },
            //初始化显示之后就立即调用
            mounted(){
             this.timer= setInterval(() => {//使用箭头函数，才能保证当前this指向data中的数据
                console.log("123456")
                    this.ptext=!this.ptext;
                }, 1000);
            },
            beforeDestroy() {
                //执行死亡之前的首位工作
                clearInterval(this.timer);
            },
            methods:{
                //点击按钮销毁p
                destoryVue(){
                //销毁vue实例
                    this.$destroy();
                }
            }
        })
    </script>

如果不使用beforeDestory()，控制台会一直输出数据，因为控制台数据不分配内容，是属于数据溢出，使用beforeDestory()就可以停止。

2. 常用的生命周期方法

created()/mounted(): 发送ajax请求, 启动定时器等异步任务
beforeDestory(): 做收尾工作, 如: 清除定时器

二、动画/过渡

1. vue动画的理解

操作css的trasition或animation
vue会给目标元素添加/移除特定的class

2. 基本过渡动画的编码

1). 在目标元素外包裹
2). 定义class样式
①指定过渡样式: transition
②指定隐藏时的样式: opacity/其它

3. 过渡的类名

xxx-enter-active: 指定进入过程transition
xxx-leave-active: 指定隐藏过程transition
xxx-enter: 进入之前，指定隐藏时的样式
xxx-leave-to：离开之后，指定隐藏时的样式

/*指定显示、隐藏过渡样式*/
 .xxx-enter-active,.xxx-leave-active{
         transition: opacity 1s;/*更多样式是在1s内透明度变化*/
        }
 /*指定隐藏时的样式*/
 .xxx-enter, .xxx-leave-to {
        opacity: 0;

效果点击按钮，文本在1s内有透明度变化，慢慢消失

 <button @click="isShow = !isShow">切换</button>
      <transition name="xxx">
          <p v-show="isShow">我是一个快乐的小per</p>
     </transition>
      

实例：

  /*指定显示过滤样式*/
        .move-enter-active{
        transition: all 1s;/*all可以改变所有的样式，显示时间为1s*/
    }
       /*指定隐藏过滤样式*/
       .move-leave-active{
        transition: all 3s;/*all可以改变所有的样式，隐藏时间为3s*/
    }
     /*指定隐藏时的样式*/
     .move-enter, .move-leave-to {
      opacity: 0;
      transform:translate(20px);/*向右移动20px*/
    }

动画的实例：

 <div id="example-2">
        <button @click="show = !show">Toggle show</button>
        <br>
        <transition name="bounce">
          <p v-if="show" style="display: inline-block">Lorem</p>
        </transition>
      </div>

display: inline-block 随文本的宽度变化

<style>
        .bounce-enter-active {
          animation: bounce-in 5s;
        }
        .bounce-leave-active {/*reverse将进入时的样式反过来显示*/
          animation: bounce-in 5s reverse;
        }
        @keyframes bounce-in {/*@keyframes创建动画*/
          0% {/*对时间起作用，0%是5s的时候*/
            transform: scale(0);
          }
          50% {/*50%是2.5s的时候，放大到1.5倍*/
            transform: scale(1.5);
          }
          100% {/*对时间起作用，100%是0s的时候*/
            transform: scale(1);
          }
        }
      </style>

三、过滤器

1. 理解过滤器

功能: 对要显示的数据进行特定格式化后再显示
注意: 并没有改变原本的数据, 可是产生新的对应的数据

2. 编码

1). 定义过滤器

 Vue.filter(filterName, function(value[,arg1,arg2,...]){
      // 进行一定的数据处理
      return newValue
    })

2). 使用过滤器

<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>

实例需求: 对当前时间进行指定格式显示

<div id="test">
  <h2>显示格式化的日期时间</h2>
  <p>{{time}}</p>
  <p>最完整的: {{time | dateString}}</p>
  <p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
<script>
  // 定义过滤器，value的值就是time的值,format是指定的格式
  Vue.filter('dateString', function (value, format) {

    return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss');
        //moment().format('YYYY-MM-DD HH:mm:ss'); 对当前时间进行格式化       
  })

  new Vue({
    el: '#test',
    data: {
      time: new Date()
    },
    mounted () {
      setInterval(() => {
        this.time = new Date()
      }, 1000)
    }
  })
</script>