实用的几种js代码（Vue 2）

已于 2024-04-07 11:09:32 修改
阅读量775 收藏 13
点赞数 15
文章标签： javascript vue.js 前端
于 2024-04-03 13:32:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rb258369/article/details/137342231
版权

1、随机生成字符串

<template>
  <div>
    <p>随机字符串：</p>
    <p>{{ randomString }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      randomString: '' // 初始化随机字符串为空
    };
  },
  created() {
    this.generateRandomString();
  },
  methods: {
    randomStr() {
      return Math.random().toString(20).slice(2);
    },
    generateRandomString() {
      this.randomString = this.randomStr();
    }
  }
}
</script>

在这个示例中：

  1. 在 Vue 实例中定义了一个 randomStr 方法，用于生成随机字符串。
  2. 定义了 randomString 数据属性，用于存储生成的随机字符串。
  3. 在 Vue 实例的 created 生命周期钩子中调用 generateRandomString 方法，以在组件创建时生成随机字符串。
  4. generateRandomString 方法调用 randomStr 方法生成随机字符串，并将结果赋给 randomString 数据属性。
  5. 在模板中使用插值语法 {{ randomString }} 来显示生成的随机字符串。

通过以上代码，您可以在 Vue 组件中生成并显示随机字符串。

2、实现字符串翻转

<template>
  <div>
    <p>反转字符串示例：</p>
    <p>原始字符串："{{ originalString }}"</p>
    <p>反转后字符串："{{ reversedString }}"</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalString: "vue 入门到精通", // 初始化原始字符串
      reversedString: "" // 初始化反转后字符串为空
    };
  },
  created() {
    this.reverseOriginalString();
  },
  methods: {
    reverseStr(str) {
      return str.split("").reverse().join("");
    },
    reverseOriginalString() {
      this.reversedString = this.reverseStr(this.originalString);
    }
  }
}
</script>

在这个示例中：

  1. 在 Vue 实例中定义了一个 reverseStr 方法，用于反转字符串。
  2. 定义了 originalString 数据属性，用于存储原始字符串。
  3. 定义了 reversedString 数据属性，用于存储反转后的字符串。
  4. 在 Vue 实例的 created 生命周期钩子中调用 reverseOriginalString 方法，以在组件创建时反转原始字符串。
  5. reverseOriginalString 方法调用 reverseStr 方法将原始字符串反转，并将结果赋给 reversedString 数据属性。
  6. 在模板中使用插值语法 {{ originalString }} 和 {{ reversedString }} 分别显示原始字符串和反转后的字符串。

通过以上代码，您可以在 Vue 组件中将指定的字符串进行反转，并显示反转后的结果。

3、删除数组中的重复元素

<template>
  <div>
    <p>Set 转换为数组示例：</p>
    <ul>
      <li v-for="item in setToArray" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      set: new Set([3, 4, 1, 2, 3, 1, 4, 1, 2, 5, 5, 6, 7, 8]), // 创建 Set 对象
      setToArray: [] // 初始化数组为空
    };
  },
  created() {
    this.convertSetToArray();
  },
  methods: {
    convertSetToArray() {
      // 将 Set 转换为数组
      this.setToArray = [...this.set];
    }
  }
}
</script>

在这个示例中：

  1. 在 Vue 实例中定义了一个 set 数据属性，用于存储 Set 对象。
  2. 定义了 setToArray 数据属性，用于存储将 Set 转换为数组后的结果。
  3. 在 Vue 实例的 created 生命周期钩子中调用 convertSetToArray 方法，以在组件创建时将 Set 转换为数组。
  4. convertSetToArray 方法使用扩展运算符 ... 将 Set 转换为数组，并将结果赋给 setToArray 数据属性。
  5. 在模板中使用 v-for 指令遍历 setToArray 数组，并显示每个元素的值。

通过以上代码，您可以在 Vue 组件中将 Set 转换为数组，并显示数组中的元素。

4、RGB到十进制转换机制

<template>
  <div>
    <p>RGB 转换为 Hex 示例：</p>
    <p>RGB(37, 37, 38) 转换为 Hex：{{ rgbToHex }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rgbToHex: '' // 初始化转换后的 Hex 字符串为空
    };
  },
  created() {
    this.convertRgbToHex(37, 37, 38);
  },
  methods: {
    convertRgbToHex(r, g, b) {
      // RGB 转换为 Hex 的函数
      this.rgbToHex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }
  }
}
</script>

