axios的使用,Vue中的动画

本文介绍了Vue.js2.0中如何使用axios进行HTTP请求,包括GET和POST方法。同时,讲解了Vue的CSS动画实现,以及如何定义和使用Vue组件,包括数据绑定和事件处理。最后提到了全局组件的四种定义方式。
摘要由CSDN通过智能技术生成

1.axios的使用

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。

安装方法

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

使用 npm:

npm install axios

(1)GET请求

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

            })

(2)POST请求

参数是 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)

            }

 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('点击了登录按钮');
      }
    }
  });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值