- A+
所属分类：Web前端
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 }; // 只能用于对象的展开以上就是 对象的扩展运算符 和 展开运算符 的相同点和不同点，经过整理小白搞清楚了如何使用这些好用的组件。小白还会继续努力学习编码，争取掌握更多好用又有效率的组件，拜读更多优秀的代码！
