1.VUE中給Dom元素動態(tài)添加樣式
? ? VUE中，給 Dom 元素動態(tài)添加樣式。
? ? 比如判斷通過頁面?zhèn)鬟f過來的值和env文件中配置的值是否一致，來動態(tài)添加元素的類，同時(shí)類的樣式在 Style 中已經(jīng)寫好。
?此時(shí)動態(tài)類名需要在 Dom 元素加載完成前添加上，否則樣式可能添加不上。
?這種情況下可以在??computed 中調(diào)用 process.env?中的屬性用于做判斷，為 Dom 元素動態(tài)添加類。
?這樣添加的類在 Dom 元素加載完成前就添加上了，樣式可以起效。
?2.VUE中使用Debugger
?在VUE中使用?debugger 可以在調(diào)試模式下，方便的打斷點(diǎn)，起到良好的測試效果。
3.infinite 觸底加載
?在jquery-weui.js庫中包含infinite組件，這個(gè)組件在我們使用weui開發(fā)手機(jī)端分頁時(shí)，使用起來非常方便。
?在另外一個(gè)輕量級的 JavaScript 庫中也包含 infinite 組件 -- Zepto.WeUI.js
? ? Zepto簡介
- Zepto.WeUI.js 是基于 Zepto.js 和 WeUI 的一個(gè)插件庫，用于擴(kuò)展 WeUI 組件的功能并提供更多常用的 UI 組件和交互效果。它提供了一系列易于使用的輕量級組件，使開發(fā)者可以快速構(gòu)建具有WeUI 風(fēng)格的移動端網(wǎng)頁應(yīng)用。
- Zepto.js 是一個(gè)輕量級的 JavaScript 庫，被設(shè)計(jì)為和 jQuery 兼容的替代品，主要用于移動設(shè)備上的開發(fā)。它提供了許多類似于 jQuery 的功能和 API，?但是文件體積更小且專注于移動端的特性? 和性能優(yōu)化。
- Zepto.WeUI.js 擴(kuò)展了 WeUI，為開發(fā)者提供了更多實(shí)用的功能和組件，如下拉刷新、無限滾動、圖片輪播等。它以 Zepto.js 作為基礎(chǔ)，提供了一種便捷的方式來使用 WeUI 的特性和樣式。
??Zepto中Infinite的使用? ? ??
? ? ?1. 引入依賴文件
<!-- 引入 WeUI 樣式 -->
<link rel="stylesheet" >
<!-- 引入 Zepto.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
<!-- 引入 Zepto.WeUI.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/zepto.weui/1.2.0/zepto.weui.min.js"></script>? ? ?2. 創(chuàng)建基本的 HTML 結(jié)構(gòu)
<div class="infinite-container">
<div class="infinite-item">內(nèi)容 1</div>
<div class="infinite-item">內(nèi)容 2</div>
<!-- 更多內(nèi)容 -->
<div class="infinite-loading">加載中...</div>
</div>? ? ?3. 初始化 infinite?組件
$(function() {
$(".infinite-container").infinite();
});? ? ?4. 處理滾動觸底事件
$(function() {
$(".infinite-container").infinite().on("infinite", function() {
var loading = $(".infinite-loading");
loading.show(); // 顯示加載狀態(tài)提示
// 異步加載更多內(nèi)容
// 這里可以使用 AJAX 請求或其他異步方法來獲取數(shù)據(jù)
setTimeout(function() {
var newItem = $("<div></div>").addClass("infinite-item").text("更多內(nèi)容");
$(".infinite-container").append(newItem);
loading.hide(); // 隱藏加載狀態(tài)提示
$(".infinite-container").infinite(); // 重新初始化 infinite 組件
}, 2000); // 模擬延遲加載2秒
});
});? ? 5. 在配合VUE使用時(shí)，使用方式更加簡便
? ? ? ? 1.? 首先在你的VUE項(xiàng)目中引入依賴文件
? ? ? ? 2.? 在 mounted 中將 infinite元素 和 infinite組件 綁定
$('.infinite').infinite().on('infinite', () => {
// 滾動時(shí)執(zhí)行的方法
})? ? ? ? 3.? 在 watch 中實(shí)時(shí)監(jiān)聽頁面滾動情況
watch: {
meetEnd() {
if (this.meetEnd) {
//off方法用于移除已綁定的無限滾動加載事件。它可以幫助你臨時(shí)關(guān)閉無限滾動加載功能，而不需要完全銷毀 infinite 組件。
//$('.infinite').infinite().destroy() 完全銷毀 infinite 組件
$('.infinite').infinite().off('infinite')
} else {
$('.infinite').infinite().on('infinite', () => {
//滾動時(shí)執(zhí)行的方法
})
}
}
}?4.Vue 中使用動態(tài)組件 （Dynamic Components）
在Vue中使用動態(tài)組件可以讓你根據(jù)不同的條件或用戶操作，動態(tài)加載不同的組件。下面是一個(gè)簡單示例
<template>
<div>
<button @click="loadComponent('ComponentA')">加載組件A</button>
<button @click="loadComponent('ComponentB')">加載組件B</button>
<component :is="currentComponent"></component>
</div>
</template>
<script>
import ComponentA from "@/components/ComponentA.vue";
import ComponentB from "@/components/ComponentB.vue";
export default {
data() {
return {
currentComponent: null
};
},
methods: {
loadComponent(componentName) {
if (componentName === 'ComponentA') {
this.currentComponent = ComponentA;
} else if (componentName === 'ComponentB') {
this.currentComponent = ComponentB;
}
}
},
components: {
ComponentA,
ComponentB
}
};
</script>5.Vue中 ... 的用法
在Vue中，...可能是? 展開運(yùn)算符（Spread Operator）也可能是? 對象的擴(kuò)展運(yùn)算符（Object Spread Operator）。
下面先介紹 展開運(yùn)算符 的使用方式
//1.展開數(shù)組
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // 展開 arr1 數(shù)組，并添加新的元素
console.log(arr2); // 輸出：[1, 2, 3, 4, 5]
//2.合并數(shù)組
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const arr3 = [...arr1, ...arr2]; // 合并 arr1 和 arr2 數(shù)組
console.log(arr3); // 輸出：[1, 2, 3, 4, 5]
//3.復(fù)制數(shù)組
const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // 復(fù)制 arr1 數(shù)組
console.log(arr2); // 輸出：[1, 2, 3]
//4.展開對象
const obj1 = { name: 'Alice', age: 20 };
const obj2 = { ...obj1, city: 'New York' }; // 展開 obj1 對象，并添加新屬性
console.log(obj2); // 輸出：{ name: 'Alice', age: 20, city: 'New York' }
//5.合并對象
const obj1 = { name: 'Alice', age: 20 };
const obj2 = { city: 'New York' };
const obj3 = { ...obj1, ...obj2 }; // 合并 obj1 和 obj2 對象
console.log(obj3); // 輸出：{ name: 'Alice', age: 20, city: 'New York' }
//6.展開函數(shù)調(diào)用
function foo(a, b, c) {
console.log(a, b, c);
}
const arr = [1, 2, 3];
foo(...arr); // 將數(shù)組展開作為參數(shù)傳遞給函數(shù)然后介紹一下，小白特別困惑的 對象的擴(kuò)展運(yùn)算符 ，它主要用于對象的屬性合并和復(fù)制。
//1.合并組件的計(jì)算屬性
<script>
import { mapGetters } from "vuex";
export default {
computed: {
//這個(gè)例子中，我們使用對象的擴(kuò)展運(yùn)算符將 mapGetters 返回的對象屬性合并到組件的 computed 計(jì)算屬性中。這樣，我們可以通過在組件中使用
// this.prop1 和 this.prop2 來訪問對應(yīng)的計(jì)算屬性
...mapGetters({
prop1: "module1/getProp1",
prop2: "module2/getProp2"
})
}
};
</script>//2.合并組件的方法
<script>
export default {
methods: {
//在這個(gè)例子中，我們使用對象的擴(kuò)展運(yùn)算符將 mapActions 返回的對象屬性合并到組件的 methods 中。
//這樣，我們就可以直接在組件中使用 this.action1 和 this.action2 來調(diào)用對應(yīng)的方法。
...mapActions([
"module1/action1",
"module2/action2"
])
}
};
</script>//3.合并組件的樣式對象
<template>
<div :style="computedStyles"></div>
</template>
//在這個(gè)例子中，我們使用對象的擴(kuò)展運(yùn)算符將 baseStyles 對象和 additionalStyles 對象合并為一個(gè)新的對象，
//并將其作為 :style 綁定的值。這樣，組件的樣式將包含來自兩個(gè)對象的屬性。
<script>
export default {
data() {
return {
baseStyles: { backgroundColor: "red", color: "white" },
additionalStyles: { fontSize: "16px", fontWeight: "bold" }
};
},
computed: {
computedStyles() {
return { ...this.baseStyles, ...this.additionalStyles };
}
}
};
</script>?最后，小白發(fā)現(xiàn) 對象的擴(kuò)展運(yùn)算符 和 展開運(yùn)算符 在處理對象的時(shí)候是有相似性的，于是小白研究了它們之間的相同點(diǎn)和不同點(diǎn)
1.? 相同點(diǎn)：對象的擴(kuò)展運(yùn)算符和展開運(yùn)算符都可以用于展開對象
2.? 不同點(diǎn)：文章來源：http://www.zghlxwxcb.cn/news/detail-695044.html
1. 對象的擴(kuò)展運(yùn)算符只能用于展開對象，它會將一個(gè)對象中的所有屬性展開到另一個(gè)對象中，并創(chuàng)建一個(gè)新的對象
const obj1 = { name: 'Alice', age: 20 };
const obj2 = { ...obj1 };
console.log(obj2); // 輸出：{ name: 'Alice', age: 20 }
2. 展開運(yùn)算符可以用于展開數(shù)組和對象，可以在新的數(shù)組、對象或函數(shù)調(diào)用中使用，比如合并數(shù)組、復(fù)制數(shù)據(jù)、合并對象等。
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // 輸出：[1, 2, 3, 4, 5]
const obj1 = { name: 'Alice', age: 20 };
const obj2 = { city: 'New York' };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // 輸出：{ name: 'Alice', age: 20, city: 'New York' }
3. 展開運(yùn)算符可以在數(shù)組和函數(shù)調(diào)用中使用
function foo(a, b, c) {
console.log(a, b, c);
}
const arr = [1, 2, 3];
foo(...arr); // 將數(shù)組展開作為參數(shù)傳遞給函數(shù)
const obj = { name: 'Alice', age: 20 };
const newObj = { ...obj }; // 只能用于對象的展開以上就是 對象的擴(kuò)展運(yùn)算符 和 展開運(yùn)算符 的相同點(diǎn)和不同點(diǎn)，經(jīng)過整理小白搞清楚了如何使用這些好用的組件。小白還會繼續(xù)努力學(xué)習(xí)編碼，爭取掌握更多好用又有效率的組件，拜讀更多優(yōu)秀的代碼！文章來源地址http://www.zghlxwxcb.cn/news/detail-695044.html
到了這里，關(guān)于小白最近比較閑，于是整理了一些日常使用的VUE組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