在这个示例中：

  1. 在 Vue 实例中定义了一个 rgbToHex 数据属性，用于存储 RGB 转换为 Hex 后的结果。
  2. 在 Vue 实例的 created 生命周期钩子中调用 convertRgbToHex 方法，并传入 RGB 值，以在组件创建时将 RGB 转换为 Hex。
  3. convertRgbToHex 方法根据给定的 RGB 值计算出对应的 Hex 值，并将结果赋给 rgbToHex 数据属性。
  4. 在模板中使用插值语法 {{ rgbToHex }} 显示转换后的 Hex 值。

通过以上代码，您可以在 Vue 组件中将 RGB 颜色值转换为对应的 Hex 格式，并显示转换后的结果。

5、打乱一个数组，重新组合

<template>
  <div>
    <p>数组洗牌示例：</p>
    <p>原始数组：[29, 3, 57, 2, 40]</p>
    <p>洗牌后数组：{{ shuffledArray }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalArray: [29, 3, 57, 2, 40], // 原始数组
      shuffledArray: [] // 初始化洗牌后的数组为空
    };
  },
  created() {
    this.shuffleArray();
  },
  methods: {
    shuffleArray() {
      // 使用 Fisher-Yates 洗牌算法洗牌
      const array = this.originalArray.slice(); // 创建原始数组的副本，以免修改原始数组
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
      this.shuffledArray = array;
    }
  }
}
</script>

在这个示例中：

  1. 在 Vue 实例中定义了一个 originalArray 数据属性，用于存储原始数组。
  2. 定义了 shuffledArray 数据属性，用于存储洗牌后的数组。
  3. 在 Vue 实例的 created 生命周期钩子中调用 shuffleArray 方法，以在组件创建时将原始数组洗牌。
  4. shuffleArray 方法使用 Fisher-Yates 洗牌算法洗牌原始数组，并将洗牌后的结果赋给 shuffledArray 数据属性。
  5. 在模板中使用插值语法 {{ shuffledArray }} 显示洗牌后的数组。

通过以上代码，您可以在 Vue 组件中对数组进行洗牌操作，并显示洗牌后的结果。

6、获取两个日期的时间间隔 （天数）

<template>
  <div>
    <p>计算日期差示例：</p>
    <p>两个日期之间的天数差：</p>
    <p>开始日期：{{ startDate }}</p>
    <p>结束日期：{{ endDate }}</p>
    <p>日期差：{{ dayDifference }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startDate: new Date("2024-04-03"), // 开始日期
      endDate: new Date("2025-04-03"), // 结束日期
      dayDifference: 0 // 初始化日期差为0
    };
  },
  created() {
    this.calculateDayDifference();
  },
  methods: {
    calculateDayDifference() {
      const millisecondsPerDay = 1000 * 60 * 60 * 24;
      const date1 = this.startDate.getTime();
      const date2 = this.endDate.getTime();
      const differenceInMillis = Math.abs(date1 - date2);
      this.dayDifference = Math.ceil(differenceInMillis / millisecondsPerDay);
    }
  }
}
</script>

在这个示例中：

  1. 在 Vue 实例中定义了 startDate 和 endDate 数据属性，分别表示开始日期和结束日期。
  2. 定义了 dayDifference 数据属性，用于存储计算出的日期差。
  3. 在 Vue 实例的 created 生命周期钩子中调用 calculateDayDifference 方法，以在组件创建时计算日期差。
  4. calculateDayDifference 方法根据开始日期和结束日期计算日期差，并将结果赋给 dayDifference 数据属性。
  5. 在模板中使用插值语法 {{ dayDifference }} 显示计算出的日期差。

通过以上代码，您可以在 Vue 组件中计算两个日期之间的天数差，并显示计算结果。

7、获取当天属于今年的第几天

