axios的使用、动画以及组件

1.axios的使用

（1）GET请求

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

                this.list = res.data.data;

            })

（2）POST请求

//参数是 form data类型let formurl = new FormData()

//参数是 form URL类型let formurl = new URLSearchParams()

getCourseList(type = "free", pageNum = 1, pageSize = 10) {

                let formUrl = new URLSearchParams()

                formUrl.append('type', type);

                formUrl.append('pageNum', pageNum)

                formUrl.append('pageSize', pageSize)

                return axios.post(this.baseUrl + '/weChat/applet/course/list/type', formUrl)

            }

//参数是JSON类型（分为json对象和json字符串）

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

                    // console.log(res);

                    this.courseTypeTitleList = res.data.rows;

                }

2.vue动画

CSS

  .v-enter,
  .v-leave-to {
         transform: translate(0px, 0px);
    }

    .v-enter-to,
    .v-leave {
         transform: translate(1250px, 480px);
    }

    .v-enter-active,
    .v-leave-active {
         transition: all 2s;
    }

HTML结构：

<div id="app">

<input type="button" value="动起来" @click="myAnimate">
  <!-- 使用 transition 将需要过渡的元素包裹起来 -->
  <transition name="fade">
    <div v-show="isshow">动画哦</div>
  </transition>
</div>

VM 实例：

// 创建 Vue 实例，得到 ViewModel

var vm = new Vue({
el: '#app',
data: {
  isshow: false
},
methods: {
  myAnimate() {
    this.isshow = !this.isshow;
  }
}

});

定义三个 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;
      }
}

v-for的列表过渡

定义过渡样式：

<style>

  .list-enter,
  .list-leave-to {
    opacity: 0;
    transform: translateY(10px);
  }
​
  .list-enter-active,
  .list-leave-active {
    transition: all 0.3s ease;
  }
</style>

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

定义 VM中的结构：

  // 创建 Vue 实例，得到 ViewModel

  var vm = new Vue({
    el: '#app',
    data: {
      txt: '',
      list: [1, 2, 3, 4]
    },
    methods: {
      add() {
        this.list.push(this.txt);
        this.txt = '';
      }
    }
  });

3.全局组件定义的四种方式

        1.使用 Vue.extend 配合 Vue.component 方法：

var login = Vue.extend({

    template: '<h1>登录</h1>'
  });
  Vue.component('login', 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标签中：(最重要)

< template id="tmpl">

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

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

Vue.component('account', {

    template: '#tmpl'
  });

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

4.组件中展示数据和响应事件

在组件中，data需要被定义为一个方法，为了数据隔离，例如：

Vue.component('account', {
    template: '#tmpl',
    data() {
      return {
        msg: '大家好！'
      }
    },
    methods:{
      login(){
        alert('点击了登录按钮');
      }
    }
  });

举一个例子

（1）script中

 Vue.component('father', {
        template: '#father'
    })
    Vue.component('son', {
        template: '#son',
        data() {
            return {
                baseUrl: 'https://wkt.shangyuninfo.cn',
                courseList: []
            }
        },
        props: {
            coursetype: {
                type: [String, Number]
            }
        },
        created() {
            console.log(this.coursetype);
            let formUrl = new URLSearchParams();
            formUrl.append('type', this.coursetype)
            formUrl.append('pageNum', 1)
            formUrl.append('pageSize', 10)
            axios.post(this.baseUrl + '/weChat/applet/course/list/type', formUrl).then(res => {
                // console.log(res);
                this.courseList = res.data.rows
            })
        }
    })

（2）body里页面内容之外定义 

<template id="father">
        <div>
            <son coursetype="free">免费</son>
            <son coursetype="boutique">精品</son>
            <son coursetype="discount">限时折扣</son>
        </div>
    </template>
    <template id="son">
        <div class="disCountCourses">
            <div class="disCountCoursesTitle">
                <img src="http://course.myhope365.com/img/time-limit-icon.12673615.png" alt="">
                <h2>
                    <slot></slot>课程       //插槽
                </h2>
            </div>
            <div class="disCountCoursesSection">
                <a v-for="(item,index) in courseList" :key="item.courseId"
                    href="'./detail.html?courseId='+item.courseId" target="_blank">
                    <div class="CoursesSectionPart">
                        <img :src="item.coverFileUrl" alt="">
                        <div class="CoursesSectionPartTitle">{{item.courseTitle}}</div>
                        <div class="CoursesSectionPartCourseNum">共{{item.subSectionNum}}节课 |
                            共{{item.participationsCount}}人报名</div>
                        <div v-if="item.isFree==1" class="CoursesSectionPartCourseType">免费</div>
                        <div v-else class="CoursesSectionPartCourseType">&yen;{{item.discountPrice}}
                            <del>&yen;{{item.coursePrice}}</del>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </template>

（3）内容中使用直接使用定义的标签：<father></father>

5.slot插槽

什么是插槽？

        插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。