小白最近比较闲,于是整理了一些日常使用的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 }; // 只能用于对象的展开

以上就是 对象的扩展运算符展开运算符 的相同点和不同点,经过整理小白搞清楚了如何使用这些好用的组件。小白还会继续努力学习编码,争取掌握更多好用又有效率的组件,拜读更多优秀的代码!

热门相关:洪荒二郎传   不该有的爱   魔神狂后   重生之女将星   楚氏赘婿