<template>
  <div>
    <p>计算日期在当年中是第几天示例：</p>
    <p>当前日期在当年中是第几天：</p>
    <p>当前日期：{{ currentDate }}</p>
    <p>在当年中的第几天：{{ dayOfYear }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(), // 当前日期
      dayOfYear: 0 // 初始化在当年中的第几天为0
    };
  },
  created() {
    this.calculateDayOfYear();
  },
  methods: {
    calculateDayOfYear() {
      const millisecondsPerDay = 1000 * 60 * 60 * 24;
      const currentDate = this.currentDate;
      const startOfYear = new Date(currentDate.getFullYear(), 0, 0);
      const differenceInMillis = currentDate - startOfYear;
      this.dayOfYear = Math.floor(differenceInMillis / millisecondsPerDay);
    }
  }
}
</script>

在这个示例中：

  1. 在 Vue 实例中定义了 currentDate 数据属性，表示当前日期。
  2. 定义了 dayOfYear 数据属性，用于存储计算出的当前日期在当年中的第几天。
  3. 在 Vue 实例的 created 生命周期钩子中调用 calculateDayOfYear 方法，以在组件创建时计算当前日期在当年中的第几天。
  4. calculateDayOfYear 方法根据当前日期计算在当年中的第几天，并将结果赋给 dayOfYear 数据属性。
  5. 在模板中使用插值语法 {{ dayOfYear }} 显示计算出的结果。

通过以上代码，您可以在 Vue 组件中计算当前日期在当年中的第几天，并显示计算结果。

8、截断字符串长度(截取字符串长度,超过部分显示为 ...)

<template>
  <div>
    <p>截取字符串示例：</p>
    <p>字符串截取结果：</p>
    <p>原始字符串：{{ originalString }}</p>
    <p>截取长度为7：{{ splitString(7) }}</p>
    <p>截取长度为10：{{ splitString(10) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalString: "vue is good web frame" // 原始字符串
    };
  },
  methods: {
    splitString(length) {
      const string = this.originalString;
      return string.length < length ? string : `${string.slice(0, length - 3)}...`;
    }
  }
}
</script>

在这个示例中：

  1. 在 Vue 实例中定义了 originalString 数据属性，表示原始字符串。
  2. 定义了 splitString 方法，接收一个参数 length，用于截取字符串。
  3. splitString 方法根据传入的 length 参数，截取原始字符串并返回截取结果。
  4. 在模板中使用 splitString 方法并传入不同的截取长度，来显示截取结果。

通过以上代码，您可以在 Vue 组件中截取字符串并显示截取结果。

9、判断数组是否为空

<template>
  <div>
    <p>检查数组是否非空示例：</p>
    <p>数组非空检查结果：</p>
    <p>数组 [6, 66, 666] 是否非空：{{ checkArrayNotEmpty([6, 66, 666]) }}</p>
    <p>空数组 [] 是否非空：{{ checkArrayNotEmpty([]) }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    checkArrayNotEmpty(arr) {
      return Array.isArray(arr) && arr.length > 0;
    }
  }
}
</script>

在这个示例中：

  1. 定义了 checkArrayNotEmpty 方法，接收一个参数 arr，用于检查数组是否非空。
  2. checkArrayNotEmpty 方法使用 Array.isArray 来确保传入的参数是一个数组，并且使用 arr.length > 0 来检查数组是否非空。
  3. 在模板中使用 checkArrayNotEmpty 方法来检查不同数组是否非空，并显示检查结果。

通过以上代码，您可以在 Vue 组件中检查数组是否非空，并显示检查结果。

10、合并两个数组为一个数组

<template>
  <div>
    <p>合并数组示例：</p>
    <p>合并结果：</p>
    <p>数组 a：{{ arrayA }}</p>
    <p>数组 b：{{ arrayB }}</p>
    <p>合并后的数组：{{ mergedArray }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arrayA: [1, 2, 3], // 数组 a
      arrayB: [4, 5, 6] // 数组 b
    };
  },
  computed: {
    mergedArray() {
      return this.arrayA.concat(this.arrayB);
    }
  }
}
</script>

在这个示例中：

  1. 在 Vue 实例中定义了 arrayA 和 arrayB 数据属性，分别表示数组 a 和数组 b。
  2. 使用计算属性 mergedArray 来合并数组 a 和数组 b，并返回合并后的结果。
  3. 在模板中使用插值语法 {{ mergedArray }} 来显示合并后的数组。

通过以上代码，您可以在 Vue 组件中合并两个数组，并显示合并结果。

11、英文句子首字母大写转换(实现英文句子中，每个单词首字母大写)

