vue生命周期和vue请求+动画+组件

1.生命周期

（1）beforeCreate()

这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它

 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化

（2）created() 

这是第二个生命周期函数

 在 created 中，data 和 methods 都已经被初始化好了！

 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作

（3）beforeMount()

这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中

在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串

（4）mounted()

这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了

mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动

（5）beforeUpdate()

这时候，表示 我们的界面还没有被更新【数据被更新了吗？  数据肯定被更新了

当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步

（6）updated()

updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的

（7）beforedestroyed()

退出操作之前

(8)destroyed()

关闭缓存

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'ok'
      },
      methods: {
        show() {
          console.log('执行了show方法')
        }
      },
      beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
        // console.log(this.msg)
        // this.show()
        // 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
      },
      created() { // 这是遇到的第二个生命周期函数
        // console.log(this.msg)
        // this.show()
        //  在 created 中，data 和 methods 都已经被初始化好了！
        // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
      },
      beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
        // console.log(document.getElementById('h3').innerText)
        // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
      },
      mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
        // console.log(document.getElementById('h3').innerText)
        // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
      },


      // 接下来的是运行中的两个事件
      beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？  数据肯定被更新了】
        /* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是：' + this.msg) */
        // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
      },
      updated() {
        console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是：' + this.msg)
        // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
      }
    });
  </script>

 2.axios的使用

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>（1）get请求

(1)get请求

//生命周期

            created() {

                axios.get(this.baseUrl + "/weChat/applet/course/banner/list?number=3").then((res) => {

                    // console.log(res.data.data);

                    this.swiperList = res.data.data

                    // console.log(this.swiperList);

                    // 初始化  

                    var swiper = new Swiper('.swiper-container', {

                        spaceBetween: 30,

                        centeredSlides: true,

                        autoplay: {

                            delay: 2500,

                            disableOnInteraction: false,

                        },

                        pagination: {

                            el: '.swiper-pagination',

                            clickable: true,

                        },

                        navigation: {

                            nextEl: '.swiper-button-next',

                            prevEl: '.swiper-button-prev',

                        },

                    });

                })

            }

(2)post请求

created() {

                axios.post(this.baseUrl + '/weChat/applet/subject/list', { enable: 1 }).then((res) => {

                    // console.log(res);

                    this.optionList = res.data.rows

                })

            }

与ajax的get或者post用法相同

3.动画

<style>
            * {
                text-align: center;
            }

            button {
                margin-top: 200px;
                padding: 10px 20px;
            }

            p {
                width: 20px;
                height: 20px;
                background-color: red;
                border-radius: 50%;
                position: absolute;
            }

            /* 定义进入和离开时候的过渡状态 */
            .fade-enter-active,
            .fade-leave-active {
                transition: all 5s ease;
            }

            ​

            /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
            .fade-enter,
            .fade-leave-to {
                opacity: 0;
                transform: translate(720px,220px);
                /* transform: translateY(300px); */
            }
        </style>
    </head>

    <body>
        <div id="app">
            <transition name="fade">
                <p v-show="isshow">*</p>
            </transition>
            <button @click="getplay">果宝特攻归位</button>
        </div>
    </body>
    <script>
        new Vue({
            el: '#app',
            data: {
                isshow:false
            },
            methods: {
                getplay(){
                    this.isshow=!this.isshow
                }
            }
        })
    </script>

 4.动画钩子函数

定义 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;

}

4.组件

（1）创建的四种方法

1.使用 Vue.extend 配合 Vue.component 方法： 写在js中和vue之前

var login = Vue.extend({

    template: '<h1>登录</h1>'富文本
  });
  Vue.component('login', login);  单引号常量，无引号变量 在html直接引用login变量标签

2.直接使用 Vue.component 方法：

Vue.component('register', {

    template: '<h1>注册</h1>'
  });

3.将模板字符串，定义到新的script标签中：

<script id="tmpl" type="x-template">

    <div><a href="#">登录</a> | <a href="#">注册</a></div>
  </script>

同时，需要使用 Vue.component 来定义组件：

Vue.component('account', {

    template: '#tmpl'
  });

4.将模板字符串，定义到template标签中：不用加入新的script标签中

< template id="tmpl"> tmpl可以直接在body里当标签使用

    <div><a href="#">登录</a> | <a href="#">注册</a></div>
  </ template >

同时，需要使用 Vue.component 来定义组件：

Vue.component('account', {

    template: '#tmpl'
  });

注意：组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

不可同名兄弟多个

(2)组件中展示数据和响应事件

Vue.component('account', {

    template: '#tmpl',
    data() {与vue不同的是此处为函数
      return {
        msg: '大家好！'
      }
    },
    methods:{
      login(){
        alert('点击了登录按钮');
      }
    }
  });

在子组件中，如果将模板字符串，定义到了script标签中，那么，要访问子组件身上的data属性中的值，需要使用this来访问