Vue的不同风格写法，你知道么？
引入打开 Vue3 的官方文档，它首先会告诉你，Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。文档为我们提供一系列两种风格的代码参考，供我们按照偏好进行选择。
实际上，Vue3 组件可不止两种写法，而是多达十几种！然而，不管是什么写法，它们都是基于同一个底层系统实现的，概念之间也是彼此相通的，只是使用的接口不同。在实际开发中，我们也不会同时使用到那么多种写法，但是这并不意味着我们不需要去了解这些写法！
setup 语法糖setup 语法糖应该是最常用的写法了。在 Vue3 中，我们想封装一个组件，最习惯的做法还是新建一个 Vue 文件，并将组件代码写在文件中。具体是：页面结构写在 template 中，页面逻辑写在 script 中，页面样式写在 style 中。
总之，我们将与该组件相关的代码都写在一起、放在一个文件中单独维护，在需要该组件的地方引入使用。
这里我们使用了 setup 语法糖，直接在 script 中书写我们的 setup 内部的逻辑。
12345678910<template> <div>{{ ...
GitHub
JavaScript Learning...
阮一峰老师的 ES6 入门教程
ES6 入门教程
==>
学习总结
ES6 简介
参考链接
最新提案
let 和 const 简介
变量的解构赋值
字符串的扩展
字符串的新增方法
正则的扩展
数值的扩展
函数的扩展
数组的扩展
对象的扩展
对象的新增方法
Symbol
Set 和 Map 数据结构
Proxy
Reflect
Promise 对象
async 函数
Generator 函数的语法
Generator 函数的异步应用
Iterator 和 for…of 循环
Class 的基本语法
Class 的继承
Module 的语法
Module 的加载实现
编程风格
读懂 ECMAScript 规格
异步遍历器
ArrayBuffer
装饰器
函数式编程
Mixin
面试系列
面试问题锦集
20道大厂前端面试题
大厂JS必考手写题
JavaScript前端必刷面试题
什么是进程？什么的线程？有什么区别
说说你对 shell 的理解？常见的命令？
...
一文解读react-hook(useState、useReducer、useEffect、useCallback、useMemo、useRef、useContext...)
前言react在16版本之后，加入了fiber架构，官方推荐使用纯函数组件，为此react-hook应运而生。
Hook 使用规则Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：
只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。
123456789101112131415161718192021import React, { useState } from 'react';let isName = true;function Example() { //报错：React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render // 只能在函数最外层调用 Hook。不要在循环、条件判断或者 ...
GPT4升级指南(2024年5月最新)
GPT4升级，开通 ChatGPT Plus, 升级GPT4.0 详细指南，一看就会前言重磅消息： 5月13日，GPT-4o发布，听说是低配钢铁侠的贾维斯？现在 ChatGPT Plus 用户可以直接使用GPT-4o，感受这一全能AI的强大功能。 赶紧体验一下~ 升级GPT4可以更加深度体验哈~
ChatGPT 官方暂停了升级 GPT-4 的入口，但目前官网还可以直接升级。请注意，这种情况可能会变化（截至2024.5月，此途径仍然可用）。
重要提示：请您尽量不要用微软的邮箱升级 Plus 或绑定 API, 会有被封的风险，谨记。
ChatGPT Plus信用卡付款被拒如果您在订阅ChatGPT Plus的过程中遇到了下面的提示，那您这个帐号就极有可能告别ChatGPT Plus了。不过，你可以换干净的、很少人用的IP地址，也是有可能支付成功的。
Your credit card was declined.Try paying with a debit card instead.
您的信用卡被拒绝了。请尝试用借记卡支付。
你的卡已被拒绝。
您的金融卡已被拒絕。
您的信用卡被拒絕了。請嘗 ...
CSS @符号规则的使用（@font-face、@keyframes、@media、@scope等）
随着前端开发的不断发展，CSS 的功能日益强大，其中 @规则扮演着举足轻重的角色。它们不仅扩展了 CSS 的功能边界，还为开发者提供了更加灵活和高效的样式定义方式，让我们来一同探索这些强大而实用的 @ 规则吧！
@font-face@font-face 用于使用自定义字体。它的基本用法包括定义一个字体家族并为这个家族指定一个或多个字体源文件。字体家族是为字体取的名字，而字体源文件则是字体的实际文件，可以通过 URL 指定。字体文件可以有多种格式，如 TrueType (.ttf)、OpenType (.otf)、Embedded OpenType (.eot)、SVG (.svg) 和 WOFF (.woff) 等。
例如，可以这样使用 @font-face：
12345@font-face { font-family: "MyCustomFont"; src: url("MyCustomFont.woff2") format("woff2"), url("MyCustomFon ...
CSS 函数详解url、min、rgb、blur、scale、rotate、translate等
随着技术的不断进步，CSS 已经从简单的样式表发展成为拥有众多内置函数的强大工具。这些函数不仅增强了开发者的设计能力，还使得样式应用更加动态、灵活和响应式。本文将深入探讨 CSS 常见的 66 个函数，逐一剖析它们的功能和用法，一起进入这个充满魔力的 CSS 函数世界！
基础attr()attr() 函数用于获取被选中元素的某个 HTML 属性值，并在样式文件中使用该值。这个函数也可以应用于伪类元素，此时它获取的是伪元素所依附的原始元素的属性值。
下面来看一个简单的例子：
123div { background-color: attr(data-color);}
在这个例子中，如果有一个 <div> 元素带有 data-color 属性（如 <div data-color="red">），那么该元素的背景色将被设置为红色。
注意，attr() 函数总是返回一个字符串，因此在使用它时需要确保所获取的属性值能够正确地被解析和应用到样式中。此外，不是所有的 CSS 属性都支持 attr() 函数，它通常用于那些可以接受字符串 ...
JS生成UUID的四种方法
全局唯一标识符（GUID，Globally Unique Identifier）也称作UUID(Universally Unique IDentifier) 。GUID是一种由算法生成的二进制长度为128位的数字标识符。GUID 的格式为“xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”，其中的 x 是 0-9 或 a-f 范围内的一个32位十六进制数。在理想情况下，任何计算机和计算机集群都不会生成两个相同的GUID。GUID 的总数达到了2^128（3.4×10^38）个，所以随机生成两个相同GUID的可能性非常小，但并不为0。GUID一词有时也专指微软对UUID标准的实现。
UUID有四个版本：UUID Version 1：基于时间的UUID
基于时间的UUID通过计算当前时间戳、随机数和机器MAC地址得到。由于在算法中使用了MAC地址，这个版本的UUID可以保证在全球范围的唯一性。但与此同时，使用MAC地址会带来安全性问题，这就是这个版本UUID受到批评的地方。如果应用只是在局域网中使用，也可以使用退化的算法，以IP地址来代替MAC地址－－Java的UU ...
js实现数字滚动增长动画多种方案
1、简单函数方案123456789101112131415161718192021222324252627<html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <h1 id="numBox"></h1> </body> <script type="text/javascript"> function NumAutoPlusAnimation(baseNumber, finalNum) { var step = (finalNum - baseNumber) / 20;//颗粒化可以控制速度 var count = baseNumber; // 计数器 var initial = 0; var timer = setInter ...
Vue 改变数据，页面不刷新的问题
Vue 改变数据，页面不刷新的问题最近在用 element-ui 开发一个网站，使用 table 组件时，发现修改完数据，有时候会延迟一两秒，页面才会发生变化。
看了一下代码，发现修改数据的代码是这样的
12// popupData是修改的数据，修改完后，赋值给对应的表格数据this.tableData[this.currentRow] = this.popupData
注意事项（以下内容摘自官方文档）由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
举个例子：
1234567var vm = new Vue({ data: { items: ['a', 'b', 'c'] }})vm.items[1] = 'x' // 不是响应性的vm.item ...
Vue 页面权限控制和登陆验证
Vue 页面权限控制和登陆验证页面权限控制页面权限控制是什么意思呢？
就是一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的。如果一个页面，有角色越权访问，这时就得做出限制了。
通过动态添加路由和菜单来做控制，不能访问的页面不添加到路由表里，这是其中一种办法。
另一种办法就是所有的页面都在路由表里，只是在访问的时候要判断一下角色权限。如果有权限就让访问，没有权限就拒绝，跳转到 404 页面。
思路：
在每一个路由的 meta 属性里，将能访问该路由的角色添加到 roles 里。用户每次登陆后，将用户的角色返回。然后在访问页面时，把路由的 meta 属性和用户的角色进行对比，如果用户的角色在路由的 roles 里，那就是能访问，如果不在就拒绝访问。
代码示例：
路由信息
123456789101112131415161718routes: [ { path: '/login', name: 'login', meta: { rol ...