<template>
  <div>
    <p>将每个单词首字母大写示例：</p>
    <p>处理结果：</p>
    <p>"hello vue js" 处理结果：{{ capitalizeString("hello vue js") }}</p>
    <p>"你好呀 js" 处理结果：{{ capitalizeString("你好呀 js") }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    capitalizeString(str) {
      return str.replace(/\b[a-z]/g, (char) => char.toUpperCase());
    }
  }
}
</script>

在这个示例中：

  1. 定义了 capitalizeString 方法，接收一个参数 str，用于将每个单词的首字母大写。
  2. capitalizeString 方法使用正则表达式 \b[a-z] 来匹配每个单词的首字母，并通过回调函数 char.toUpperCase() 来将其转换为大写字母。
  3. 在模板中使用 capitalizeString 方法来处理不同的字符串，并显示处理结果。

通过以上代码，您可以在 Vue 组件中将每个单词的首字母大写，并显示处理结果。

12、数组删除元素(给定的数组从左边开始删除 n 个元素，默认n=1)

<template>
  <div>
    <p>移除数组的前 n 个元素示例：</p>
    <p>处理结果：</p>
    <p>移除前 1 个元素：{{ dropArray([10, 20, 30, 40]) }}</p>
    <p>移除前 2 个元素：{{ dropArray([10, 20, 30, 40], 2) }}</p>
    <p>移除前 42 个元素：{{ dropArray([10, 20, 30, 40], 42) }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    dropArray(arr, n = 1) {
      return arr.slice(n);
    }
  }
}
</script>

在这个示例中：

  1. 定义了 dropArray 方法，接收两个参数 arr 和 n，用于移除数组的前 n 个元素，默认值为 1。
  2. dropArray 方法使用 slice 方法来移除数组的前 n 个元素，并返回新的数组。
  3. 在模板中使用 dropArray 方法来移除不同数组的前 n 个元素，并显示处理结果。

通过以上代码，您可以在 Vue 组件中移除数组的前 n 个元素，并显示处理结果。

13、获取当前日期的时间部分

<template>
  <div>
    <p>从日期获取时间示例：</p>
    <p>处理结果：</p>
    <p>当前时间：{{ getTimeFromDate(new Date()) }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    getTimeFromDate(date) {
      return date.toTimeString().slice(0, 8);
    }
  }
}
</script>

在这个示例中：

  1. 定义了 getTimeFromDate 方法，接收一个参数 date，用于从日期对象中获取时间部分。
  2. getTimeFromDate 方法使用 toTimeString 方法将日期对象转换为时间字符串，并使用 slice 方法提取时间部分。
  3. 在模板中使用 getTimeFromDate 方法来获取当前时间，并显示处理结果。

通过以上代码，您可以在 Vue 组件中从日期对象中获取时间部分，并显示处理结果。

14、判断是否是json字符串

<template>
  <div>
    <p>检查字符串是否为 JSON 示例：</p>
    <p>处理结果：</p>
    <p>检查 '{"name":"小明","address":"苏州"}' 是否为 JSON：{{ checkJSON('{"name":"小明","address":"苏州"}') }}</p>
    <p>检查 '{"name":"小王",address:"南京"}' 是否为 JSON：{{ checkJSON('{"name":"小王",address:"南京"}') }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    checkJSON(str) {
      try {
        JSON.parse(str);
        return true;
      } catch (e) {
        return false;
      }
    }
  }
}
</script>

在这个示例中：

  1. 定义了 checkJSON 方法，接收一个参数 str，用于检查字符串是否为 JSON 格式。
  2. checkJSON 方法使用 JSON.parse 来尝试解析字符串，如果解析成功则返回 true，否则返回 false。
  3. 在模板中使用 checkJSON 方法来检查不同字符串是否为 JSON 格式，并显示处理结果。

通过以上代码，您可以在 Vue 组件中检查字符串是否为 JSON 格式，并显示处理结果。

15、获取当前网址

<template>
  <div>
    <p>获取当前页面 URL 示例：</p>
    <p>处理结果：</p>
    <p>当前页面 URL：{{ getCurrentURL() }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    getCurrentURL() {
      return window.location.href;
    }
  }
}
</script>

