动态组件
有的时候，我们需要在多个不同的组件之间进行切换。虽然我们可以通过 v-if 来处理，但是会比较麻烦，vue 提供了一个更方便的方式来处理这种情况
component 组件
component 是 vue 内置的一个组件，它提供一个 is 属性用来动态渲染不同的组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.current {
background: yellow;
}
</style>
</head>
<body>
<div id="app">
<button @click="goto('InBox')" :class="{'current': currentComponent==='InBox'}">收邮件</button>
<button @click="goto('PostMail')" :class="{'current': currentComponent==='PostMail'}">发邮件</button>
<button @click="goto('RecycleBin')" :class="{'current': currentComponent==='RecycleBin'}">垃圾箱</button>
<hr>
<component :is="currentComponent"></component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const InBox = {
data() {
return {
items: [
'111111',
'22222222222',
'aaaaaaaa',
'3333333'
]
}
},
template: `
<div>
<ul>
<li v-for="item of items">
<input type="checkbox" />
{{item}}
</li>
</ul>
</div>
`,
created() {
console.log('InBox:created');
},
destroyed() {
console.log('InBox:destroyed');
}
}
const PostMail = {
template: `
<div>PostMail</div>
`,
created() {
console.log('PostMail:created');
},
destroyed() {
console.log('PostMail:destroyed');
}
}
const RecycleBin = {
template: `
<div>RecycleBin</div>
`,
created() {
console.log('RecycleBin:created');
},
destroyed() {
console.log('RecycleBin:destroyed');
}
}
let app = new Vue({
el: '#app',
data: {
currentComponent: 'InBox'
},
components: {
InBox,
PostMail,
RecycleBin
},
methods: {
goto(target) {
this.currentComponent = target;
}
}
});
</script>
</body>
</html>
我们会发现，当组件切换的时候，都会触发组件的销毁和重建。首先，性能不好。其次，会丢失组件状态
keep-alive 组件
当在这些组件之间切换的时候，有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。keep-alive 是一个内置容器组件， 使用 >keep-alive 以后，内部包含的组件将增加 激活 和 失活/冻结 的状态
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>
生命周期
使用了 keep-alive 的组件会触发 activated、deactivated 两个生命周期函数
activated
keep-alive 组件激活时调用
deactivated
keep-alive 组件停用时调用
插件
插件通常是用来给 vue 提供扩展功能的一种方式
- 给
Vue添加属性和方法 - 给
Vue 实例添加属性和方法 - 添加全局资源：指令、过滤器、组件等
- 添加配置选项
安装插件
通过全局方法 Vue.use() 使用插件。它需要在调用 new Vue() 启动应用之前完成
Vue.use(插件);
如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
实例
axios
https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js
function http(_Vue, options) {
_Vue.prototype.$http = axios;
}
Vue.use(http);
// or
function http(_Vue, options) {
_Vue.prototype.$http = adaptor.http;
}
Vue.use(http, {adaptor: axios});
new Vue({
el: '#app',
data: {
},
async created() {
// let rs = await axios({
// method: 'post',
// url: 'https://api.apiopen.top/musicRankings'
// });
// console.log(rs);
let rs = await this.$http({
method: 'post',
url: 'https://api.apiopen.top/musicRankings'
});
console.log(rs);
}
});
修改
prototype会修改整个Vue原型链
另外一种方式
function http(_Vue) {
_Vue.mixin({
beforeCreate() {
if ( this.$options.adaptor ) {
this.$http = this.$options.adaptor;
}
if ( this.$options.parent && this.$options.parent.$http ) {
this.$http = this.$options.parent.$http;
}
}
});
}
Vue.use(http);
new Vue({
el: '#app',
adaptor: axios,
components: {
'my-component': myComponent
}
})
动画
在 vue 中给组件或元素添加动画的方式可以分为多种，但总体无非还是通过 css 和 JavaScript 来进行处理
CSS
通过 css 添加动画的方式特别的简单，只需要利用 css 中的 transition 就可以做到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.js_animation_box {
width: 100px;
height: 100px;
background: red;
transition: .5s all;
}
.js_animation_box.end {
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<button id="js_animation_btn">原生动画</button>
<div id="js_animation_box" class="js_animation_box"></div>
<script>
// 原生 + css
let jsAnimationBtn = document.querySelector('#js_animation_btn');
let jsAnimationBox = document.querySelector('#js_animation_box');
jsAnimationBtn.onclick = function() {
jsAnimationBox.classList.add('end');
}
</script>
</body>
</html>
JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.js_animation_box {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<button id="js_animation_btn">原生动画</button>
<div id="js_animation_box" class="js_animation_box"></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
// jq
$('#js_animation_btn').on('click', function() {
$('#js_animation_box').animate({
width: 200,
height: 200
}, .5);
});
</script>
</body>
</html>
vue 中的动画处理
在 vue 中基本和上面的处理方式是一样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.js_animation_box {
width: 100px;
height: 100px;
background: red;
transition: .5s all;
}
.js_animation_box.end {
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div id="app">
<button @click="isEnd = !isEnd">vue动画</button>
<div :class="['js_animation_box', isEnd ? 'end' : '']"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
isEnd: false
}
});
</script>
</body>
</html>
动画生命周期
vue 为元素和组件的几个特殊的情况提供了对应的处理方式
- 条件渲染 (使用
v-if) - 条件展示 (使用
v-show) - 动态组件
- 组件根节点
transition 组件
通过 transition 组件包裹的元素或组件，会在上面定义的几个场景中触发过渡，并添加指定的 class 样式
过渡类名
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter被移除)，在过渡/动画完成之后移除v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave被删除)，在过渡/动画完成之后移除
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y5o1YQ7f-1590901832457)(assets/transition.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.js_animation_box {
width: 100px;
height: 100px;
background: red;
}
.slide-fade-enter-active, .slide-fade-leave-active {
transition: all 5s ease;
}
.slide-fade-enter {
width: 0;
height: 0;
}
.slide-fade-enter-to {
width: 100px;
height: 100px;
}
.slide-fade-leave {
/*可以和slide-fade-enter-to合并*/
width: 100px;
height: 100px;
}
.slide-fade-leave-to {
/*可以和slide-fade-enter合并*/
width: 0;
height: 0;
}
</style>
</head>
<body>
<div id="app">
<button @click="isShow = !isShow">vue动画</button>
<transition name="slide-fade">
<div v-if="isShow" class="js_animation_box"></div>
</transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
isShow: false
}
});
</script>
</body>
</html>
3509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
