Vue基础第三天

一、生命周期

1.什么是生命周期？

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！

2.Vue生命周期

beforeCreate：初始化尚未完成，data数据，methods方法都未挂在vue实例上（ 一般用于页面重定向）

created：第一个能操作data数据的生命周期（一般用于接口请求+数据初始化）

beforeMount： 虚拟dom挂载前，此时页面尚未更新

mounted：dom元素挂载后，如果需要操作dom,可以在此生命周期执行

beforeUpdate：可以执行0-多次

updated：页面和数据已经保持同步，都是最新的

beforeDestroy：销毁之前，一般用于清空计时器，解除事件绑定

destroyed：销毁之后

3. axios的使用

post请求方法

       // 内置对象
      // let formData=new formData()
      // formData.append(key,value)


      let formurl=new URLSearchParams()
      formurl.append('type','free')
      formurl.append('pageNum',1)
      formurl.append('pageSize',10)
      // post
      axios.post(this.baseurl+'/weChat/applet/course/list/type',formurl).then(res=>{
        console.log(res);
      })

      //json对象和json字符串时，请求方式                              
      axios.post(this.baseurl+"/weChat/applet/course/list/type",formurl).then(res=>{
         console.log(res);
       })

get请求方法

         axios.get(this.baseurl + "/weChat/applet/course/banner/list?number=5")
            .then((res) => {
            console.log(res);
         });

4.Vue中的动画

      .v-enter：动画进入时起始位置

      .v-enter-to：动画进入时目的位置

      .v-enter-active：动画进入过渡的状态

      .v-leave：动画离开时起始位置

      .v-leave-to：动画离开时目的位置

      .v-leave-active：动画离开过渡的状态

控制不同的transition标签只需要给对应的加上name属性，再将css中原来v的位置替换成所写的name的值

        //style
        .zs-enter{
            transform: translateX(200px);
        }
        .zs-enter-to,.zs-leave{
            transform: translateX(0px);
        }
        .zs-enter-active,.zs-leave-active{
            transition: all 2s;
        }
        .zs-leave-to{
            transform: translateX(-200px); 
        }

        //script
        <transition name="zs">
            <div class="box" v-show="flag"> {{msg}}</div>
        </transition>

5.使用动画钩子函数

定义 transition 组件以及三个钩子函数：

<div id="app">
  <input type="button" value="切换动画" @click="isshow = !isshow">
  <transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter">
    <div v-if="isshow" class="show">OK</div>
  </transition>
</div>

定义三个 methods 钩子方法：

methods: {
      beforeEnter(el) { // 动画进入之前的回调
        el.style.transform = 'translateX(500px)';
      },
      enter(el, done) { // 动画进入完成时候的回调
        el.offsetWidth;
        el.style.transform = 'translateX(0px)';
        done();
      },
      afterEnter(el) { // 动画进入完成之后的回调
        this.isshow = !this.isshow;
      }
}

定义动画过渡时长和样式：

.show{
transition: all 0.4s ease;
}

6. v-for的列表过渡

定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：

<div id="app">
  <input type="text" v-model="txt" @keyup.enter="add">
  <transition-group tag="ul" name="list">
    <li v-for="(item, i) in list" :key="i">{{item}}</li>
  </transition-group>
</div>