-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
281 lines (249 loc) · 41.9 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
<!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"><title>MintureChan Blog</title><meta name="keywords" content="Minturechan Blog"><meta name="author" content="Minture Chan"><meta name="copyright" content="Minture Chan"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="不忘初心,砥砺前行">
<meta property="og:type" content="website">
<meta property="og:title" content="MintureChan Blog">
<meta property="og:url" content="https://minturechan96.github.io/index.html">
<meta property="og:site_name" content="MintureChan Blog">
<meta property="og:description" content="不忘初心,砥砺前行">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://s2.ax1x.com/2019/11/27/Q9XStf.jpg">
<meta property="article:author" content="Minture Chan">
<meta property="article:tag" content="Minturechan Blog">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://s2.ax1x.com/2019/11/27/Q9XStf.jpg"><link rel="shortcut icon" href="/img/blog.ico"><link rel="canonical" href="https://minturechan96.github.io/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//fonts.googleapis.com" crossorigin=""/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://unpkg.com/fontawesome-free@1.0.4/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://unpkg.com/node-snackbar@0.1.16/dist/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: undefined,
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: '天',
date_suffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: {"limitCount":50,"languages":{"author":"作者: Minture Chan","link":"链接: ","source":"来源: MintureChan Blog","info":"著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。"}},
lightbox: 'mediumZoom',
Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"bottom-right"},
source: {
jQuery: 'https://unpkg.com/jquery@latest/jquery.min.js',
justifiedGallery: {
js: 'https://unpkg.com/justifiedGallery@3.8.1/dist/js/jquery.justifiedGallery.min.js',
css: 'https://unpkg.com/justifiedGallery@3.8.1/dist/css/justifiedGallery.min.css'
},
fancybox: {
js: 'https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js',
css: 'https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css'
}
},
isPhotoFigcaption: true,
islazyload: false,
isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: 'MintureChan Blog',
isPost: false,
isHome: true,
isHighlightShrink: false,
isToc: false,
postUpdate: '2023-08-30 17:54:15'
}</script><noscript><style type="text/css">
#nav {
opacity: 1
}
.justified-gallery img {
opacity: 1
}
#recent-posts time,
#post-meta time {
display: inline !important
}
</style></noscript><script>(win=>{
win.saveToLocal = {
set: function setWithExpiry(key, value, ttl) {
if (ttl === 0) return
const now = new Date()
const expiryDay = ttl * 86400000
const item = {
value: value,
expiry: now.getTime() + expiryDay,
}
localStorage.setItem(key, JSON.stringify(item))
},
get: function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
if (!itemStr) {
return undefined
}
const item = JSON.parse(itemStr)
const now = new Date()
if (now.getTime() > item.expiry) {
localStorage.removeItem(key)
return undefined
}
return item.value
}
}
win.getScript = url => 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()
}
document.head.appendChild(script)
})
win.activateDarkMode = function () {
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 = function () {
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 (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
document.documentElement.classList.add('apple')
}
}
detectApple()
document.addEventListener('pjax:complete', detectApple)})(window)</script><meta name="generator" content="Hexo 5.2.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://s2.ax1x.com/2019/11/27/Q9XStf.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">23</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">10</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">7</div></a></div></div></div><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" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></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="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 更多</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/playlist/"><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> books</span></a></li></ul></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('https://s2.ax1x.com/2019/11/27/Q9Ipfs.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">MintureChan Blog</a></span><div id="menus"><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" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></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="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 更多</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/playlist/"><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> books</span></a></li></ul></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">MintureChan Blog</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/MintureChan96" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:296893907@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></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="post_cover left_radius"><a href="/2022/02/24/page/implement-a-dynamic-table-using-iview/" title="使用iview Table生成动态日期表格"> <img class="post_bg" src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="使用iview Table生成动态日期表格"></a></div><div class="recent-post-info"><a class="article-title" href="/2022/02/24/page/implement-a-dynamic-table-using-iview/" title="使用iview Table生成动态日期表格">使用iview Table生成动态日期表格</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="2022-02-24T08:29:05.000Z" title="发表于 2022-02-24 16:29:05">2022-02-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><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/Vue/">Vue</a></span></div><div class="content">最近接到一个动态渲染table的需求。感觉也挺有意思的,特此分享给大家。</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2022/02/11/page/vue-router-mode/" title="详解vue-router中路由的二种模式"> <img class="post_bg" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f4be21e651024af1b5283d0672f0bf21~tplv-k3u1fbpfcp-no-mark:480:480:0:0.awebp?" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="详解vue-router中路由的二种模式"></a></div><div class="recent-post-info"><a class="article-title" href="/2022/02/11/page/vue-router-mode/" title="详解vue-router中路由的二种模式">详解vue-router中路由的二种模式</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="2022-02-11T03:55:05.000Z" title="发表于 2022-02-11 11:55:05">2022-02-11</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><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/Vue/">Vue</a></span></div><div class="content">在vue的脚手架项目中,想必大家都会用到vue-router,vue-router是vue.js官方推出的一个管理路由的包。它集成了嵌套路由映射、动态路由选择、HTML5 API等等一系列的功能,让我们能够很轻松的管理一个SPA应用的路由。下面让我们一起来看看vue-router中的几种路由模式。</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2022/02/08/page/basic-packaging-optimization-of-webpack/" title="webpack之基础打包优化"> <img class="post_bg" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15624671010743d29ddf8fb04b35a242~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack之基础打包优化"></a></div><div class="recent-post-info"><a class="article-title" href="/2022/02/08/page/basic-packaging-optimization-of-webpack/" title="webpack之基础打包优化">webpack之基础打包优化</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="2022-02-08T09:29:05.000Z" title="发表于 2022-02-08 17:29:05">2022-02-08</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><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/Vue/">Vue</a></span></div><div class="content">webpack至今已经发展了5个版本,如果你还不会webpack,那么赶紧学习起来吧。webpack是web前端开发人员必学的一个知识点。本篇文章带大家一起看看webpack基础的打包优化。话不多说,上酸菜~~~~</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2022/02/07/page/mobile-terminal-adaptation-solution-2/" title="移动端适配解决方案(二)"> <img class="post_bg" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/448cac1d8498442290d7cf0fa5d7adec~tplv-k3u1fbpfcp-no-mark:480:480:0:0.awebp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="移动端适配解决方案(二)"></a></div><div class="recent-post-info"><a class="article-title" href="/2022/02/07/page/mobile-terminal-adaptation-solution-2/" title="移动端适配解决方案(二)">移动端适配解决方案(二)</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="2022-02-07T07:29:05.000Z" title="发表于 2022-02-07 15:29:05">2022-02-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/Vue/">Vue</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/Vue/">Vue</a></span></div><div class="content">前段时间我的移动端适配解决方案一文在评论区引发了激烈的讨论。其中讨论最多的就是,移动端rem的适配已经淘汰了,目前大家使用的都是viewport。</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2022/01/26/page/mobile-click-through-solution/" title="移动端点击穿透、滚动穿透解决方案"> <img class="post_bg" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/448cac1d8498442290d7cf0fa5d7adec~tplv-k3u1fbpfcp-no-mark:480:480:0:0.awebp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="移动端点击穿透、滚动穿透解决方案"></a></div><div class="recent-post-info"><a class="article-title" href="/2022/01/26/page/mobile-click-through-solution/" title="移动端点击穿透、滚动穿透解决方案">移动端点击穿透、滚动穿透解决方案</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="2022-01-26T07:35:37.000Z" title="发表于 2022-01-26 15:35:37">2022-01-26</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><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/Javascript/">Javascript</a></span></div><div class="content">前段时间开发了一个H5的活动专题页面,在这个H5专题页中有一个需求是点击按钮弹框显示活动详情。这个需求看似平平无奇,当中却蕴含着一些我们值得学习的知识点。</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2022/01/25/page/mobile-terminal-adaptation-solution/" title="移动端适配解决方案"> <img class="post_bg" src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="移动端适配解决方案"></a></div><div class="recent-post-info"><a class="article-title" href="/2022/01/25/page/mobile-terminal-adaptation-solution/" title="移动端适配解决方案">移动端适配解决方案</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="2022-01-25T10:35:37.000Z" title="发表于 2022-01-25 18:35:37">2022-01-25</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><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/Javascript/">Javascript</a></span></div><div class="content">临近春节,产品突然给我搞了个H5专题活动页,这需求也是弄得我猝不及防。没办法,时间不多,就简简单单的搭了个脚手架项目。在开发项目的过程中我逐渐意识到了事情似乎没有那么简单。之后快要测试的时候我幡然醒悟,H5项目需要做适配。于是我想起了许多年前的事情....</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2022/01/24/page/decorator-in-vue/" title="Vue中使用装饰器"> <img class="post_bg" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6caf1fb0e98541ea817a660c60d46733~tplv-k3u1fbpfcp-no-mark:480:480:0:0.awebp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue中使用装饰器"></a></div><div class="recent-post-info"><a class="article-title" href="/2022/01/24/page/decorator-in-vue/" 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="2022-01-24T10:50:37.000Z" title="发表于 2022-01-24 18:50:37">2022-01-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><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/Vue/">Vue</a></span></div><div class="content">相信各位在开发中一定遇到过二次弹框确认相关的需求。不管你使用的是UI框架的二次弹框组件,还是自己封装的弹框组件。都避免不了在多次使用时出现大量重复代码的问题。这些代码的积累导致项目的可读性差。项目的代码质量也变得很差。那么我们如何解决二次弹框代码重复的问题呢?使用装饰器</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2022/01/18/page/Fragment-Suspense-Portal-In-Vue3/" title="Vue3中的新特性 Fragment、Suspense、Portal"> <img class="post_bg" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc05b7dd9eb04d95899948b6604f2b1d~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue3中的新特性 Fragment、Suspense、Portal"></a></div><div class="recent-post-info"><a class="article-title" href="/2022/01/18/page/Fragment-Suspense-Portal-In-Vue3/" title="Vue3中的新特性 Fragment、Suspense、Portal">Vue3中的新特性 Fragment、Suspense、Portal</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="2022-01-18T01:04:05.000Z" title="发表于 2022-01-18 09:04:05">2022-01-18</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><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/Vue/">Vue</a></span></div><div class="content">vue3中新增了一些功能来解决vue2中那些戳中开发人员痛楚的诟病。同时,也对vue2中性能进行了优化。本文带你一起探讨vue3中新增的Fragment、Teleport和Suspense的使用方法。</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2021/10/18/page/apply_bind_call_methods/" title="JS种call()、apply()、bind()方法的总结"> <img class="post_bg" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/599ff5e7726f4608a0c96d38530825ae~tplv-k3u1fbpfcp-no-mark:480:480:0:0.awebp?" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS种call()、apply()、bind()方法的总结"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/10/18/page/apply_bind_call_methods/" title="JS种call()、apply()、bind()方法的总结">JS种call()、apply()、bind()方法的总结</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="2021-10-18T08:05:32.000Z" title="发表于 2021-10-18 16:05:32">2021-10-18</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><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a></span></div><div class="content">在React、Vue大行其道的今天。JavaScript作为这些框架的基石,我们定不能够舍弃。我们必须牢牢的掌握JavaScript的知识才能深入理解这些框架的设计思路。本文带你一起探讨</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2021/10/15/page/seven-cross-domain-solutions/" title="七种常见的跨域解决方案"> <img class="post_bg" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dfb5cf53ab334ee19e74474add858466~tplv-k3u1fbpfcp-no-mark:480:480:0:0.awebp?" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="七种常见的跨域解决方案"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/10/15/page/seven-cross-domain-solutions/" title="七种常见的跨域解决方案">七种常见的跨域解决方案</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="2021-10-15T03:21:51.000Z" title="发表于 2021-10-15 11:21:51">2021-10-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/Vue/">Vue</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/Vue/">Vue</a></span></div><div class="content">作为一名开发人员,相信无论是在项目中还是在面试中,都会经常听到跨域这个词。大家或多或少对于跨域都有一定的了解。本文总结了跨域的七种方式 快来看看吧</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><a class="page-number" href="/page/3/#content-inner">3</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://s2.ax1x.com/2019/11/27/Q9XStf.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Minture Chan</div><div class="author-info__description">不忘初心,砥砺前行</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">23</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">10</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">7</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/MintureChan96/"><i class="fab fa-github"></i><span>GitHub</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/MintureChan96" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:296893907@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">weChat:minture626 QQ: 727258152</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"><a class="thumbnail" href="/2022/02/24/page/implement-a-dynamic-table-using-iview/" title="使用iview Table生成动态日期表格"><img src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="使用iview Table生成动态日期表格"/></a><div class="content"><a class="title" href="/2022/02/24/page/implement-a-dynamic-table-using-iview/" title="使用iview Table生成动态日期表格">使用iview Table生成动态日期表格</a><time datetime="2022-02-24T08:29:05.000Z" title="发表于 2022-02-24 16:29:05">2022-02-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/02/11/page/vue-router-mode/" title="详解vue-router中路由的二种模式"><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f4be21e651024af1b5283d0672f0bf21~tplv-k3u1fbpfcp-no-mark:480:480:0:0.awebp?" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="详解vue-router中路由的二种模式"/></a><div class="content"><a class="title" href="/2022/02/11/page/vue-router-mode/" title="详解vue-router中路由的二种模式">详解vue-router中路由的二种模式</a><time datetime="2022-02-11T03:55:05.000Z" title="发表于 2022-02-11 11:55:05">2022-02-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/02/08/page/basic-packaging-optimization-of-webpack/" title="webpack之基础打包优化"><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15624671010743d29ddf8fb04b35a242~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="webpack之基础打包优化"/></a><div class="content"><a class="title" href="/2022/02/08/page/basic-packaging-optimization-of-webpack/" title="webpack之基础打包优化">webpack之基础打包优化</a><time datetime="2022-02-08T09:29:05.000Z" title="发表于 2022-02-08 17:29:05">2022-02-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/02/07/page/mobile-terminal-adaptation-solution-2/" title="移动端适配解决方案(二)"><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/448cac1d8498442290d7cf0fa5d7adec~tplv-k3u1fbpfcp-no-mark:480:480:0:0.awebp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="移动端适配解决方案(二)"/></a><div class="content"><a class="title" href="/2022/02/07/page/mobile-terminal-adaptation-solution-2/" title="移动端适配解决方案(二)">移动端适配解决方案(二)</a><time datetime="2022-02-07T07:29:05.000Z" title="发表于 2022-02-07 15:29:05">2022-02-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/01/26/page/mobile-click-through-solution/" title="移动端点击穿透、滚动穿透解决方案"><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/448cac1d8498442290d7cf0fa5d7adec~tplv-k3u1fbpfcp-no-mark:480:480:0:0.awebp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="移动端点击穿透、滚动穿透解决方案"/></a><div class="content"><a class="title" href="/2022/01/26/page/mobile-click-through-solution/" title="移动端点击穿透、滚动穿透解决方案">移动端点击穿透、滚动穿透解决方案</a><time datetime="2022-01-26T07:35:37.000Z" title="发表于 2022-01-26 15:35:37">2022-01-26</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
<i class="fas fa-folder-open"></i>
<span>分类</span>
</div>
<ul class="card-category-list" id="aside-cat-list">
<li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Git/"><span class="card-category-list-name">Git</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JavaScript/"><span class="card-category-list-name">JavaScript</span><span class="card-category-list-count">3</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Javascript/"><span class="card-category-list-name">Javascript</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/MarkDown/"><span class="card-category-list-name">MarkDown</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/View-UI/"><span class="card-category-list-name">View UI</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Vue/"><span class="card-category-list-name">Vue</span><span class="card-category-list-count">14</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/hexo/"><span class="card-category-list-name">hexo</span><span class="card-category-list-count">1</span></a></li>
</ul></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/Git/" style="font-size: 1.1em; color: #999">Git</a> <a href="/tags/JavaScript/" style="font-size: 1.37em; color: #99a4b2">JavaScript</a> <a href="/tags/Javascript/" style="font-size: 1.23em; color: #999ea6">Javascript</a> <a href="/tags/View-UI/" style="font-size: 1.1em; color: #999">View UI</a> <a href="/tags/Vue/" style="font-size: 1.5em; color: #99a9bf">Vue</a> <a href="/tags/Vue-elementUI/" style="font-size: 1.1em; color: #999">Vue elementUI</a> <a href="/tags/Vue%E9%80%9A%E4%BF%A1/" style="font-size: 1.23em; color: #999ea6">Vue通信</a> <a href="/tags/hexo/" style="font-size: 1.1em; color: #999">hexo</a> <a href="/tags/markdown/" style="font-size: 1.1em; color: #999">markdown</a> <a href="/tags/miniProgram/" style="font-size: 1.1em; color: #999">miniProgram</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
<i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/02/"><span class="card-archive-list-date">二月 2022</span><span class="card-archive-list-count">4</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/01/"><span class="card-archive-list-date">一月 2022</span><span class="card-archive-list-count">4</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/10/"><span class="card-archive-list-date">十月 2021</span><span class="card-archive-list-count">5</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/09/"><span class="card-archive-list-date">九月 2021</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/04/"><span class="card-archive-list-date">四月 2021</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/02/"><span class="card-archive-list-date">二月 2021</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/11/"><span class="card-archive-list-date">十一月 2020</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2019/12/"><span class="card-archive-list-date">十二月 2019</span><span class="card-archive-list-count">2</span></a></li></ul></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">23</div></div><div class="webinfo-item"><div class="item-name">已运行时间 :</div><div class="item-count" id="runtimeshow" data-publishDate="2019-06-17T02:14:30.000Z"></div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">31.9k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2023-08-30T09:54:15.652Z"></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('https://s1.ax1x.com/2020/11/03/BszG0f.jpg')"><div id="footer-wrap"><div class="copyright">©2019 - 2023 By Minture Chan</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text">Welcome to my <a href="https://minturechan96.github.io/"> blog !</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="go-up" type="button" title="回到顶部"><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://unpkg.com/medium-zoom@1.0.8/dist/medium-zoom.min.js"></script><script src="https://unpkg.com/node-snackbar@0.1.16/dist/snackbar.min.js"></script><script>var preloader = {
endLoading: () => {
document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded")
},
initLoading: () => {
document.body.style.overflow = '';
document.getElementById('loading-box').classList.remove("loaded")
}
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>function subtitleType () {
fetch('https://v1.hitokoto.cn')
.then(response => response.json())
.then(data => {
if (true) {
var from = '出自 ' + data.from
var sub = "不忘初心,方得始终".length == 0 ? new Array() : "不忘初心,方得始终".split(',')
var both = sub.unshift(data.hitokoto, from)
var typed = new Typed('#subtitle', {
strings: sub,
startDelay: 300,
typeSpeed: 150,
loop: true,
backSpeed: 50,
})
} else {
document.getElementById('subtitle').innerHTML = data.hitokoto
}
})
}
if (true) {
if (typeof Typed === 'function') {
subtitleType()
} else {
getScript('https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js').then(subtitleType)
}
} else {
subtitleType()
}
</script></div><div class="aplayer no-destroy" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div><canvas class="fireworks" mobile="false"></canvas><script src="https://unpkg.com/butterfly-extsrc@1.1.3/dist/fireworks.min.js"></script><script id="canvas_nest" defer="defer" color="0,0,255" opacity="0.7" zIndex="-1" count="99" mobile="false" src="https://unpkg.com/butterfly-extsrc@1.1.3/dist/canvas-nest.min.js"></script><script src="https://unpkg.com/pjax@0.2.8/pjax.min.js"></script><script>let pjaxSelectors = [
'title',
'#config-diff',
'#body-wrap',
'#rightside-config-hide',
'#rightside-config-show',
'.js-pjax'
]
if (false) {
pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
}
var pjax = new Pjax({
elements: 'a:not([target="_blank"])',
selectors: pjaxSelectors,
cacheBust: false,
analytics: false,
scrollRestoration: false
})
document.addEventListener('pjax:send', function () {
// removeEventListener scroll
window.removeEventListener('scroll', window.tocScrollFn)
window.removeEventListener('scroll', scrollCollect)
typeof preloader === 'object' && preloader.initLoading()
if (window.aplayers) {
for (let i = 0; i < window.aplayers.length; i++) {
if (!window.aplayers[i].options.fixed) {
window.aplayers[i].destroy()
}
}
}
typeof typed === 'object' && typed.destroy()
//reset readmode
const $bodyClassList = document.body.classList
$bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')
})
document.addEventListener('pjax:complete', function () {
window.refreshFn()
document.querySelectorAll('script[data-pjax]').forEach(item => {
const newScript = document.createElement('script')
const content = item.text || item.textContent || item.innerHTML || ""
Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
newScript.appendChild(document.createTextNode(content))
item.parentNode.replaceChild(newScript, item)
})
GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()
typeof chatBtnFn === 'function' && chatBtnFn()
typeof panguInit === 'function' && panguInit()
// google analytics
typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});
// baidu analytics
typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);
typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()
// Analytics
if (false) {
MtaH5.pgv()
}
// prismjs
typeof Prism === 'object' && Prism.highlightAll()
typeof preloader === 'object' && preloader.endLoading()
})
document.addEventListener('pjax:error', (e) => {
if (e.request.status === 404) {
pjax.loadUrl('/404.html')
}
})</script><script async data-pjax src="https://unpkg.com/busuanzi@2.3.0/bsz.pure.mini.js"></script></div></body></html>