在这个示例中：

  1. 定义了 getCurrentURL 方法，用于获取当前页面的 URL。
  2. getCurrentURL 方法直接访问 window.location.href 属性获取当前页面的 URL。
  3. 在模板中使用 getCurrentURL 方法来获取当前页面的 URL，并显示处理结果。

通过以上代码，您可以在 Vue 组件中获取当前页面的 URL，并显示处理结果。

16、数组排序(根据获取的数组内容不同，若明确其中的某个字符串是有规律的，我们可以通过截取其中的字符串进行处理排序问题)

<template>
  <div>
    <p>对数组中的数字和非数字元素进行排序示例：</p>
    <p>处理结果：</p>
    <ul>
      <li v-for="item in sortedData" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        "图像001-00005-fr_清单人工通过",
        "图像001-000b3-fr_清单人工通过",
        "图像001-00003-fr_清单人工通过",
        "图像001-00004-fr_清单人工通过",
        "图像001-000a6-fr_自动通过",
        "图像001-000b6-fr_自动通过",
        "图像001-02c56-fr_通过",
      ]
    };
  },
  computed: {
    sortedData() {
      const numbers = this.data.filter((str) => /^\d+$/.test(str));
      const nonNumbers = this.data.filter((str) => !/^\d+$/.test(str));

      numbers.sort((a, b) => parseInt(a, 10) - parseInt(b, 10));
      nonNumbers.sort((a, b) => a.localeCompare(b));

      return [...numbers, ...nonNumbers];
    }
  }
}
</script>

在这个示例中：

  1. 在 data 中定义了一个数组，包含了需要排序的数据。
  2. 使用 computed 属性定义了 sortedData 计算属性，该属性返回一个对数字和非数字元素分别排序后的新数组。
  3. 在模板中使用 v-for 指令遍历 sortedData 数组，并显示每个元素的内容。

通过以上代码，您可以在 Vue 组件中对数组中的数字和非数字元素进行排序，并显示处理结果。

17、常用正则（手机号、身份证、网址、邮箱、纳税号）

// 手机号
const phoneRegex = /^1[3-9]\d{9}$/;

//身份证
const idCard =
  /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

