提示：學習vue2的第四天，筆記記錄：混入(mixins),插槽(slot),過渡與動畫(transition)
目錄
一、混入(mixins)
二、插槽(solt)
1.匿名插槽
2.具名插槽
三、過渡與動畫(transition)?
1.過渡
1）單元素過渡
Ⅰ.通用類名
Ⅱ.指定類名
2)多元素過渡?
2.動畫?
1.自定義動畫
2.使用動畫庫?
一、混入(mixins)
混入（Mixin）是一種重用 Vue 組件中可復用功能的方法，它允許你在多個組件之間共享相同的代碼邏輯。通過混入，你可以將一組選項合并到組件中，這些選項可以包括數(shù)據(jù)、計算屬性、方法等。
基本步驟:
1.創(chuàng)建混入對象：首先，創(chuàng)建一個包含要復用的選項的混入對象。這個對象可以包含任何 Vue 組件中可用的選項。
const options = {
data() {
return {
num: 100
}
},
methods: {
add() {
this.num++;
}
},
watch: {
num(nValue) {
console.log("值:", nValue);
}
},
created() {
console.log("初始化...")
}
}2.在組件中使用混入：在你想要使用混入的組件中，通過 mixins 選項將混入對象添加到組件中。?
// 組件A
const CompA = {
data() {
return {
num: 1
}
},
// 混入語法
mixins: [
options
],
template: `
<div>
<h3>組件A</h3>
<p>{{num}}</p>
<button @click="add">按鈕</button>
</div>
`,
}
// 組件B
const CompB = {
// 混入語法
mixins: [
options
],
template: `
<div>
<h3>組件B</h3>
<p>{{num}}</p>
<button @click="add">按鈕</button>
</div>
`,
}注：?當組件data選項中的數(shù)據(jù)和mixins選項中的屬性和方法相同的情況，優(yōu)先使用的是組件的屬性和方法等?。雖然混入提供了一種方便的重用代碼的方法，但過度使用混入可能導致代碼變得難以理解和維護。因此，應該謹慎使用混入，避免濫用。
二、插槽(solt)
組件插槽（slot）是一種機制，允許組件接受額外的內(nèi)容作為其子組件，并且可以在組件內(nèi)部的特定位置渲染這些內(nèi)容。插槽使得組件更加靈活，可以根據(jù)需要插入不同的內(nèi)容。
1.匿名插槽
匿名插槽是最簡單的一種插槽，不需要任何特定的名稱。當在組件中寫入內(nèi)容時，如果沒有為插槽指定名稱，那么這個內(nèi)容會被放置到子組件中的默認插槽位置。在子組件中，可以使用 <slot> 元素來標記默認插槽的位置。
<!DOCTYPE html>
<html lang="zh-cn">
<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>Vue</title>
<style>
* {
padding: 0;
margin: 0;
}
.header {
width: 100%;
box-sizing: border-box;
padding: 0 15px;
height: 60px;
background-color: #ccc;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.header .left {
width: 80px;
height: 40px;
background-color: red;
text-align: center;
line-height: 40px;
}
.header .left a ,
.header .left span {
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<div id="app">
<comp-header><span>搜狐 </span></comp-header>
<comp-header><span>淘寶 </span></comp-header>
<comp-header><span>京東 </span></comp-header>
<comp-header><span>拼多多</span></comp-header>
</div>
<script src="./libs/vue@2.7.16/vue.js"></script>
<script>
// 匿名插槽
// <slot></slot>
// 編寫頭部組件
const CompHeader = {
template: `
<header class="header">
<!-- 插槽 -->
<div class="left">
<slot></slot>
</div>
</header>
`
}
//禁止控制臺輸出日志信息
Vue.config.productionTip = false;
new Vue({
//掛載容器
el: "#app",
// 注冊組件
components: {CompHeader}
})
</script>
</body>
</html>在上面的案例中<comp-header>?組件中的<span>搜狐</span>等內(nèi)容就會被插入匿名插槽中
2.具名插槽
與匿名插槽不同，在組件中寫入的內(nèi)容會根據(jù)name屬性插入到用v-solt綁定了相同名稱的插槽中
<!DOCTYPE html>
<html lang="zh-cn">
<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>Vue</title>
<style>
* {
padding: 0;
margin: 0;
}
.header {
width: 100%;
box-sizing: border-box;
padding: 0 15px;
height: 60px;
background-color: deepskyblue;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.header .left {
width: 80px;
height: 40px;
/* background-color: red; */
text-align: center;
line-height: 40px;
}
.header .left a,
.header .left span {
color: #fff;
text-decoration: none;
}
.header .center {
flex-grow: 1;
}
.header .center input {
width: 100%;
height: 40px;
border-radius: 20px;
border: 0;
outline: none;
box-sizing: border-box;
padding-left: 15px;
}
.header .right {
width: 50px;
height: 40px;
/* background-color: blue; */
text-align: center;
line-height: 40px;
}
.header .right a {
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<div id="app">
<comp-header>
<!-- 代表left插槽 -->
<template v-slot:left>
<span>LOGO</span>
</template>
<!-- 代表center插槽 -->
<template v-slot:center>
<input type="text" placeholder="請輸入關(guān)鍵字">
</template>
<!-- 代表right插槽 -->
<template #right>
<a href="#">登錄</a>
</template>
</comp-header>
</div>
<script src="./libs/vue@2.7.16/vue.js"></script>
<script>
// 具名插槽
// <slot name="left"></slot>
// 編寫頭部組件
const CompHeader = {
template: `
<header class="header">
<!-- 插槽 -->
<div class="left">
<slot name="left"></slot>
</div>
<div class="center">
<slot name="center"></slot>
</div>
<div class="right">
<slot name="right"></slot>
</div>
</header>
`
}
//禁止控制臺輸出日志信息
Vue.config.productionTip = false;
new Vue({
//掛載容器
el: "#app",
// 注冊組件
components: { CompHeader }
})
</script>
</body>
</html>在上面的案例中，v-solt:left中的logo就會 被插入到name='left'的插槽中去?
三、過渡與動畫(transition)?
1.過渡
過渡（Transition）是一種在元素在插入、更新或刪除時，在其內(nèi)部進行過渡的方式，就是為元素的行為增加過渡效果。
1）單元素過渡
通過內(nèi)置組件<transition>?可以對單個元素進行過渡動畫，可以在元素插入、更新或刪除時觸發(fā)動畫效果。它通過設(shè)置不同的 CSS 類名來實現(xiàn)動畫效果。
Ⅰ.通用類名
沒有設(shè)置name屬性的<transition>組件過渡效果都會執(zhí)行?.v-?開頭的類名中設(shè)置的過渡效果。
<!DOCTYPE html>
<html lang="zh-cn">
<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>Vue</title>
<link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.css">
<style>
/* 入場類名 */
/* 入場之前的樣式 */
.v-enter {
transform: translateX(-100%);
opacity: 0;
}
/* 入場過程中的樣式 */
.v-enter-active {
transition: all .5s;
}
.v-enter-to {
transform: translateX(0px);
opacity: 1;
}
/* 離場類名 */
/* 離場之前的樣式 */
.v-leave {
transform: translateY(0px);
opacity: 1;
}
/* 離場過程中的樣式 */
.v-leave-active {
transition: all .5s;
}
/* 離場后的樣式 */
.v-leave-to {
transform: translateY(-100%);
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="container mt-2">
<div class="btn btn-success" @click="isShow=true">入場(顯示)</div>
<div class="btn btn-danger" @click="isShow=false">離場(隱藏)</div>
<transition>
<div v-if="isShow" class="bg-primary mt-2" style="height: 200px;"></div>
</transition>
</div>
</div>
<script src="./libs/vue@2.7.16/vue.js"></script>
<script>
//禁止控制臺輸出日志信息
Vue.config.productionTip = false;
new Vue({
//掛載容器
el: "#app",
// 數(shù)據(jù)
data(){
return {
isShow: true
}
},
})
</script>
</body>
</html>Ⅱ.指定類名
通過在<transition>中設(shè)置name屬性可以調(diào)用?.name-? 開頭的專屬類名中的過渡效果。
<!DOCTYPE html>
<html lang="zh-cn">
<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>Vue</title>
<link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.css">
<style>
/* 設(shè)置transition組件的name屬性為demo后 */
/* 入場類名 */
/* 入場之前的樣式 */
.demo-enter {
transform: translateX(-100%) rotate(180deg);
opacity: 0;
}
/* 入場過程中的樣式 */
.demo-enter-active {
transition: all .5s;
}
.demo-enter-to {
transform: translateX(0px) rotate(0deg);
opacity: 1;
}
/* 離場類名 */
/* 離場之前的樣式 */
.demo-leave {
transform: translateY(0px) rotate(0deg);
opacity: 1;
}
/* 離場過程中的樣式 */
.demo-leave-active {
transition: all .5s;
}
/* 離場后的樣式 */
.demo-leave-to {
transform: translateY(-100%) rotate(180deg);
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="container mt-2">
<div class="btn btn-success" @click="isShow=true">入場(顯示)</div>
<div class="btn btn-danger" @click="isShow=false">離場(隱藏)</div>
<transition name="demo">
<div v-if="isShow" class="bg-primary mt-2" style="height: 200px;"></div>
</transition>
</div>
</div>
<script src="./libs/vue@2.7.16/vue.js"></script>
<script>
//禁止控制臺輸出日志信息
Vue.config.productionTip = false;
new Vue({
//掛載容器
el: "#app",
// 數(shù)據(jù)
data(){
return {
isShow: true
}
},
})
</script>
</body>
</html>2)多元素過渡?
通過內(nèi)置組件<transition-group> 組件用于對多個相同類型的元素進行過渡動畫，例如列表中的項。它也通過設(shè)置不同的 CSS 類名來實現(xiàn)動畫效果。使用方法與 <transition> 類似，主要區(qū)別在于添加了 tag 屬性指定了渲染元素的標簽，默認為 span。
<template>
<div>
<transition-group name="list" tag="ul">
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</transition-group>
<button @click="addItem">添加項</button>
</div>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
};
},
methods: {
addItem() {
this.items.push(`Item ${this.items.length + 1}`);
}
}
};
</script>
<style>
/* 定義過渡效果的 CSS 類 */
.list-enter-active, .list-leave-active {
transition: transform 0.5s;
}
.list-enter, .list-leave-to {
transform: translateY(30px);
opacity: 0;
}
</style>
2.動畫?
1.自定義動畫
通過@keyframes來自定義動畫，利用enter-active，leave-active這些屬性設(shè)置過渡
<!DOCTYPE html>
<html lang="zh-cn">
<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>Vue</title>
<link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.css">
<style>
/* 入場類名 */
.enter-box {
animation: enter-ani .5s forwards;
}
/* 離場類名 */
.leave-box {
animation: leave-ani .5s forwards;
}
/* 自定義動畫 */
/* 入場動畫 */
@keyframes enter-ani {
0% {
transform: scale(.5) rotate(180deg);
opacity: 0;
}
100% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
}
/* 離場動畫 */
@keyframes leave-ani {
0% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
100% {
transform: scale(.5) rotate(180deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div id="app">
<div class="container mt-2">
<div class="btn btn-success" @click="isShow=true">入場(顯示)</div>
<div class="btn btn-danger" @click="isShow=false">離場(隱藏)</div>
<!-- 處理動畫，利用enter-active，leave-active這些屬性設(shè)置 -->
<!-- 1） 自定義動畫 -->
<transition
enter-active-class="enter-box"
leave-active-class="leave-box"
>
<div v-if="isShow" class="bg-primary mt-2" style="height: 200px;"></div>
</transition>
</div>
</div>
<script src="./libs/vue@2.7.16/vue.js"></script>
<script>
//禁止控制臺輸出日志信息
Vue.config.productionTip = false;
new Vue({
//掛載容器
el: "#app",
// 數(shù)據(jù)
data(){
return {
isShow: true
}
},
})
</script>
</body>
</html>2.使用動畫庫?
使用別人設(shè)置好的動畫可以輕松實現(xiàn)好看的動畫效果。
動畫庫：https://animate.style/
<!DOCTYPE html>
<html lang="zh-cn">
<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>Vue</title>
<!-- 動畫庫 -->
<link rel="stylesheet" href="./libs/animate.min.css">
</head>
<body>
<div id="app">
<div class="container mt-2">
<div class="btn btn-success" @click="isShow=true">入場(顯示)</div>
<div class="btn btn-danger" @click="isShow=false">離場(隱藏)</div>
<!-- 2) 使用動畫庫 -->
<transition
enter-active-class="animate__animated animate__backInLeft"
leave-active-class="animate__animated animate__fadeOutUp"
>
<div v-if="isShow" class="bg-warning mt-2" style="height: 200px;"></div>
</transition>
</div>
</div>
<script src="./libs/vue@2.7.16/vue.js"></script>
<script>
//禁止控制臺輸出日志信息
Vue.config.productionTip = false;
new Vue({
//掛載容器
el: "#app",
// 數(shù)據(jù)
data(){
return {
isShow: true
}
},
})
</script>
</body>
</html>?文章來源地址http://www.zghlxwxcb.cn/news/detail-848905.html文章來源：http://www.zghlxwxcb.cn/news/detail-848905.html
?
到了這里，關(guān)于前端小白的學習之路(Vue2 四)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
