-
Notifications
You must be signed in to change notification settings - Fork 0
/
day0.html
61 lines (59 loc) · 11.5 KB
/
day0.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>起步工具 | Yu jax</title>
<meta name="description" content="test">
<link rel="preload" href="/vuepress-notes/assets/css/0.styles.89bbdc55.css" as="style"><link rel="preload" href="/vuepress-notes/assets/js/app.983685f1.js" as="script"><link rel="preload" href="/vuepress-notes/assets/js/4.62b083e6.js" as="script"><link rel="prefetch" href="/vuepress-notes/assets/js/10.1829f47d.js"><link rel="prefetch" href="/vuepress-notes/assets/js/11.69095bd9.js"><link rel="prefetch" href="/vuepress-notes/assets/js/12.dbbae759.js"><link rel="prefetch" href="/vuepress-notes/assets/js/13.edc40bb1.js"><link rel="prefetch" href="/vuepress-notes/assets/js/14.ec660216.js"><link rel="prefetch" href="/vuepress-notes/assets/js/15.3e2354c4.js"><link rel="prefetch" href="/vuepress-notes/assets/js/16.2c0ae231.js"><link rel="prefetch" href="/vuepress-notes/assets/js/17.083b5622.js"><link rel="prefetch" href="/vuepress-notes/assets/js/18.65c68b6b.js"><link rel="prefetch" href="/vuepress-notes/assets/js/19.16b22c1d.js"><link rel="prefetch" href="/vuepress-notes/assets/js/2.89ad5a90.js"><link rel="prefetch" href="/vuepress-notes/assets/js/20.ed7623b2.js"><link rel="prefetch" href="/vuepress-notes/assets/js/3.4e00d1f1.js"><link rel="prefetch" href="/vuepress-notes/assets/js/5.67d2c5de.js"><link rel="prefetch" href="/vuepress-notes/assets/js/6.60261b9f.js"><link rel="prefetch" href="/vuepress-notes/assets/js/7.cf4b2ab5.js"><link rel="prefetch" href="/vuepress-notes/assets/js/8.77fa9358.js"><link rel="prefetch" href="/vuepress-notes/assets/js/9.06f97c9c.js">
<link rel="stylesheet" href="/vuepress-notes/assets/css/0.styles.89bbdc55.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vuepress-notes/" class="home-link router-link-active"><!----> <span class="site-name">Yu jax</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vuepress-notes/" class="nav-link">首页</a></div><div class="nav-item"><a href="https://github.com/cvecve147" target="_blank" rel="noopener noreferrer" class="nav-link external">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="mailto:u0633126@gm.nuu.edu.tw" class="nav-link external">
聯絡我
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vuepress-notes/" class="nav-link">首页</a></div><div class="nav-item"><a href="https://github.com/cvecve147" target="_blank" rel="noopener noreferrer" class="nav-link external">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="mailto:u0633126@gm.nuu.edu.tw" class="nav-link external">
聯絡我
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/vuepress-notes/" class="sidebar-link">內容簡介</a></li><li><a href="/vuepress-notes/menu.html" class="sidebar-link">菜單總覽</a></li><li><a href="/vuepress-notes/day0.html" class="active sidebar-link">Day0 起步工具</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vuepress-notes/day1.html" class="sidebar-link">Day1 古早味事件燉畫面綁定</a></li><li><a href="/vuepress-notes/day2.html" class="sidebar-link">Day2 清爽表單處理佐雙向資料</a></li><li><a href="/vuepress-notes/day3.html" class="sidebar-link">Day3 使用者輸入焗列表呈現</a></li><li><a href="/vuepress-notes/day4.html" class="sidebar-link">Day4 峰峰相連互動式資料表單</a></li><li><a href="/vuepress-notes/day5.html" class="sidebar-link">Day5 天然 CSS 過場佐 jQuery 動畫</a></li><li><a href="/vuepress-notes/day6.html" class="sidebar-link">Day6 異國風情資料觀測與設定</a></li><li><a href="/vuepress-notes/day7.html" class="sidebar-link">Day7 有機發酵生命週期</a></li><li><a href="/vuepress-notes/day8.html" class="sidebar-link">Day8 家鄉通訊錄佐手作</a></li><li><a href="/vuepress-notes/day9.html" class="sidebar-link">Day9 特製雕花 Vue-cli 3.0 與 Node.js 開發環境</a></li><li><a href="/vuepress-notes/day10.html" class="sidebar-link">Day10 科學單檔模組化料理</a></li><li><a href="/vuepress-notes/day11.html" class="sidebar-link">Day11 清燉嫩煮百頁路由</a></li><li><a href="/vuepress-notes/day12.html" class="sidebar-link">Day12 Vuex</a></li><li><a href="/vuepress-notes/day13.html" class="sidebar-link">Day13 漸進式框架</a></li></ul> </div> <div class="page"> <div class="content"><h3 id="起步工具"><a href="#起步工具" aria-hidden="true" class="header-anchor">#</a> 起步工具</h3> <p>安裝環境</p> <ul><li>nodejs</li> <li>vscode</li> <li>chrome vue.js devtools</li></ul> <p>編輯器:Vscode</p> <p>擴充:</p> <div class="language- extra-class"><pre class="language-text"><code>cdnjs 抓取JS libraries
Vetur 開發vue 主要工具
VueHelper 針對Vue的snippet
Live Server 直接開啟local端server
Path intellisense 路徑自動補齊顯示
</code></pre></div><p>Setting:</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"files.autoSave"</span><span class="token operator">:</span> <span class="token string">"onFocusChange"</span><span class="token punctuation">,</span>
<span class="token property">"editor.formatOnSave"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"emmet.triggerExpansionOnTab"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"workbench.colorTheme"</span><span class="token operator">:</span> <span class="token string">"One Dark Pro"</span><span class="token punctuation">,</span>
<span class="token property">"liveServer.settings.donotShowInfoMsg"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"html.format.wrapLineLength"</span><span class="token operator">:</span> <span class="token number">120</span><span class="token punctuation">,</span>
<span class="token property">"vetur.format.styleInitialIndent"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"vetur.format.scriptInitialIndent"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"vetur.format.defaultFormatter.html"</span><span class="token operator">:</span> <span class="token string">"js-beautify-html"</span><span class="token punctuation">,</span>
<span class="token property">"prettier.semi"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token property">"prettier.singleQuote"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"prettier.eslintIntegration"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"editor.fontFamily"</span><span class="token operator">:</span> <span class="token string">"Fira Code"</span><span class="token punctuation">,</span>
<span class="token property">"editor.fontWeight"</span><span class="token operator">:</span> <span class="token string">"500"</span><span class="token punctuation">,</span>
<span class="token property">"editor.fontLigatures"</span><span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
</code></pre></div><p>設定中的"editor.fontFamily": "Fira Code" 需要安裝 <a href="https://github.com/tonsky/FiraCode">字體 </a></p> <img src="https://i.imgur.com/jLKn16W.png"> <h4 id="html-彙整"><a href="#html-彙整" aria-hidden="true" class="header-anchor">#</a> HTML 彙整</h4> <div class="language- extra-class"><pre class="language-text"><code> 原本 縮寫
- v-bind: :
- v-on:click=function() @
- v-if="條件"
- v-model="變數"
- v-for="變數 in 資料"
</code></pre></div></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/vuepress-notes/menu.html" class="prev">
菜單總覽
</a></span> <span class="next"><a href="/vuepress-notes/day1.html">
Day1 古早味事件燉畫面綁定
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vuepress-notes/assets/js/app.983685f1.js" defer></script><script src="/vuepress-notes/assets/js/4.62b083e6.js" defer></script>
</body>
</html>