Repository navigation
Expand file tree
/
Copy pathsearch.xml
More file actions
304 lines (145 loc) · 64.3 KB
/
Copy pathsearch.xml
File metadata and controls
304 lines (145 loc) · 64.3 KB
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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>vueRouter使用</title>
<link href="/2022/11/21/vuerouter-shi-yong/"/>
<url>/2022/11/21/vuerouter-shi-yong/</url>
<content type="html"><![CDATA[<h5 id="1、安装vue-router"><a href="#1、安装vue-router" class="headerlink" title="1、安装vue-router"></a>1、安装vue-router</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i vue-router</span><br></pre></td></tr></table></figure><h5 id="2、配置路由信息"><a href="#2、配置路由信息" class="headerlink" title="2、配置路由信息"></a>2、配置路由信息</h5><ol><li>创建router文件夹，创建index.ts文件</li><li>引入路由对象，配置路由信息，每一个路由对应一个组件页面</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">import {createRouter,createWebHistory,RotueRecordRow} from 'vue-router'</span><br><span class="line"></span><br><span class="line">// 配置路由信息</span><br><span class="line">const routes:Array<RouteRecordRow> = [</span><br><span class="line"> // 配置项中path和component是必选项，meta，child是可选项</span><br><span class="line"> {</span><br><span class="line"> path:'',</span><br><span class="line"> component:</span><br><span class="line"> }</span><br><span class="line">]</span><br><span class="line"> </span><br><span class="line">// 创建路由</span><br><span class="line">const router = createRouter({</span><br><span class="line"> history:createWebHistory(),</span><br><span class="line"> routes</span><br><span class="line">})</span><br><span class="line"> </span><br><span class="line">// 导出路由</span><br><span class="line">export defalut router; </span><br></pre></td></tr></table></figure><ol start="3"><li><p>main.ts注册路由组件</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">import router from './router'</span><br><span class="line">app.use(router);</span><br><span class="line"></span><br></pre></td></tr></table></figure></li><li><p>在合适的地方使用router入口</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><RouterView></RouterView></span><br></pre></td></tr></table></figure></li><li><p>router使用路径</p></li></ol><p>先配置好路由文件，路由url映射不同的组件，默认导出路由，然后全局注册路由组件 app.use()，在其他文件需要用到router的时候，引入useRotuer，创建路由对象router。</p><h5 id="3、编程式导航"><a href="#3、编程式导航" class="headerlink" title="3、编程式导航"></a>3、编程式导航</h5><ol><li><p>绑定触发路由跳转事件</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><!-- 编程式导航路由跳转 --></span><br><span class="line"><!-- 1、传入路由url --></span><br><span class="line"><button @click="toPage('/')">login</button></span><br><span class="line"><!-- 2、 传入路由配置文件的名字，和路由属性name对应 --></span><br><span class="line"><button @click="toPage('regist')">regist</button></span><br><span class="line"></span><br><span class="line">import { useRouter } from "vue-router";</span><br><span class="line">const router = useRouter();</span><br><span class="line">const toPage = (url:string) => {</span><br><span class="line"> // 1、字符串形式</span><br><span class="line"> // router.push(url)</span><br><span class="line"> // 2、对象形式</span><br><span class="line"> // router.push({</span><br><span class="line"> // path:url</span><br><span class="line"> // })</span><br><span class="line"> // 3、命名式,参数要和路由配置信息的name属性对应上</span><br><span class="line"> router.push({</span><br><span class="line"> name:url</span><br><span class="line"> })</span><br></pre></td></tr></table></figure><p>2.历史记录</p><p>replace 控制路由是否保存历史记录</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><router-link style="margin-left: 100px;" to="/">login</router-link</span><br><span class="line">// router-link默认使用replace，不保存历史记录</span><br><span class="line"><router-link replace style="margin-left: 100px;" to="/reg">regist</router-link></span><br><span class="line"></span><br><span class="line">// 使用router里的go back方法实现路由的历史记录</span><br><span class="line"><button @click="next()">next</button></span><br><span class="line"><button @click="pre()">pre</button></span><br><span class="line">const next = () => {</span><br><span class="line"> router.go(1);</span><br><span class="line">};</span><br><span class="line">const pre = () => {</span><br><span class="line"> router.back();</span><br><span class="line">};</span><br></pre></td></tr></table></figure></li></ol><h5 id="4、路由传参"><a href="#4、路由传参" class="headerlink" title="4、路由传参"></a>4、路由传参</h5><ol><li><p>使用query参数 — 在url中展示出来</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> useRouter <span class="keyword">from</span> <span class="string">'vue-router'</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="title function_">useRouter</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 将query（对象）中的参数传入到指定的路由</span></span><br><span class="line">router.<span class="title function_">push</span>({</span><br><span class="line"> <span class="attr">path</span>:<span class="string">'/que'</span>,</span><br><span class="line"> <span class="attr">query</span>:{}</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// 在要使用的组件里面引入useRoute</span></span><br><span class="line"><span class="keyword">import</span> useRoute <span class="keyword">from</span> <span class="string">'vue-route'</span></span><br><span class="line"><span class="keyword">const</span> route = <span class="title function_">useRoute</span>();</span><br><span class="line"></span><br><span class="line">在需要参数的地方引入</span><br><span class="line">{{route.<span class="property">query</span>.属性}}</span><br><span class="line"></span><br></pre></td></tr></table></figure></li><li><p>使用params参数 — 在内存中体现，在url中不展示出来，刷新页面会丢失</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// params参数要和name属性一起使用</span></span><br><span class="line">router.<span class="title function_">push</span>({</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'que'</span>,</span><br><span class="line"> <span class="attr">params</span>:{}</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// name属性对应路由routes配置文件的name属性一致</span></span><br><span class="line"><span class="comment">// 路由配置文件的path路径需要加上params参数</span></span><br><span class="line"><span class="comment">// 如下</span></span><br><span class="line"><span class="attr">path</span>:<span class="string">'/que/:id/:name/:prive'</span></span><br><span class="line"><span class="comment">// 如果没有传入这些参数，会有参数丢失问题</span></span><br></pre></td></tr></table></figure></li></ol><h5 id="5、嵌套路由"><a href="#5、嵌套路由" class="headerlink" title="5、嵌套路由"></a>5、嵌套路由</h5><ol><li><p>子路由在path里面不要加斜杠</p></li><li><p>嵌套路由配置文件</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="attr">path</span>:<span class="string">'/test'</span>,</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'test'</span>,</span><br><span class="line"> <span class="attr">component</span>:<span class="function">() =></span> <span class="title function_">import</span>(<span class="string">'../components/UsetTest.vue'</span>),</span><br><span class="line"> <span class="attr">children</span>:[</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">path</span>:<span class="string">'login'</span>,</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'login'</span>,</span><br><span class="line"> <span class="attr">component</span>:<span class="function">() =></span> <span class="title function_">import</span>(<span class="string">'../components/UserLogin.vue'</span>)</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">path</span>:<span class="string">'regist'</span>,</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'regist'</span>,</span><br><span class="line"> <span class="attr">component</span>:<span class="function">() =></span> <span class="title function_">import</span>(<span class="string">'../components/UserResgit.vue'</span>)</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>嵌套路由的使用 — 在父路由组件使用router-view</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><div></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">router-link</span> <span class="attr">class</span>=<span class="string">"test"</span> <span class="attr">to</span>=<span class="string">"/test/login"</span>></span>登录<span class="tag"></<span class="name">router-link</span>></span></span></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">router-link</span> <span class="attr">class</span>=<span class="string">"test"</span> <span class="attr">to</span>=<span class="string">"/test/regist"</span>></span>注册<span class="tag"></<span class="name">router-link</span>></span></span></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">router-view</span>></span><span class="tag"></<span class="name">router-view</span>></span></span></span><br><span class="line"></div></span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"> <!-- 静态行内样式书写 --></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background: blue;color:white;"</span>></span>溯洄从之,道阻且长<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> <!-- 动态行内样式书写 --></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">:style</span>=<span class="string">"{width:'200px',height:'200px',background:'aqua',color:'white'}"</span>></span>溯游从之,宛在水中央<span class="tag"></<span class="name">div</span>></span></span></span><br></pre></td></tr></table></figure></li></ol><h5 id="6、路由重定向-别名"><a href="#6、路由重定向-别名" class="headerlink" title="6、路由重定向-别名"></a>6、路由重定向-别名</h5><ol><li><p>路由配置文件 — redirect</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">path</span>:<span class="string">'/'</span>,</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'route'</span>,</span><br><span class="line"> <span class="comment">// 1、当路由定位到/时，将重定向到redirect指定的路由</span></span><br><span class="line"> <span class="comment">// 2、可使用字符串形式，对象形式，函数to形式</span></span><br><span class="line"> <span class="attr">redirect</span>:<span class="string">'/user2'</span>,</span><br><span class="line"> <span class="attr">redirect</span>:{</span><br><span class="line"> <span class="attr">path</span>:<span class="string">'/user2'</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">redirect</span>:<span class="function"><span class="params">to</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'/user2'</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">redirect</span>:<span class="function"><span class="params">to</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> <span class="comment">// 可返回重定向路由和传入query参数</span></span><br><span class="line"> <span class="comment">// 在重定向路由后加上query参数</span></span><br><span class="line"> <span class="attr">path</span>:<span class="string">'/user2'</span>,</span><br><span class="line"> <span class="attr">query</span>:{</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'xiaoman'</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> },</span><br></pre></td></tr></table></figure></li></ol><h5 id="7、命名视图"><a href="#7、命名视图" class="headerlink" title="7、命名视图"></a>7、命名视图</h5><ol><li><p>路由配置文件 — components 需要加s，使用对象</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="attr">path</span>:<span class="string">'/'</span>,</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'route'</span>,</span><br><span class="line"> <span class="attr">component</span>:<span class="function">() =></span> <span class="title function_">import</span>(<span class="string">'../components/router.vue'</span>),</span><br><span class="line"> <span class="attr">children</span>:[</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">path</span>:<span class="string">'user1'</span>,</span><br><span class="line"> <span class="attr">components</span>:{</span><br><span class="line"> <span class="attr">default</span>:<span class="function">()=></span><span class="title function_">import</span>(<span class="string">'../components/A.vue'</span>)</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">path</span>:<span class="string">'user2'</span>,</span><br><span class="line"> <span class="attr">components</span>:{</span><br><span class="line"> <span class="attr">BBB</span>:<span class="function">()=></span><span class="title function_">import</span>(<span class="string">'../components/B.vue'</span>),</span><br><span class="line"> <span class="attr">CCC</span>:<span class="function">()=></span><span class="title function_">import</span>(<span class="string">'../components/C.vue'</span>)</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> ]</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>组件配置</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"> <router-link to=<span class="string">"/user1"</span>>user1</router-link></span><br><span class="line"> </span><br><span class="line"><span class="comment">// 到user2路由，此路由下有两个组件，则都显示出来</span></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/user2"</span>></span>user2<span class="tag"></<span class="name">router-link</span>></span></span></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">router-view</span>></span><span class="tag"></<span class="name">router-view</span>></span></span></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">router-view</span> <span class="attr">name</span>=<span class="string">"CCC"</span>></span><span class="tag"></<span class="name">router-view</span>></span></span></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">router-view</span> <span class="attr">name</span>=<span class="string">"BBB"</span>></span><span class="tag"></<span class="name">router-view</span>></span></span></span><br></pre></td></tr></table></figure></li></ol><h5 id="8、导航守卫"><a href="#8、导航守卫" class="headerlink" title="8、导航守卫"></a>8、导航守卫</h5><h6 id="8-1、前置守卫"><a href="#8-1、前置守卫" class="headerlink" title="8.1、前置守卫"></a>8.1、前置守卫</h6><h6 id="8-2、后置守卫"><a href="#8-2、后置守卫" class="headerlink" title="8.2、后置守卫"></a>8.2、后置守卫</h6>]]></content>
<categories>
<category> vueRouter </category>
</categories>
<tags>
<tag> vue </tag>
<tag> vueRouter </tag>
</tags>
</entry>
<entry>
<title>css基础</title>
<link href="/2022/11/16/css-ji-chu/"/>
<url>/2022/11/16/css-ji-chu/</url>
<content type="html"><![CDATA[<h5 id="1-选择器"><a href="#1-选择器" class="headerlink" title="1.选择器"></a>1.选择器</h5><h6 id="1-1、子代选择器"><a href="#1-1、子代选择器" class="headerlink" title="1.1、子代选择器"></a>1.1、子代选择器</h6><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h2</span>><span class="selector-tag">h1</span> --- 代表<span class="selector-tag">h2</span>下的<span class="selector-tag">h1</span>标签，只包含子代，不包含孙代</span><br><span class="line"></span><br></pre></td></tr></table></figure><h6 id="1-2、兄弟选择器"><a href="#1-2、兄弟选择器" class="headerlink" title="1.2、兄弟选择器"></a>1.2、兄弟选择器</h6><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h2</span>~<span class="selector-tag">h1</span> --- 所有兄弟</span><br><span class="line"><span class="selector-tag">h2</span>+<span class="selector-tag">h1</span> --- 最亲的一个兄弟</span><br></pre></td></tr></table></figure><h6 id="1-3、属性选择器"><a href="#1-3、属性选择器" class="headerlink" title="1.3、属性选择器"></a>1.3、属性选择器</h6><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h1</span><span class="selector-attr">[title]</span> --- <span class="selector-tag">h1</span>标签中含有title属性才可被选中</span><br><span class="line"><span class="selector-tag">h1</span><span class="selector-attr">[title=<span class="string">"nihao"</span>]</span> --- <span class="selector-tag">h1</span>标签含有title属性，而且属性值为nihao才可被选中</span><br><span class="line"><span class="selector-tag">h1</span><span class="selector-attr">[title^=<span class="string">"nihao"</span>]</span> --- 属性值为nihao开头的都可被选中</span><br><span class="line"><span class="selector-tag">h1</span><span class="selector-attr">[title$=<span class="string">"nihao"</span>]</span> --- 属性值为nihao结尾的都可被选中</span><br><span class="line"><span class="selector-tag">h1</span><span class="selector-attr">[title*=<span class="string">"nihao"</span>]</span> --- 属性值中含有nihao的都可被选中</span><br><span class="line"><span class="selector-tag">h1</span><span class="selector-attr">[title|=<span class="string">"nihao"</span>]</span> --- 属性值为nihao开头的或者后跟-的（nihao-dfa）都可被选中</span><br></pre></td></tr></table></figure><h6 id="1-4、伪类选择器"><a href="#1-4、伪类选择器" class="headerlink" title="1.4、伪类选择器"></a>1.4、伪类选择器</h6><p>用来添加一些选择器的特殊效果</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:link</span> {<span class="attribute">color</span>:<span class="number">#FF0000</span>;} <span class="comment">/* 未访问的链接 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:visited</span> {<span class="attribute">color</span>:<span class="number">#00FF00</span>;} <span class="comment">/* 已访问的链接 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> {<span class="attribute">color</span>:<span class="number">#FF00FF</span>;} <span class="comment">/* 鼠标划过链接 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:active</span> {<span class="attribute">color</span>:<span class="number">#0000FF</span>;} <span class="comment">/* 已选中的链接 */</span></span><br></pre></td></tr></table></figure><h5 id="2-权限应用"><a href="#2-权限应用" class="headerlink" title="2.权限应用"></a>2.权限应用</h5><h6 id="2-1、权重"><a href="#2-1、权重" class="headerlink" title="2.1、权重"></a>2.1、权重</h6><ol><li>id –> 100</li><li>class，类属性, 类选择器 —> 10</li><li>标签，伪元素 —> 1</li><li>*—> 0</li><li>行内样式 —> 1000</li></ol><h5 id="3-盒子概念及基本使用"><a href="#3-盒子概念及基本使用" class="headerlink" title="3.盒子概念及基本使用"></a>3.盒子概念及基本使用</h5><h6 id="3-1、自动撑满可用空间"><a href="#3-1、自动撑满可用空间" class="headerlink" title="3.1、自动撑满可用空间"></a>3.1、自动撑满可用空间</h6><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">// 宽度和高度自动撑满父级元素可用空间</span><br><span class="line"><span class="attribute">display</span>:inline-block // 行内元素可转为行内块元素或块级元素</span><br><span class="line">width: -webkit-fill-available;</span><br><span class="line">heigth: -webkit-fill-available;</span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> css </tag>
</tags>
</entry>
<entry>
<title>完整的前端开发流程</title>
<link href="/2022/11/13/wan-zheng-de-qian-duan-kai-fa-liu-cheng/"/>
<url>/2022/11/13/wan-zheng-de-qian-duan-kai-fa-liu-cheng/</url>
<content type="html"><![CDATA[<h5 id="1-流程概述"><a href="#1-流程概述" class="headerlink" title="1.流程概述"></a>1.流程概述</h5><ul><li>评审需求</li><li>画出原型图</li><li>技术选型</li><li>项目架构搭建</li><li>绘制页面</li><li>对接接口</li><li>测试</li></ul><h5 id="2-例子"><a href="#2-例子" class="headerlink" title="2.例子"></a>2.例子</h5><h6 id="2-1、评审需求"><a href="#2-1、评审需求" class="headerlink" title="2.1、评审需求"></a>2.1、评审需求</h6><p>人事管理系统，web端</p><p>需求：</p><ol><li>账号分为管理员和员工两种，分别对应两种不同的UI界面</li><li>管理员账号系统内置，员工账号信息有管理员录入数据库，员工才可以使用账号登录</li><li>管理员可以增删改查员工信息，员工可以查看自己的信息</li><li>可以对员工信息进行排序查询</li><li>公司有不同的部门，每个部门有对应的业绩、总人数，可数据化</li></ol><h6 id="2-2、原型图"><a href="#2-2、原型图" class="headerlink" title="2.2、原型图"></a>2.2、原型图</h6><h6 id="2-3、技术选型"><a href="#2-3、技术选型" class="headerlink" title="2.3、技术选型"></a>2.3、技术选型</h6><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue3+vite2+ts+pinia+vueRouter+axios+mockjs+naive-ui-plug</span><br></pre></td></tr></table></figure><h6 id="2-4、项目架构搭建"><a href="#2-4、项目架构搭建" class="headerlink" title="2.4、项目架构搭建"></a>2.4、项目架构搭建</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">---src</span><br><span class="line">|config ---重新配置统一的接口请求</span><br><span class="line">|pages ---展示页面，重复性低</span><br><span class="line">|component ---组件，复用性高</span><br><span class="line">|api ---配置api，获取服务端返回的数据</span><br><span class="line">|router ---配置路由</span><br><span class="line">|store ---配置pinia</span><br><span class="line">|sytle ---css公共样式</span><br><span class="line">|main.<span class="property">ts</span></span><br><span class="line">|<span class="title class_">App</span>.<span class="property">vue</span></span><br></pre></td></tr></table></figure><h5 id="3-总结"><a href="#3-总结" class="headerlink" title="3.总结"></a>3.总结</h5>]]></content>
<categories>
<category> 开发流程 </category>
</categories>
<tags>
<tag> 实习 </tag>
<tag> 业务 </tag>
<tag> 流程 </tag>
</tags>
</entry>
<entry>
<title>vite指南</title>
<link href="/2022/11/08/vite-ji-chu/"/>
<url>/2022/11/08/vite-ji-chu/</url>
<content type="html"><![CDATA[<h5 id="1-vite的依赖预构建"><a href="#1-vite的依赖预构建" class="headerlink" title="1.vite的依赖预构建"></a>1.vite的依赖预构建</h5><p><em>找寻依赖的过程时自当前目录依次向上寻找的过程，知道搜寻到根目录或搜寻的对应依赖为止</em></p><p><strong>vite解决了三个问题</strong></p><p>1、不同的第三包会有不同的导出格式</p><p>2、处理包的路径，直接使用.vite/deps。方便路径重写</p><p>3、网络多包传输问题，vite尽可能将他们集成，最后只生成一个或几个模块</p><h5 id="2-vite配置文件语法提示"><a href="#2-vite配置文件语法提示" class="headerlink" title="2.vite配置文件语法提示"></a>2.vite配置文件语法提示</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> {defineConfig} <span class="keyword">from</span> <span class="string">'vite'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 让编译器知道类型是什么</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineConfig</span>({</span><br><span class="line"> <span class="attr">optimizeDeps</span>: {</span><br><span class="line"> <span class="attr">exclude</span>: [] <span class="comment">// 将数组里的依赖不进行依赖预构建</span></span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// 第二种写法：类型标注</span></span><br><span class="line"><span class="comment">/** <span class="doctag">@type</span> import('vite).defineConfig */</span></span><br><span class="line"><span class="keyword">const</span> viteConfig = {</span><br><span class="line"> <span class="attr">optimizeDeps</span>: {</span><br><span class="line"> <span class="attr">exclude</span>: []</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> viteConfig</span><br><span class="line"></span><br><span class="line"><span class="comment">// 策略模式 </span></span><br><span class="line"><span class="keyword">const</span> envResolve = {</span><br><span class="line"> <span class="string">"built"</span>: <span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"生产环境"</span>);</span><br><span class="line"> <span class="keyword">return</span> ({...viteBaseConfig,...viteProdConfig})</span><br><span class="line"> },</span><br><span class="line"> <span class="string">"serve"</span>: <span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"开发环境"</span>);</span><br><span class="line"> <span class="keyword">return</span> ({...viteBaseConfig,...viteDevConfig})</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineConfig</span>(<span class="function">(<span class="params">{command}</span>) =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"command"</span>, command);</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">envResolve</span>(command)</span><br><span class="line">})</span><br><span class="line"></span><br></pre></td></tr></table></figure><h5 id="3-环境变量配置"><a href="#3-环境变量配置" class="headerlink" title="3.环境变量配置"></a>3.环境变量配置</h5><p>环境变量：会根据当前的代码环境产生值的变化的变量就叫做环境变量。</p><p>代码环境：</p><ul><li>开发环境</li><li>测试环境</li><li>预发布环境</li><li>灰度环境</li><li>生产环境</li></ul><h5 id="4-vite常用依赖项"><a href="#4-vite常用依赖项" class="headerlink" title="4.vite常用依赖项"></a>4.vite常用依赖项</h5><p>依赖项 — vite-plugin-mock</p><h5 id="5-mock模拟数据"><a href="#5-mock模拟数据" class="headerlink" title="5.mock模拟数据"></a>5.mock模拟数据</h5><p>前后端一般是并行开发 例如用户列表（接口文档规范）</p><p>1、简单方式：直接写死数据，方便调试</p><p>缺陷：</p><pre><code> - 没法做海量数据测试 - 没法获得一些标准数据 - 没法感知http的异常</code></pre><p>axios — http请求库</p><p>2、mockjs：模拟海量数据，vite-plugin-mock的依赖项是mockjs</p>]]></content>
<categories>
<category> vite </category>
</categories>
<tags>
<tag> vite </tag>
<tag> 构建工具 </tag>
</tags>
</entry>
<entry>
<title>vue基础</title>
<link href="/2022/10/28/vue-ji-chu/"/>
<url>/2022/10/28/vue-ji-chu/</url>
<content type="html"><![CDATA[<h5 id="1-窗口随鼠标移动"><a href="#1-窗口随鼠标移动" class="headerlink" title="1.窗口随鼠标移动"></a>1.窗口随鼠标移动</h5><p>ts逻辑代码</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">const vMove:Directive<any, void> = (el:HTMLElement,bingding:DirectiveBinding) => {</span><br><span class="line"> let moveElement:HTMLDivElement = el.firstElementChild as HTMLDivElement;</span><br><span class="line"> console.log(moveElement);</span><br><span class="line"> const moveDown = (e:MouseEvent) => {</span><br><span class="line"> let x = e.clientX - el.offsetLeft;</span><br><span class="line"> let y = e.clientY - el.offsetTop;</span><br><span class="line"> const move = (e:MouseEvent) => {</span><br><span class="line"> console.log(e);</span><br><span class="line"> el.style.left = e.clientX - x + 'px';</span><br><span class="line"> el.style.top = e.clientY - y + 'px';</span><br><span class="line"> }</span><br><span class="line"> document.addEventListener('mousemove', move);</span><br><span class="line"> document.addEventListener('mouseup',() => {</span><br><span class="line"> document.removeEventListener('mousemove', move);</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> moveElement.addEventListener('mousedown', moveDown); </span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>css代码</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> {</span><br><span class="line"> <span class="attribute">position</span>: fixed;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">2px</span> solid <span class="number">#000</span>;</span><br><span class="line"> <span class="selector-class">.header</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: aquamarine;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>2.图片生成baseurl</p><p>ts逻辑代码</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">type Options = {</span><br><span class="line"> el: string;</span><br><span class="line">}</span><br><span class="line">export default function(options:Options):Promise<{baseurl:string}> {</span><br><span class="line"> return new Promise(resolve => {</span><br><span class="line"> onMounted(() => {</span><br><span class="line"> let img:HTMLImageElement = document.querySelector(options.el) as HTMLImageElement;</span><br><span class="line"> // console.log(img, '-------');</span><br><span class="line"> img.onload = () => {</span><br><span class="line"> resolve({</span><br><span class="line"> baseurl:base64(img)</span><br><span class="line"> }) </span><br><span class="line"> }</span><br><span class="line"> }) </span><br><span class="line"> const base64 = (el:HTMLImageElement) => {</span><br><span class="line"> const canvas = document.createElement('canvas');</span><br><span class="line"> const ctx = canvas.getContext('2d');</span><br><span class="line"> canvas.width = el.width;</span><br><span class="line"> canvas.height = el.height;</span><br><span class="line"> ctx?.drawImage(el,0,0,el.width,el.height);</span><br><span class="line"> return canvas.toDataURL('image/jgp')</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>使用</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> vue基础 </category>
</categories>
<tags>
<tag> vue </tag>
<tag> typescript </tag>
</tags>
</entry>
<entry>
<title>express 创建接口</title>
<link href="/2022/10/22/express-chuang-jian-jie-kou/"/>
<url>/2022/10/22/express-chuang-jian-jie-kou/</url>
<content type="html"><![CDATA[<h3 id="1、express-创建本地接口"><a href="#1、express-创建本地接口" class="headerlink" title="1、express 创建本地接口"></a>1、express 创建本地接口</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">const express = require('express');</span><br><span class="line">const app = express();</span><br><span class="line"></span><br><span class="line">app.get('接口url', (req, res) => {</span><br><span class="line">res.json({</span><br><span class="line">code: 200,</span><br><span class="line">message: ''</span><br><span class="line">})</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">app.listen(9999, () => {</span><br><span class="line">console.log('running on localhost:9999');</span><br><span class="line">})</span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> nodejs </tag>
<tag> express </tag>
</tags>
</entry>
<entry>
<title>ref函数</title>
<link href="/2022/10/20/ref-reactive-han-shu/"/>
<url>/2022/10/20/ref-reactive-han-shu/</url>
<content type="html"><![CDATA[<h3 id="1、ref用法"><a href="#1、ref用法" class="headerlink" title="1、ref用法"></a>1、ref用法</h3><p>ref是一个函数，绑定数据，使数据成为响应式数据，是深层绑定，使用更改数据都需要经过value属性</p><h3 id="2、shallowRef用法"><a href="#2、shallowRef用法" class="headerlink" title="2、shallowRef用法"></a>2、shallowRef用法</h3><p>shallowRef是表层绑定，只可以绑定的value这一层</p><p>ref和shallowRef不能同时使用，ref会影响使徒的更新，ref底层时调用triggerRef函数的使用，会将shallowRef一起更新！</p><h3 id="3、reactive函数"><a href="#3、reactive函数" class="headerlink" title="3、reactive函数"></a>3、reactive函数</h3><p>reacetive也是响应式绑定数据，限制绑定对象，引用类型，map，set的数据类型，可直接使用或者更改对象的数据，不用经过value属性</p><h3 id="4、toRef函数"><a href="#4、toRef函数" class="headerlink" title="4、toRef函数"></a>4、toRef函数</h3><p><em>toRef(结构的对象，结构的值)使用场景解构赋值</em>，想解构出来的数据成为响应式数据，就需要使用toRef函数，（前提解构的数据定义时也为响应式数据）!</p><p>vue官方为封装了一个函数实现这个功能，toRefs函数，将解构对象解构出来的数据变成响应数据</p><p>v-if会比较消耗性能，if为false或true时，会绑定生命周期的创建和销毁钩子（beforemounte）的，涉及了组件的销毁和创建，而v-show不会</p><h3 id="5、购物车案例"><a href="#5、购物车案例" class="headerlink" title="5、购物车案例"></a>5、购物车案例</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br></pre></td><td class="code"><pre><span class="line"><template></span><br><span class="line"> <div></span><br><span class="line"> <table border style="width:600px"></span><br><span class="line"> <thead></span><br><span class="line"> <tr></span><br><span class="line"> <th>名称</th></span><br><span class="line"> <th>数量</th></span><br><span class="line"> <th>价格</th></span><br><span class="line"> <th>操作</th></span><br><span class="line"> </tr></span><br><span class="line"> </thead></span><br><span class="line"> <tbody></span><br><span class="line"> <tr v-for="(item, index) in data" :key="index"></span><br><span class="line"> <th>{{item.name}}</th></span><br><span class="line"> <th><button @click="handleNum(item,false)">-</button>{{item.num}}<button @click="handleNum(item,true)">+</button></th></span><br><span class="line"> <th>{{item.price}}</th></span><br><span class="line"> <th><button @click="handleDel(index)">删除</button></th></span><br><span class="line"> </tr></span><br><span class="line"> </tbody></span><br><span class="line"> <tfoot></span><br><span class="line"> <th></th></span><br><span class="line"> <th></th></span><br><span class="line"> <th></th></span><br><span class="line"> <th>总价：{{total}}</th></span><br><span class="line"> </tfoot></span><br><span class="line"> </table></span><br><span class="line"> </div></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><script setup lang='ts'></span><br><span class="line">import { ref, reactive, computed} from 'vue'</span><br><span class="line">type Shop = {</span><br><span class="line"> name: string;</span><br><span class="line"> num: number;</span><br><span class="line"> price: number;</span><br><span class="line">}</span><br><span class="line">const data = reactive<Shop[]>([</span><br><span class="line"> {</span><br><span class="line"> name: '裤子',</span><br><span class="line"> num: 1,</span><br><span class="line"> price: 20</span><br><span class="line"> }, {</span><br><span class="line"> name: '外套',</span><br><span class="line"> num: 1,</span><br><span class="line"> price: 30</span><br><span class="line"> }, {</span><br><span class="line"> name: '帽子',</span><br><span class="line"> num: 1,</span><br><span class="line"> price: 50</span><br><span class="line"> }</span><br><span class="line">])</span><br><span class="line"></span><br><span class="line">let total = ref(0);</span><br><span class="line"></span><br><span class="line">// computed计算属性，只要里面用到的响应式数据发生变化，就会重新计算属性，不用再每一</span><br><span class="line">// 个用到此属性的位置调用</span><br><span class="line">total = computed(() => {</span><br><span class="line"> return data.reduce((prev, cur) => {</span><br><span class="line"> return prev + cur.num * cur.price;</span><br><span class="line"> }, 0)</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">const handleNum = (item:Shop, type:boolean):void => {</span><br><span class="line"> if (item.num > 1 && !type) {</span><br><span class="line"> item.num--;</span><br><span class="line"> }</span><br><span class="line"> if (item.num < 10 && type) {</span><br><span class="line"> item.num++;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">const handleDel = (index:number):void => {</span><br><span class="line"> data.splice(index, 1);</span><br><span class="line">}</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><style scoped></span><br><span class="line"> th {</span><br><span class="line"> align-items: center;</span><br><span class="line"> }</span><br><span class="line"></style></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> Vue3 </category>
</categories>
<tags>
<tag> Vue3 </tag>
</tags>
</entry>
<entry>
<title>Mock模拟数据</title>
<link href="/2022/10/11/mock-mo-ni-shu-ju/"/>
<url>/2022/10/11/mock-mo-ni-shu-ju/</url>
<content type="html"><![CDATA[]]></content>
</entry>
<entry>
<title>TypeScript基础</title>
<link href="/2022/10/09/typescript-ji-chu/"/>
<url>/2022/10/09/typescript-ji-chu/</url>
<content type="html"><![CDATA[]]></content>
<categories>
<category> TypeScript </category>
</categories>
<tags>
<tag> TypeScript </tag>
<tag> 前端 </tag>
</tags>
</entry>
<entry>
<title>一个大三前端的2022年中总结</title>
<link href="/2022/10/08/yi-ge-da-san-qian-duan-de-2022-nian-zhong-zong-jie/"/>
<url>/2022/10/08/yi-ge-da-san-qian-duan-de-2022-nian-zhong-zong-jie/</url>
<content type="html"><![CDATA[<h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>哎，迷茫</p><h3 id="为什么焦虑"><a href="#为什么焦虑" class="headerlink" title="为什么焦虑"></a>为什么焦虑</h3><h3 id="生命的意义"><a href="#生命的意义" class="headerlink" title="生命的意义"></a>生命的意义</h3><h3 id="生活的压力"><a href="#生活的压力" class="headerlink" title="生活的压力"></a>生活的压力</h3><h3 id="给自己的建议"><a href="#给自己的建议" class="headerlink" title="给自己的建议"></a>给自己的建议</h3><h3 id="结尾"><a href="#结尾" class="headerlink" title="结尾"></a>结尾</h3>]]></content>
<categories>
<category> 代码人生 </category>
</categories>
<tags>
<tag> 代码人生 </tag>
<tag> 迷茫 </tag>
<tag> 焦虑 </tag>
</tags>
</entry>
<entry>
<title>JSON的数据格式</title>
<link href="/2022/10/07/json-de-shu-ju-ge-shi/"/>
<url>/2022/10/07/json-de-shu-ju-ge-shi/</url>
<content type="html"><![CDATA[<h4 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h4><p>在JavaScript操作XML存在严重的跨浏览器问题，在XML结构中提取数据也要便利DOM，这些操作都要编写大量的代码，JSON的出现解决了这些麻烦。JSOM能够创建于XML相同的数据结构，JSON中的属性必须用双引号括起来。 </p>]]></content>
<categories>
<category> Markdown </category>
</categories>
<tags>
<tag> JSON </tag>
<tag> Ajax </tag>
</tags>
</entry>
<entry>
<title>我的第一篇博客</title>
<link href="/2022/10/05/wo-de-di-yi-pian-bo-ke/"/>
<url>/2022/10/05/wo-de-di-yi-pian-bo-ke/</url>
<content type="html"><![CDATA[<p>第一章<br>内容<br>第二章<br>内容</p>]]></content>
</entry>
<entry>
<title>Hello World</title>
<link href="/2022/10/05/hello-world/"/>
<url>/2022/10/05/hello-world/</url>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/writing.html">Writing</a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/server.html">Server</a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/generating.html">Generating</a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>]]></content>
</entry>
</search>