//网址
const domain =
  /(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;

//邮箱
const email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

//纳税号
const corporationTax = /^[0-9A-Z]{15,20}$/;

//调用正则
console.log(idCard.test('15236985214'))

18、手机号隐藏中间4位

function mobile(data) {
  return data.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
}
console.log(mobile("15236985214"));

19、证件号脱敏，包括但不限于身份证（1）

function idCard(data) {
  return data.replace(/(\d{4})\d*([0-9xX]{4})/, "$1******$2");
}

console.log(idCard('143666196316874569')); // 1436******4569

20、证件号脱敏，包括但不限于身份证（2）

function idCard(data) {
  if (data.toString().length == 18) {
    return data.slice(0, 2) + "****************" + data.slice(16, 18);
  } else if (data.toString().length == 15) {
    return data.slice(0, 2) + "***********" + data.slice(13, 15);
  }
}

console.log(idCard('143666196316874569')); // 14****************69

21、证件号脱敏，包括但不限于身份证（3），data->数据，beforeLen->前置位数，afterLen->后置位数

function newIdCard(data, beforeLen, afterLen) {
  let dataLenth = data.length - beforeLen - afterLen;
  let middleStr = "";
  for (let i = 0; i < dataLenth; i++) {
    middleStr += "*";
  }
  return (
    data.slice(0, beforeLen) +
    middleStr +
    data.substring(data.length - afterLen)
  );
}

console.log(newIdCard("143666196316874569", 4, 7)); // 1436*******6874569

22、通过身份证获取生日

function idCardBirthday(data) {
  //获取出生年月日
  var year = data.substring(6, 10);
  var month = data.substring(10, 12);
  var day = data.substring(12, 14);
  return `${year}-${month}-${day}`;
}
console.log(idCardBirthday("143666196306208069")); // 1963-06-20

23、通过身份证获取性别

function idCardGender(data) {
  //1 男 2 女
  let gender = parseInt(data.slice(-2, -1)) % 2 == 1 ? 1 : 2;
  console.log(gender);
  return gender == 1 ? "男" : "女";
}

console.log(idCardGender("143666196306208069"));

24、金额处理

function money(num) {
  return num >= 10000 ? (parseFloat(num) * 10000) / 100000000 + "万" : num;
}

console.log(money(10000));// 1万

Onlyᝰ
关注
  • 15
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue2全部代码 Vue2案例代码 Vue2教程代码.rar
11-23
与自己的 Vue2 blog相关的代码
前端（四）——vue.js、vue、vue2、vue3
杜永康的博客
07-07 6102
Vue.js是由华裔工程师尤雨溪（Evan You）于2014年创建的开源JavaScript框架。他在Google工作期间，积累了丰富的前端开发经验，并觉得现有的前端框架存在一些不足之处，如复杂性、学习曲线陡峭等。因此，尤雨溪决定开发一个简单、灵活且高效的框架，使开发者能够更轻松地构建用户界面。他的灵感来源于AngularJS和React这两个优秀的前端框架。尤雨溪最初在2013年开始着手构建这个框架的原型，最终于2014年正式发布了Vue.js 1.0版。
Vue.js 状态管理：Pinia 与 Vuex
热门推荐
努力是为了站在万人之中，成为别人的光
02-08 1万+
我将简要总结 Vuex 和 Pinia。如果你想要更详尽的解释，我建议阅读Vuex 文档和Pinia 文档。Pinia是一个新的状态管理库，可帮助你在 Vue.js 应用程序中跨组件管理和存储响应数据和状态。Pinia 由 Vue 核心团队成员之一 Eduardo San Martin Morote 创建。Pinia 使用新的反应系统来构建一个直观且完全类型化的状态管理系统。库中引入的新特性是促成 Pinia 推荐的因素之一。总体而言，Pinia 显得轻巧、简单且易于掌握。
总结VUE几种页面刷新方法
人生代码 ---- 公众号
06-11 4492
总结VUE几种页面刷新方法
vue3新特性与vue2的不同点对比
qq_48896417的博客
06-19 1347
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建， 并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。 vuejs版本在2.7之后版本我们认为他是优化和重构的性能语法更优秀且易用的新版本, 我们一般就认为他是vue3,相比较过去的vue2的旧版本,它更加容易维护,具有更加丰富的API和语法糖, 也支持了typescript技术的使用.当然它一些新特性和功能的源码实现也和旧版相比较差异较大
vue跳转页面的几种方法(推荐)
10-15
主要介绍了vue不同方法跳转页面，本文给大家分享多种方法，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
js技巧之十几行的代码实现vue.watch代码
01-19
getter和setter getter 是一种获得属性值的方法，setter是一种设置属性...这里有前辈总结的 几种实现getter和setter的方法，而且他还总结了一些Object.prototype内控制属性枚举的特性的隐式属性。 我这里选用了比较好构
vue实现几秒后跳转新页面代码
10-14
主要介绍了vue实现几秒后跳转新页面代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
js代码-vue.json 用户片段
07-16
js代码-vue.json 用户片段
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 221
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
Vue.js的发展史（一）
2301_79683791的博客
05-15 781
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
【学习笔记】后端（Ⅰ）—— NodeJS（Ⅱ）
Eddie_hyh的博客
05-21 444
NodeJS（Ⅱ）
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
SongZhengxing_的博客
05-18 206
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
前端开发攻略---用Vue实现无限滚动的几种方法
最新发布
nibabaoo的博客
05-22 416
用vue实现无限滚动
虚拟列表 vue-virtual-scroller 的使用
小秀的博客
05-22 294
【代码】虚拟列表 vue-virtual-scroller 的使用。
【MySQL精通之路】AdminAPI-使用
Anakki的博客
05-19 691
本文介绍MySQL SHELL提供的MySQL AdminAPI，使您能够，使用它们创建和，并集成。
JavaScript函数进阶（1）——递归和堆栈
qq_60624992的博客
05-16 404
当一个函数解决一个任务时，在解决的过程中它可以调用很多其它函数。在部分情况下，函数会调用。有关正在运行的函数的执行过程的相关信息被存储在其。通过迭代的思路来实现，使用循环来实现。通过函数来不断调用自身来实现。
BootStrapvue
09-15
要将BootstrapVue添加到Vue项目中，有几种方法可以选择。一种是使用包管理器，可以通过npm或yarn安装BootstrapVue，并在main.js文件中导入和使用它。另一种方法是通过CDN链接，将Bootstrap和BootstrapVue的CSS和JS...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值