一、
先引用，然后
created(){
axios.post(this.baseUrl + '/weChat/applet/course/list/type', formurl)
.then((res) => {})
.catch()
},
二、
使用过渡类名
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;
}
}
});
定义两组类样式：
/* 定义进入和离开时候的过渡状态 */
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s ease;
position: absolute;
}
/* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(100px);
}
6.2 使用第三方css动画库
导入动画类库：
<link rel="stylesheet" type="text/css" href="./lib/animate.css">
定义 transition 及属性：
<transition enter-active-class="fadeInRight" leave-active-class="fadeOutRight"
:duration="{ enter: 500, leave: 800 }">
<div class="animated" v-show="isshow">动画哦</div>
</transition>
6.3 使用动画钩子函数
定义 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.4 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 = '';
}
}
});
6.5 列表的排序过渡
<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。
v-move 和 v-leave-active 结合使用，能够让列表的过渡更加平缓柔和：
.v-move{
transition: all 0.8s ease;
}
.v-leave-active{
position: absolute;
}
三、
全局组件定义的四种方式
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'文章来源：https://www.toymoban.com/news/detail-466414.html
});文章来源地址https://www.toymoban.com/news/detail-466414.html
到了这里，关于axios的使用、Vue中的动画、vue组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
