-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
360 lines (307 loc) · 38.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>前端日记 - 前端学习笔记</title><meta name="author" content="YangTao"><meta name="copyright" content="YangTao"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="share & study">
<meta property="og:type" content="website">
<meta property="og:title" content="前端日记">
<meta property="og:url" content="https://whyta.cn/index.html">
<meta property="og:site_name" content="前端日记">
<meta property="og:description" content="share & study">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://xiaojinhe-cdn.iyoudui.cn/upload/common/2023/avata.jpg">
<meta property="article:author" content="YangTao">
<meta property="article:tag" content="Hexo Blog 前端 JavaScript">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://xiaojinhe-cdn.iyoudui.cn/upload/common/2023/avata.jpg"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://whyta.cn/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: {"path":"/search.xml","preload":false,"top_n_per_article":1,"unescape":false,"languages":{"hits_empty":"找不到您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
noticeOutdate: undefined,
highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
copy: {
success: '复制成功',
error: '复制错误',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: false,
post: false
},
runtime: '天',
dateSuffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: {"limitCount":50,"languages":{"author":"作者: YangTao","link":"链接: ","source":"来源: 前端日记","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
lightbox: 'fancybox',
Snackbar: undefined,
infinitegrid: {
js: 'https://cdn.jsdelivr.net/npm/@egjs/infinitegrid/dist/infinitegrid.min.js',
buttonText: '加载更多'
},
isPhotoFigcaption: false,
islazyload: false,
isAnchor: false,
percent: {
toc: true,
rightside: false,
},
autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: '前端日记',
isPost: false,
isHome: true,
isHighlightShrink: false,
isToc: false,
postUpdate: '2024-10-24 02:55:16'
}</script><script>(win=>{
win.saveToLocal = {
set: (key, value, ttl) => {
if (ttl === 0) return
const now = Date.now()
const expiry = now + ttl * 86400000
const item = {
value,
expiry
}
localStorage.setItem(key, JSON.stringify(item))
},
get: key => {
const itemStr = localStorage.getItem(key)
if (!itemStr) {
return undefined
}
const item = JSON.parse(itemStr)
const now = Date.now()
if (now > item.expiry) {
localStorage.removeItem(key)
return undefined
}
return item.value
}
}
win.getScript = (url, attr = {}) => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
script.onerror = reject
script.onload = script.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
script.onload = script.onreadystatechange = null
resolve()
}
Object.keys(attr).forEach(key => {
script.setAttribute(key, attr[key])
})
document.head.appendChild(script)
})
win.getCSS = (url, id = false) => new Promise((resolve, reject) => {
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = url
if (id) link.id = id
link.onerror = reject
link.onload = link.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
link.onload = link.onreadystatechange = null
resolve()
}
document.head.appendChild(link)
})
win.activateDarkMode = () => {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
win.activateLightMode = () => {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
}
}
const t = saveToLocal.get('theme')
if (t === 'dark') activateDarkMode()
else if (t === 'light') activateLightMode()
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
if (asideStatus === 'hide') {
document.documentElement.classList.add('hide-aside')
} else {
document.documentElement.classList.remove('hide-aside')
}
}
const detectApple = () => {
if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
document.documentElement.classList.add('apple')
}
}
detectApple()
})(window)</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://xiaojinhe-cdn.iyoudui.cn/upload/common/2023/avata.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">296</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">31</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">11</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 文章</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 娱乐</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/images/"><i class="fa-fw fas fa-images"></i><span> 图库</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> Music</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> Movie</span></a></li><li><a class="site-page child" href="/about/resume.html"><i class="fa-fw fa fa-address-card"></i><span> 简历</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 联系我</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> About</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('https://xiaojinhe-cdn.iyoudui.cn/upload/common/20230808/hero-bg.webp')"><nav id="nav"><span id="blog-info"><a href="/" title="前端日记"><img class="site-icon" src="https://xiaojinhe-cdn.iyoudui.cn/upload/common/2023/avata.jpg"/><span class="site-name">前端日记</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 文章</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 娱乐</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/images/"><i class="fa-fw fas fa-images"></i><span> 图库</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> Music</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> Movie</span></a></li><li><a class="site-page child" href="/about/resume.html"><i class="fa-fw fa fa-address-card"></i><span> 简历</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 联系我</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> About</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">前端日记</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/ytanck" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="mailto:[email protected]" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #4a7dbe;"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/0dced23f9a71/" title="Vue的不同风格写法，你知道么？">Vue的不同风格写法，你知道么？</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-10-24T10:52:24.000Z" title="发表于 2024-10-24 10:52:24">2024-10-24</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue/">Vue</a></span></div><div class="content">引入打开 Vue3 的官方文档，它首先会告诉你，Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。文档为我们提供一系列两种风格的代码参考，供我们按照偏好进行选择。
实际上，Vue3 组件可不止两种写法，而是多达十几种！然而，不管是什么写法，它们都是基于同一个底层系统实现的，概念之间也是彼此相通的，只是使用的接口不同。在实际开发中，我们也不会同时使用到那么多种写法，但是这并不意味着我们不需要去了解这些写法！
setup 语法糖setup 语法糖应该是最常用的写法了。在 Vue3 中，我们想封装一个组件，最习惯的做法还是新建一个 Vue 文件，并将组件代码写在文件中。具体是：页面结构写在 template 中，页面逻辑写在 script 中，页面样式写在 style 中。
总之，我们将与该组件相关的代码都写在一起、放在一个文件中单独维护，在需要该组件的地方引入使用。
这里我们使用了 setup 语法糖，直接在 script 中书写我们的 setup 内部的逻辑。
12345678910<template> <div>{{ ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/491993a46c08/" title="GitHub">GitHub</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-10-24T02:54:56.562Z" title="发表于 2024-10-24 02:54:56">2024-10-24</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E6%8A%80%E6%9C%AF/">技术</a></span></div><div class="content">
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 的理解？常见的命令？
...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/d9b2231487d1/" title="一文解读react-hook(useState、useReducer、useEffect、useCallback、useMemo、useRef、useContext...)">一文解读react-hook(useState、useReducer、useEffect、useCallback、useMemo、useRef、useContext...)</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-09-06T10:02:42.000Z" title="发表于 2024-09-06 10:02:42">2024-09-06</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/React/">React</a></span></div><div class="content">前言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。不要在循环、条件判断或者 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/dc707376a421/" title="GPT4升级指南(2024年5月最新)">GPT4升级指南(2024年5月最新)</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-05-15T10:21:23.000Z" title="发表于 2024-05-15 10:21:23">2024-05-15</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/GPT/">GPT</a></span></div><div class="content">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.
您的信用卡被拒绝了。请尝试用借记卡支付。
你的卡已被拒绝。
您的金融卡已被拒絕。
您的信用卡被拒絕了。請嘗 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/a4dd5826810e/" title="CSS @符号规则的使用（@font-face、@keyframes、@media、@scope等）">CSS @符号规则的使用（@font-face、@keyframes、@media、@scope等）</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-02-20T11:23:26.000Z" title="发表于 2024-02-20 11:23:26">2024-02-20</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/CSS/">CSS</a></span></div><div class="content">随着前端开发的不断发展，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 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/416f91850271/" title="CSS 函数详解url、min、rgb、blur、scale、rotate、translate等">CSS 函数详解url、min、rgb、blur、scale、rotate、translate等</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-02-20T11:22:16.000Z" title="发表于 2024-02-20 11:22:16">2024-02-20</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/CSS/">CSS</a></span></div><div class="content">随着技术的不断进步，CSS 已经从简单的样式表发展成为拥有众多内置函数的强大工具。这些函数不仅增强了开发者的设计能力，还使得样式应用更加动态、灵活和响应式。本文将深入探讨 CSS 常见的 66 个函数，逐一剖析它们的功能和用法，一起进入这个充满魔力的 CSS 函数世界！
基础attr()attr() 函数用于获取被选中元素的某个 HTML 属性值，并在样式文件中使用该值。这个函数也可以应用于伪类元素，此时它获取的是伪元素所依附的原始元素的属性值。
下面来看一个简单的例子：
123div { background-color: attr(data-color);}
在这个例子中，如果有一个 <div> 元素带有 data-color 属性（如 <div data-color="red">），那么该元素的背景色将被设置为红色。
注意，attr() 函数总是返回一个字符串，因此在使用它时需要确保所获取的属性值能够正确地被解析和应用到样式中。此外，不是所有的 CSS 属性都支持 attr() 函数，它通常用于那些可以接受字符串 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/1d5db749b4b4/" title="JS生成UUID的四种方法">JS生成UUID的四种方法</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-12-07T10:13:57.000Z" title="发表于 2023-12-07 10:13:57">2023-12-07</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JavaScript/">JavaScript</a></span></div><div class="content">全局唯一标识符（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 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/356e62f9f174/" title="js实现数字滚动增长动画多种方案">js实现数字滚动增长动画多种方案</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-12-07T10:08:36.000Z" title="发表于 2023-12-07 10:08:36">2023-12-07</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JavaScript/">JavaScript</a></span></div><div class="content">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 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/cb1902f58a3e/" title="Vue 改变数据，页面不刷新的问题">Vue 改变数据，页面不刷新的问题</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-12-01T11:41:54.000Z" title="发表于 2023-12-01 11:41:54">2023-12-01</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue/">Vue</a></span></div><div class="content">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 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/69044459c6ec/" title="Vue 页面权限控制和登陆验证">Vue 页面权限控制和登陆验证</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-12-01T11:36:45.000Z" title="发表于 2023-12-01 11:36:45">2023-12-01</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue/">Vue</a></span></div><div class="content">Vue 页面权限控制和登陆验证页面权限控制页面权限控制是什么意思呢？
就是一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的。如果一个页面，有角色越权访问，这时就得做出限制了。
通过动态添加路由和菜单来做控制，不能访问的页面不添加到路由表里，这是其中一种办法。
另一种办法就是所有的页面都在路由表里，只是在访问的时候要判断一下角色权限。如果有权限就让访问，没有权限就拒绝，跳转到 404 页面。
思路：
在每一个路由的 meta 属性里，将能访问该路由的角色添加到 roles 里。用户每次登陆后，将用户的角色返回。然后在访问页面时，把路由的 meta 属性和用户的角色进行对比，如果用户的角色在路由的 roles 里，那就是能访问，如果不在就拒绝访问。
代码示例：
路由信息
123456789101112131415161718routes: [ { path: '/login', name: 'login', meta: { rol ...</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/#content-inner">2</a><span class="space">…</span><a class="page-number" href="/page/30/#content-inner">30</a><a class="extend next" rel="next" href="/page/2/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://xiaojinhe-cdn.iyoudui.cn/upload/common/2023/avata.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">YangTao</div><div class="author-info__description">share & study</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">296</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">31</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">11</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/ytanck"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/ytanck" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="mailto:[email protected]" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #4a7dbe;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">=>我的个人网站，分享前端技术及踩坑记录。如果喜欢，欢迎Star!</div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/post/0dced23f9a71/" title="Vue的不同风格写法，你知道么？">Vue的不同风格写法，你知道么？</a><time datetime="2024-10-24T10:52:24.000Z" title="发表于 2024-10-24 10:52:24">2024-10-24</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/post/491993a46c08/" title="GitHub">GitHub</a><time datetime="2024-10-24T02:54:56.562Z" title="发表于 2024-10-24 02:54:56">2024-10-24</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/post/d9b2231487d1/" title="一文解读react-hook(useState、useReducer、useEffect、useCallback、useMemo、useRef、useContext...)">一文解读react-hook(useState、useReducer、useEffect、useCallback、useMemo、useRef、useContext...)</a><time datetime="2024-09-06T10:02:42.000Z" title="发表于 2024-09-06 10:02:42">2024-09-06</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/post/dc707376a421/" title="GPT4升级指南(2024年5月最新)">GPT4升级指南(2024年5月最新)</a><time datetime="2024-05-15T10:21:23.000Z" title="发表于 2024-05-15 10:21:23">2024-05-15</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/post/a4dd5826810e/" title="CSS @符号规则的使用（@font-face、@keyframes、@media、@scope等）">CSS @符号规则的使用（@font-face、@keyframes、@media、@scope等）</a><time datetime="2024-02-20T11:23:26.000Z" title="发表于 2024-02-20 11:23:26">2024-02-20</time></div></div></div></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/%E9%9D%A2%E8%AF%95/" style="font-size: 1.21em; color: rgb(188, 199, 29)">面试</a><a href="/tags/JavaScript/" style="font-size: 1.34em; color: rgb(49, 131, 177)">JavaScript</a><a href="/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8F/" style="font-size: 1.28em; color: rgb(46, 78, 185)">小程序</a><a href="/tags/CSS/" style="font-size: 1.41em; color: rgb(194, 4, 194)">CSS</a><a href="/tags/ES6/" style="font-size: 1.34em; color: rgb(168, 200, 181)">ES6</a><a href="/tags/utils/" style="font-size: 1.15em; color: rgb(70, 48, 101)">utils</a><a href="/tags/%E6%AD%A3%E5%88%99/" style="font-size: 1.17em; color: rgb(70, 30, 127)">正则</a><a href="/tags/NodeJS/" style="font-size: 1.38em; color: rgb(0, 61, 142)">NodeJS</a><a href="/tags/Express/" style="font-size: 1.15em; color: rgb(46, 78, 5)">Express</a><a href="/tags/Koa/" style="font-size: 1.15em; color: rgb(116, 81, 167)">Koa</a><a href="/tags/test/" style="font-size: 1.15em; color: rgb(86, 31, 25)">test</a><a href="/tags/window/" style="font-size: 1.15em; color: rgb(91, 193, 117)">window</a><a href="/tags/yaml/" style="font-size: 1.15em; color: rgb(46, 160, 194)">yaml</a><a href="/tags/github/" style="font-size: 1.15em; color: rgb(89, 36, 56)">github</a><a href="/tags/vue/" style="font-size: 1.15em; color: rgb(24, 77, 117)">vue</a><a href="/tags/webpack/" style="font-size: 1.3em; color: rgb(172, 40, 129)">webpack</a><a href="/tags/meta/" style="font-size: 1.15em; color: rgb(196, 116, 135)">meta</a><a href="/tags/cli/" style="font-size: 1.15em; color: rgb(99, 96, 103)">cli</a><a href="/tags/ajax/" style="font-size: 1.15em; color: rgb(69, 46, 91)">ajax</a><a href="/tags/React/" style="font-size: 1.45em; color: rgb(113, 174, 194)">React</a><a href="/tags/%E7%AE%97%E6%B3%95/" style="font-size: 1.39em; color: rgb(71, 28, 98)">算法</a><a href="/tags/GPT/" style="font-size: 1.15em; color: rgb(26, 185, 58)">GPT</a><a href="/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" style="font-size: 1.22em; color: rgb(26, 45, 40)">设计模式</a><a href="/tags/Git/" style="font-size: 1.28em; color: rgb(101, 127, 71)">Git</a><a href="/tags/Http/" style="font-size: 1.36em; color: rgb(46, 198, 176)">Http</a><a href="/tags/Linux/" style="font-size: 1.26em; color: rgb(161, 134, 105)">Linux</a><a href="/tags/TypeScript/" style="font-size: 1.32em; color: rgb(65, 109, 46)">TypeScript</a><a href="/tags/vue2/" style="font-size: 1.43em; color: rgb(184, 31, 89)">vue2</a><a href="/tags/Vue/" style="font-size: 1.19em; color: rgb(180, 131, 33)">Vue</a><a href="/tags/vue3/" style="font-size: 1.24em; color: rgb(180, 70, 123)">vue3</a><a href="/tags/proxy/" style="font-size: 1.17em; color: rgb(44, 0, 133)">proxy</a></div></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">296</div></div><div class="webinfo-item"><div class="item-name">已运行时间 :</div><div class="item-count" id="runtimeshow" data-publishDate="2019-01-01T00:00:00.000Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">525.1k</div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-10-24T02:55:14.308Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">©2023 - 2024 By YangTao</div><div class="footer_custom_text"><a target="_blank" rel="noopener" href="https://beian.miit.gov.cn/"><span>鄂ICP备2021000562号</span></a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="translateLink" type="button" title="简繁转换">简</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="chat-btn" type="button" title="聊天"><i class="fas fa-sms"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><div class="js-pjax"><script>window.typedJSFn = {
init: (str) => {
window.typed = new Typed('#subtitle', Object.assign({
strings: str,
startDelay: 300,
typeSpeed: 150,
loop: true,
backSpeed: 50,
}, null))
},
run: (subtitleType) => {
if (true) {
if (typeof Typed === 'function') {
subtitleType()
} else {
getScript('https://cdn.jsdelivr.net/npm/typed.js/dist/typed.umd.min.js').then(subtitleType)
}
} else {
subtitleType()
}
}
}
</script><script>function subtitleType () {
fetch('https://v1.hitokoto.cn')
.then(response => response.json())
.then(data => {
if (true) {
const from = '出自 ' + data.from
const sub = ["江城子 · I T","十年生死两茫茫，写程序，到天亮","千行代码，Bug何处藏","纵使上线又怎样，朝令改，夕断肠","老板每天新想法，天天改，日日忙","相顾无言，惟有泪千行","每晚灯火阑珊处，夜难寐，又加班"]
sub.unshift(data.hitokoto, from)
typedJSFn.init(sub)
} else {
document.getElementById('subtitle').textContent = data.hitokoto
}
})
}
typedJSFn.run(subtitleType)
</script></div><script id="canvas_nest" defer="defer" color="0,0,255" opacity="0.7" zIndex="-1" count="99" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-nest.min.js"></script><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/click-heart.min.js" async="async" mobile="false"></script><script>(() => {
const isChatBtn = true
const isChatHideShow = false
if (isChatBtn) {
const close = () => {
Chatra('minimizeWidget')
Chatra('hide')
}
const open = () => {
Chatra('openChat', true)
Chatra('show')
}
window.ChatraSetup = {
startHidden: true
}
window.chatBtnFn = () => {
const isShow = document.getElementById('chatra').classList.contains('chatra--expanded')
isShow ? close() : open()
}
} else if (isChatHideShow) {
window.chatBtn = {
hide: () => {
Chatra('hide')
},
show: () => {
Chatra('show')
}
}
}
(function(d, w, c) {
w.ChatraID = 'PhLXQufxgCL6iLDEc'
var s = d.createElement('script')
w[c] = w[c] || function() {
(w[c].q = w[c].q || []).push(arguments)
}
s.async = true
s.src = 'https://call.chatra.io/chatra.js'
if (d.head) d.head.appendChild(s)
})(document, window, 'Chatra')
})()</script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span> 数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js"></script></div></div></body></html>