小白最近比较闲，于是整理了一些日常使用的VUE组件
1.VUE中给Dom元素动态添加样式
VUE中，给 Dom 元素动态添加样式。
比如判断通过页面传递过来的值和env文件中配置的值是否一致，来动态添加元素的类，同时类的样式在 Style 中已经写好。
此时动态类名需要在 Dom 元素加载完成前添加上，否则样式可能添加不上。
这种情况下可以在 computed 中调用 process.env 中的属性用于做判断，为 Dom 元素动态添加类。
这样添加的类在 Dom 元素加载完成前就添加上了，样式可以起效。
2.VUE中使用Debugger
在VUE中使用 debugger 可以在调试模式下，方便的打断点，起到良好的测试效果。
3.infinite 触底加载
在jquery-weui.js库中包含infinite组件，这个组件在我们使用weui开发手机端分页时，使用起来非常方便。
在另外一个轻量级的 JavaScript 库中也包含 infinite 组件 -- Zepto.WeUI.js
Zepto简介
- Zepto.WeUI.js 是基于 Zepto.js 和 WeUI 的一个插件库，用于扩展 WeUI 组件的功能并提供更多常用的 UI 组件和交互效果。它提供了一系列易于使用的轻量级组件，使开发者可以快速构建具有WeUI 风格的移动端网页应用。
- Zepto.js 是一个轻量级的 JavaScript 库，被设计为和 jQuery 兼容的替代品，主要用于移动设备上的开发。它提供了许多类似于 jQuery 的功能和 API， 但是文件体积更小且专注于移动端的特性 和性能优化。
- Zepto.WeUI.js 扩展了 WeUI，为开发者提供了更多实用的功能和组件，如下拉刷新、无限滚动、图片轮播等。它以 Zepto.js 作为基础，提供了一种便捷的方式来使用 WeUI 的特性和样式。
Zepto中Infinite的使用
1. 引入依赖文件
<!-- 引入 WeUI 样式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/weui/2.2.0/style/weui.min.css">
<!-- 引入 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. 创建基本的 HTML 结构
<div class="infinite-container">
<div class="infinite-item">内容 1</div>
<div class="infinite-item">内容 2</div>
<!-- 更多内容 -->
<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(); // 显示加载状态提示
// 异步加载更多内容
// 这里可以使用 AJAX 请求或其他异步方法来获取数据
setTimeout(function() {
var newItem = $("<div></div>").addClass("infinite-item").text("更多内容");
$(".infinite-container").append(newItem);
loading.hide(); // 隐藏加载状态提示
$(".infinite-container").infinite(); // 重新初始化 infinite 组件
}, 2000); // 模拟延迟加载2秒
});
});5. 在配合VUE使用时，使用方式更加简便
1. 首先在你的VUE项目中引入依赖文件
2. 在 mounted 中将 infinite元素 和 infinite组件 绑定
$('.infinite').infinite().on('infinite', () => {
// 滚动时执行的方法
}) 3. 在 watch 中实时监听页面滚动情况
watch: {
meetEnd() {
if (this.meetEnd) {
//off方法用于移除已绑定的无限滚动加载事件。它可以帮助你临时关闭无限滚动加载功能，而不需要完全销毁 infinite 组件。
//$('.infinite').infinite().destroy() 完全销毁 infinite 组件
$('.infinite').infinite().off('infinite')
} else {
$('.infinite').infinite().on('infinite', () => {
//滚动时执行的方法
})
}
}
}4.Vue 中使用动态组件 （Dynamic Components）
在Vue中使用动态组件可以让你根据不同的条件或用户操作，动态加载不同的组件。下面是一个简单示例
<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中，...可能是 展开运算符（Spread Operator）也可能是 对象的扩展运算符（Object Spread Operator）。
下面先介绍 展开运算符 的使用方式
//1.展开数组
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // 展开 arr1 数组，并添加新的元素
console.log(arr2); // 输出：[1, 2, 3, 4, 5]
//2.合并数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const arr3 = [...arr1, ...arr2]; // 合并 arr1 和 arr2 数组
console.log(arr3); // 输出：[1, 2, 3, 4, 5]
//3.复制数组
const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // 复制 arr1 数组
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.展开函数调用
function foo(a, b, c) {
console.log(a, b, c);
}
const arr = [1, 2, 3];
foo(...arr); // 将数组展开作为参数传递给函数然后介绍一下，小白特别困惑的 对象的扩展运算符 ，它主要用于对象的属性合并和复制。
//1.合并组件的计算属性
<script>
import { mapGetters } from "vuex";
export default {
computed: {
//这个例子中，我们使用对象的扩展运算符将 mapGetters 返回的对象属性合并到组件的 computed 计算属性中。这样，我们可以通过在组件中使用
// this.prop1 和 this.prop2 来访问对应的计算属性
...mapGetters({
prop1: "module1/getProp1",
prop2: "module2/getProp2"
})
}
};
</script>//2.合并组件的方法
<script>
export default {
methods: {
//在这个例子中，我们使用对象的扩展运算符将 mapActions 返回的对象属性合并到组件的 methods 中。
//这样，我们就可以直接在组件中使用 this.action1 和 this.action2 来调用对应的方法。
...mapActions([
"module1/action1",
"module2/action2"
])
}
};
</script>//3.合并组件的样式对象
<template>
<div :style="computedStyles"></div>
</template>
//在这个例子中，我们使用对象的扩展运算符将 baseStyles 对象和 additionalStyles 对象合并为一个新的对象，
//并将其作为 :style 绑定的值。这样，组件的样式将包含来自两个对象的属性。
<script>
export default {
data() {
return {
baseStyles: { backgroundColor: "red", color: "white" },
additionalStyles: { fontSize: "16px", fontWeight: "bold" }
};
},
computed: {
computedStyles() {
return { ...this.baseStyles, ...this.additionalStyles };
}
}
};
</script>最后，小白发现 对象的扩展运算符 和 展开运算符 在处理对象的时候是有相似性的，于是小白研究了它们之间的相同点和不同点
1. 相同点：对象的扩展运算符和展开运算符都可以用于展开对象
2. 不同点：
1. 对象的扩展运算符只能用于展开对象，它会将一个对象中的所有属性展开到另一个对象中，并创建一个新的对象
const obj1 = { name: 'Alice', age: 20 };
const obj2 = { ...obj1 };
console.log(obj2); // 输出：{ name: 'Alice', age: 20 }
2. 展开运算符可以用于展开数组和对象，可以在新的数组、对象或函数调用中使用，比如合并数组、复制数据、合并对象等。
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. 展开运算符可以在数组和函数调用中使用
function foo(a, b, c) {
console.log(a, b, c);
}
const arr = [1, 2, 3];
foo(...arr); // 将数组展开作为参数传递给函数
const obj = { name: 'Alice', age: 20 };
const newObj = { ...obj }; // 只能用于对象的展开以上就是 对象的扩展运算符 和 展开运算符 的相同点和不同点，经过整理小白搞清楚了如何使用这些好用的组件。小白还会继续努力学习编码，争取掌握更多好用又有效率的组件，拜读更多优秀的代码！