當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue组件与动画

發布時間：2024/3/13 vue 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue组件与动画小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

組件

全局組件

// 創建一個Vue 應用 const app = Vue.createApp({})// 定義一個名為 btn 的全局組件 app.component('btn', {data() {return {n : 0}},template: `<button @click="n++">點擊{{ n}}</button>` })

局部組件

//定義組件 const step = {template:`<div><button @click="n--">-</button>{{n}}<button @click="n++">+</button></div>`,data(){return {n:1}} }//注冊組件 const app = Vue.createApp({ components:{step} }) //使用組件 <step></step>

props傳遞參數

//傳遞 <step :num="1"></step> <step :num="2"></step> //接收 props:{"num":{type:Number,default:1} }, //使用 data(){return {n:this.num}}//對象與數組的默認值必須是函數的返回值 props：{"b":{type:Array,default:()=>{}} }

props傳遞參數指定類型

String? 字符串
Number? 數值
Boolean? 布爾值
Array? ? ?數組
Object? ? 對象
Date? ? ?日期
Function? ?函數
Symbol? ?唯一標識符

組件的插槽

使用 <slot> 作為我們想要插入內容的占位符

<step>123... </step> template:`<div><p>456...</p><slot></slot></div>` //組件標簽中的內容將在模板的slot標簽顯示

命名插槽

<step><--在模板標簽中使用 v-slot:命名（只能使用模板標簽template）--><template v-slot:pre><span slot="pre">￥</span></template><template v-slot:next><span slot="next">元</span></template> </step>const step = {<--在組件模于板中使用slot標簽并使用屬性name賦值，等于在頁面組件中“命名”即可-->template:`<div><slot name="pre"></slot>100<slot name="next"></slot></div>`, } //顯示￥100元

作用域插槽

//當一個組件被用來渲染一個項目數組時，這是一個常見的情況，我們希望能夠自定義每個項目的渲染方式。 <step><template v-slot:default="scope"><i class="fas fa-check">{{scope.index}}</i><span class="green">{{ scope.item }}</span></template> </step>const step = {template: `<ul><li v-for="( item, index ) in list"><slot :item="item" :index="index"></slot></li></ul>`, data() { return {list: ["vue", 'react', 'angular']}}}

?動畫

Vue 提供了內置的過渡封裝組件，該組件用于包裹要實現過渡效果的組件。

組件進入和離開 DOM 的鉤子使用內置的 <transition> 組件

動畫過度class

在進入/離開的過渡中，會有 6 個 class 切換

v-enter-active進入整個狀態? ---v-leave-active離開整個狀態

v-enter-from 進入開始?---v-enter-to 進入結束

?v-leave-from 離開開始?---?v-leave-to 離開結束??

在style樣式表中添加以上類? ?

v 為自定義名稱?

使用需在transition標簽中name=自定義名稱與樣式掛鉤

使用關鍵幀動畫

與css樣式相同需自行添加

@keyframes fadeIn{from{opacity: 0;}to{ opacity: 1;} } @keyframes fadeOut {0%{ opacity: 1;}100%{ opacity: 0;} }.fade-enter-active{ animation: fadeIn ease 1s;}.fade-leave-active{ animation: fadeOut ease 1s;}

?引入第三方插件動畫

以animation插件為例：

animate動畫庫：https://www.jq22.com/yanshi819

動畫模式

in-out 先進在出，out-in先出在進

列表過度

使用 <transition-group> 組件實現列表過渡

<transition-group tag="div" name="slide"? ><div class="item" v-for="item in undoList" :key="item.name"></transition-group>.slide-leave-active{animation: slideOut ease 1s;position: absolute; }/* transition-group 正在移動中的類名 *//* 移動中的元素 */.slide-move{transition: all ease 1s;}

模板引用

用 ref attribute 為子組件或 HTML 元素指定引用 ID?

this.$refs.inp.value

可以獲取組件中的元素和方法等

總結

以上是生活随笔為你收集整理的Vue组件与动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。