diff options
| author | Pin-Ting Tang <qiiwiiq@hotmail.com> | 2021-05-04 14:14:28 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-05-04 14:14:28 +0800 |
| commit | f1f12997d66d03828430d3e87bda38f7b59847da (patch) | |
| tree | 497fa72b2838c7aa3c5acaf72e31e0040a71d1b7 /files/zh-tw/learn/tools_and_testing | |
| parent | e9db02793c71cf17fe29ddf113390549a614b9c0 (diff) | |
| download | translated-content-f1f12997d66d03828430d3e87bda38f7b59847da.tar.gz translated-content-f1f12997d66d03828430d3e87bda38f7b59847da.tar.bz2 translated-content-f1f12997d66d03828430d3e87bda38f7b59847da.zip | |
Update /learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started, zh-TW (#739)
* Getting started with Vue (zh-TW translation)
* fix: 中英文間添加半形空白 / 修正用詞：前處理器改成預處理器 / 修正破折號
* fix: 修改連結 - /en-US 改成 /zn-TW
Diffstat (limited to 'files/zh-tw/learn/tools_and_testing')
| -rw-r--r-- | files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html | 240 |
1 files changed, 120 insertions, 120 deletions
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html index 4720f18769..e534abf22e 100644 --- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html +++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html @@ -1,5 +1,5 @@ --- -title: 開始學 Vue +title: Vue 入門 slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started tags: - Beginner @@ -14,16 +14,16 @@ tags: <div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div> -<p class="summary">現在來介紹我們的第三個框架 Vue。在這篇文章中，我們會介紹 Vue 的背景，如何安裝 Vue 及建立一個新專案，學習整個 Vue 專案的高階架構及一個獨立的元件，學習如何在本地端運行專案，以及開始建構我們的範例。</p> +<p class="summary">現在來介紹我們的第三個框架 Vue 。在這篇文章中，我們會介紹 Vue 的背景，如何安裝 Vue 及建立一個新專案，學習整個 Vue 專案的高階架構及一個獨立的元件，學習如何在本地端運行專案，以及開始建構我們的範例。</p> <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">先備知識</th> + <th scope="row">預備知識</th> <td> - <p>熟悉 <a href="/en-US/docs/Learn/HTML">HTML</a>、<a href="/en-US/docs/Learn/CSS">CSS</a>、以及 <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> 的核心知識，知道如何使用 <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">終端機/命令列工具（terminal/command line）</a>。</p> + <p>熟悉 <a href="/zh-TW/docs/Learn/HTML">HTML</a> 、 <a href="/zh-TW/docs/Learn/CSS">CSS</a> 、以及 <a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a> 的核心知識，知道如何使用<a href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">終端機/命令列工具（ terminal/command line ）</a>。</p> - <p>Vue 元件是由 Javascript 物件（用來管理應用的資料）及樣本語法（用來映射成 DOM 結構）所組成的。另外，你將需要使用終端機安裝 node 和 npm，以便下載及使用一些 Vue 的進階功能（像是單一檔案的元件或是渲染函式）</p> + <p>Vue 元件是由 Javascript 物件（用來管理應用的資料）及樣本語法（用來映射成 DOM 結構）所組成的。另外，你將需要使用終端機安裝 node 和 npm ，以便下載及使用一些 Vue 的進階功能（像是單一檔案的元件或是渲染函式）</p> </td> </tr> <tr> @@ -35,18 +35,18 @@ tags: <h2 id="A_clearer_Vue">更了解 Vue</h2> -<p>Vue 是一個新穎的 Javascript 框架，它提供了很多有用的功能來達到漸進增強（progressive enhancement）的策略。與其他的框架不同的是，你可以把 Vue 和既有的 HTML 做整合，這讓你可以像使用插入性替換的函式庫一樣來使用 Vue，就像使用 <a href="/en-US/docs/Glossary/jQuery">JQuery</a> 一樣。</p> +<p>Vue 是一個新穎的 Javascript 框架，它提供了很多有用的功能來達到漸進增強（ progressive enhancement ）的策略。與其他的框架不同的是，你可以把 Vue 和既有的 HTML 做整合，這讓你可以像使用插入性替換的函式庫一樣來使用 Vue ，就像使用 <a href="/zh-TW/docs/Glossary/jQuery">JQuery</a> 一樣。</p> -<p>除此之外，你也可以使用 Vue 來寫一個單頁式應用程式。這讓你可以完全使用 Vue 來建構網頁，當處理較複雜的應用時有較好的開發效率及體驗。Vue 也有提供函式庫來做客戶端路由及狀態管理。Vue 對客戶端路由及狀態管理這些工具採取中間立場的態度，雖然 Vue 的核心團隊推薦使用這些函式庫，但是這些函式庫沒有直接打包進 Vue，而是讓你可以自由選擇使用其他更適合你的應用的路由庫或狀態管理庫。</p> +<p>除此之外，你也可以使用 Vue 來寫一個單頁式應用程式。這讓你可以完全使用 Vue 來建構網頁，當處理較複雜的應用時有較好的開發效率及體驗。 Vue 也有提供函式庫來做客戶端路由及狀態管理。 Vue 對客戶端路由及狀態管理這些工具採取中間立場的態度，雖然 Vue 的核心團隊推薦使用這些函式庫，但是這些函式庫沒有直接打包進 Vue，而是讓你可以自由選擇使用其他更適合你的應用的路由庫或狀態管理庫。</p> -<p>除了可以漸進地把 Vue 整合到應用程式裡，Vue 也提供了漸進式的方法來撰寫網頁內容。就像大部分的框架，Vue 讓你創造可以重複使用的網頁內容區塊（稱為元件）。大部分時候，Vue 元件是用一種特殊的 HTML 樣板語法寫成的，然而在一些場景使用 HTML 語法會有限制時，你可以使用 JSX 或是 Javascript 函式來定義你的元件。</p> +<p>除了可以漸進地把 Vue 整合到應用程式裡， Vue 也提供了漸進式的方法來撰寫網頁內容。就像大部分的框架， Vue 讓你創造可以重複使用的網頁內容區塊（稱為元件）。大部分時候， Vue 元件是用一種特殊的 HTML 樣板語法寫成的，然而在一些場景使用 HTML 語法會有限制時，你可以使用 JSX 或是 Javascript 函式來定義你的元件。</p> <p>當你閱讀這份教程時，你可以在其他分頁打開 <a href="https://vuejs.org/v2/guide/">Vue 指南</a> 以及 <a href="https://vuejs.org/v2/api/">API 文件</a>，以方便參考更多資訊。<br> 如果你想要找一份好的（可能有些偏見）文件探討 Vue 與其他框架的比較，請參見 <a href="https://vuejs.org/v2/guide/comparison.html">Vue 指南：對比其他框架</a>。</p> <h2 id="Installation">安裝</h2> -<p>如果要在既有的專案中使用 Vue，你可以把以下任一個 <code><a href="/en-US/docs/Web/HTML/Element/script"><script></a></code> 標籤加到你的頁面中，這樣你就可以開始在專案中使用 Vue，這也是為什麼 Vue 宣稱自己是一個漸進式的框架。它提供了一個很好的機會，你可以把一些使用函式庫（像是 JQuery）的專案轉變成使用 Vue，如此一來，你就可以使用很多 Vue 的核心功能，像是屬性、客製化元件以及資料管理。</p> +<p>如果要在既有的專案中使用 Vue ，你可以把以下任一個 <code><a href="/zh-TW/docs/Web/HTML/Element/script"><script></a></code> 標籤加到你的頁面中，這樣你就可以開始在專案中使用 Vue ，這也是為什麼 Vue 宣稱自己是一個漸進式的框架。它提供了一個很好的機會，你可以把一些使用函式庫（像是 JQuery ）的專案轉變成使用 Vue ，如此一來，你就可以使用很多 Vue 的核心功能，像是屬性、客製化元件以及資料管理。</p> <ul> <li> @@ -61,7 +61,7 @@ tags: </li> </ul> -<p>然而，以上方法有一些限制。若要建置一些較複雜的應用程式，你將需要使用 <a href="https://www.npmjs.com/package/vue">Vue NPM 套件</a>。 這讓你可以使用 Vue 的進階功能且可以使用打包器像是 WebPack。為了讓使用 Vue 建置應用程式變得更容易，可以使用 CLI 來精簡化開發流程。如果要使用 npm 套件 & CLI，你將需要：</p> +<p>然而，以上方法有一些限制。若要建置一些較複雜的應用程式，你將需要使用 <a href="https://www.npmjs.com/package/vue">Vue NPM 套件</a>。 這讓你可以使用 Vue 的進階功能且可以使用打包器像是 WebPack。為了讓使用 Vue 建置應用程式變得更容易，可以使用 CLI 來精簡化開發流程。如果要使用 npm 套件 & CLI ，你將需要：</p> <ol> <li>安裝 Node.js 8.11+</li> @@ -69,18 +69,18 @@ tags: </ol> <div class="notecard note"> -<p><strong>注意</strong>：如果你沒有安裝以上工具，請參考<a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#adding_powerups">關於安裝 npm 及 Node.js</a>。</p> +<p><strong>注意</strong>：如果你沒有安裝以上工具，請參考<a href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#adding_powerups">關於安裝 npm 及 Node.js</a> 。</p> </div> -<p>在你的終端機執行以下命令來安裝 CLI：</p> +<p>在你的終端機執行以下命令來安裝 CLI ：</p> <pre class="brush: bash">npm install --global @vue/cli</pre> -<p>或者你比較喜歡使用 yarn：</p> +<p>或者你比較喜歡使用 yarn ：</p> <pre class="brush: bash">yarn global add @vue/cli</pre> -<p>安裝完 CLI 後，在你想要創建專案的資料夾內開啟終端機然後執行 <code>vue create <project-name></code> 來初始化專案。CLI 將會給你一連串專案組態，有些設定有預設值，而你可以更改成你自己的設定。這些選項讓你可以在專案裡配置 TypeScript、linting、vue-router、Testing 等等。</p> +<p>安裝完 CLI 後，在你想要創建專案的資料夾內開啟終端機然後執行 <code>vue create <project-name></code> 來初始化專案。 CLI 將會給你一連串專案組態，有些設定有預設值，而你可以更改成你自己的設定。這些選項讓你可以在專案裡配置 TypeScript 、 linting 、 vue-router 、 Testing 等等。</p> <p>之後我們會介紹如何使用它。</p> @@ -89,18 +89,18 @@ tags: <p>為了探索 Vue 各式各樣的功能，我們將會製作一個待辦事項應用程式。我們將使用 Vue CLI 來創造一個新專案框架來建構我們的應用程式。請跟著以下步驟：</p> <ol> - <li>在終端機 <code>cd</code> 切換到你想要創建應用程式的資料夾，然後執行 <code>vue create moz-todo-vue</code>。</li> - <li>使用方向鍵以及 <kbd>Enter</kbd> 鍵，選擇「Manually select features」</li> - <li>第一個呈現在你眼前的選單讓你選擇想要加入到專案的功能。確認「Babel」和「Linter / Formatter」都已選取。如果沒有的話，使用方向鍵及空白鍵來切換選取，當它們都已被選取，按下 <kbd>Enter</kbd> 鍵進行下一步。</li> - <li>接下來，你要選擇 linter / formatter 的設定。切換到「Eslint with error prevention only」然後按下 <kbd>Enter</kbd>。這個設定會進行報錯提醒，但不會強制你修改。</li> - <li>然後，你將會被詢問需要哪種自動化的 linting 設定。選擇「Lint on save」。這樣每當我們儲存專案檔案時，就會自動幫我們檢查錯誤。按下 <kbd>Enter</kbd> 鍵進行下一步。</li> - <li>現在，你將要選擇如何管理你的組態檔案。「In dedicated config files」將會把你的組態設定放在專門的檔案裡，像是 ESLint 的組態設定會放在它們專門的檔案裡。「In package.json」，會把你的組態設定放在應用程式的 <code>package.json</code> 檔案裡。選擇「In dedicated config files」然後按下 <kbd>Enter</kbd>。</li> - <li>最後，你將會被問到是否要將以上設定存為預設值。你可以自行決定，如果未來想要再使用這組設定，請按下 <kbd>y</kbd>， 否則按 <kbd>n</kbd>。</li> + <li>在終端機 <code>cd</code> 切換到你想要創建應用程式的資料夾，然後執行 <code>vue create moz-todo-vue</code> 。</li> + <li>使用方向鍵以及 <kbd>Enter</kbd> 鍵，選擇「 Manually select features 」</li> + <li>第一個呈現在你眼前的選單讓你選擇想要加入到專案的功能。確認「 Babel 」和「 Linter / Formatter 」都已選取。如果沒有的話，使用方向鍵及空白鍵來切換選取，當它們都已被選取，按下 <kbd>Enter</kbd> 鍵進行下一步。</li> + <li>接下來，你要選擇 linter / formatter 的設定。切換到「 Eslint with error prevention only 」然後按下 <kbd>Enter</kbd> 。這個設定會進行報錯提醒，但不會強制你修改。</li> + <li>然後，你將會被詢問需要哪種自動化的 linting 設定。選擇「 Lint on save 」。這樣每當我們儲存專案檔案時，就會自動幫我們檢查錯誤。按下 <kbd>Enter</kbd> 鍵進行下一步。</li> + <li>現在，你將要選擇如何管理你的組態檔案。「 In dedicated config files 」將會把你的組態設定放在專門的檔案裡，像是 ESLint 的組態設定會放在它們專門的檔案裡。「 In package.json 」，會把你的組態設定放在應用程式的 <code>package.json</code> 檔案裡。選擇「 In dedicated config files 」然後按下 <kbd>Enter</kbd> 。</li> + <li>最後，你將會被問到是否要將以上設定存為預設值。你可以自行決定，如果未來想要再使用這組設定，請按下 <kbd>y</kbd> ， 否則按 <kbd>n</kbd> 。</li> </ol> <p>CLI 會開始建構你的專案，並且安裝所需的相依套件。</p> -<p>如果你之前沒有執行過 Vue CLI，你將會被問一個問題－請選擇套件管理員。你可以使用方向鍵來選擇你想使用的套件管理員，Vue CLI 將會把這個套件管理員設為預設值。之後如果你想要使用不同的套件管理員，可以在執行 <code>vue create</code> 時傳入一個標幟 <code>--packageManager=<package-manager></code>。舉例來說，如果你現在想要用 npm 來創建 <code>moz-todo-vue</code> 專案，但是之前是使用 yarn，你可以執行 <code>vue create moz-todo-vue --packageManager=npm</code>。</p> +<p>如果你之前沒有執行過 Vue CLI ，你將會被問一個問題－請選擇套件管理員。你可以使用方向鍵來選擇你想使用的套件管理員，Vue CLI 將會把這個套件管理員設為預設值。之後如果你想要使用不同的套件管理員，可以在執行 <code>vue create</code> 時傳入一個標幟 <code>--packageManager=<package-manager></code> 。舉例來說，如果你現在想要用 npm 來創建 <code>moz-todo-vue</code> 專案，但是之前是使用 yarn ，你可以執行 <code>vue create moz-todo-vue --packageManager=npm</code> 。</p> <div class="notecard note"> <p><strong>注意</strong>：在這裡我們沒有介紹所有的選項，你可以參考 Vue 官方文件裡的<a href="https://cli.vuejs.org">關於 CLI 的更多資訊</a>。</p> @@ -108,26 +108,26 @@ tags: <h2 id="Project_structure">專案結構</h2> -<p>如果以上都執行成功的話，CLI 將會為你的專案創建一連串的檔案和資料夾。其中最重要的如下：</p> +<p>如果以上都執行成功的話， CLI 將會為你的專案創建一連串的檔案和資料夾。其中最重要的如下：</p> <ul> - <li><code>.eslintrc.js</code>：這是 <a href="https://eslint.org/">eslint</a> 的組態檔案，你可以使用它來管理你的 linting 規則。</li> - <li><code>babel.config.js</code>：這是 <a href="https://babeljs.io/">Babel</a> 的組態檔案，在開發階段我們可以使用一些 Javascript 的新功能，透過這個檔案轉換成在產品環境可以跨瀏覽器運行的舊版語法。你也可以在這個檔案裡註冊額外的 babel 套件。</li> - <li><code>.browserslistrc</code>：這是 <a href="https://github.com/browserslist/browserslist">Browserslist</a>的組態檔案。你可以透過它來控制需要對哪些瀏覽器進行支持與優化</li> - <li><code>public</code>：這個資料夾包含了所有發布的靜態檔案，這些檔案在建置過程不會經過 <a href="https://webpack.js.org/">Webpack</a> 加工。（但是有一個例外：<code>index.html</code> 會有一些處理）。 + <li><code>.eslintrc.js</code> ：這是 <a href="https://eslint.org/">eslint</a> 的組態檔案，你可以使用它來管理你的 linting 規則。</li> + <li><code>babel.config.js</code> ：這是 <a href="https://babeljs.io/">Babel</a> 的組態檔案，在開發階段我們可以使用一些 Javascript 的新功能，透過這個檔案轉換成在產品環境可以跨瀏覽器運行的舊版語法。你也可以在這個檔案裡註冊額外的 babel 套件。</li> + <li><code>.browserslistrc</code> ：這是 <a href="https://github.com/browserslist/browserslist">Browserslist</a> 的組態檔案。你可以透過它來控制需要對哪些瀏覽器進行支持與優化</li> + <li><code>public</code> ：這個資料夾包含了所有發布的靜態檔案，這些檔案在建置過程不會經過 <a href="https://webpack.js.org/">Webpack</a> 加工。（但是有一個例外： <code>index.html</code> 會有一些處理）。 <ul> - <li><code>favicon.ico</code>：這是應用程式的 favicon。目前是 Vue 的標誌。</li> - <li><code>index.html</code>：這是應用程式的模板。你的 Vue 應用程式會透過這個 HTML 頁面來運行，你也可以使用 lodash 樣板語言在這個頁面穿插一些值。 + <li><code>favicon.ico</code> ：這是應用程式的 favicon。目前是 Vue 的標誌。</li> + <li><code>index.html</code> ：這是應用程式的模板。你的 Vue 應用程式會透過這個 HTML 頁面來運行，你也可以使用 lodash 樣板語言在這個頁面穿插一些值。 <div class="note"><strong>注意</strong>：這個模板不是用來管理你的應用程式的版面－而是用來管理應用程式以外的靜態 HTML 檔案，只有在使用一些進階的功能才需要修改這個檔案。</div> </li> </ul> </li> - <li><code>src</code>：這個資料夾是 Vue 專案的核心。 + <li><code>src</code> ：這個資料夾是 Vue 專案的核心。 <ul> - <li><code>main.js</code>：這是應用程式的進入點。目前，這個檔案會初始化你的 Vue 應用程式並定義要將應用掛載到 <code>index.html</code> 檔案中的哪個 HTML 元素。通常還會在這個檔案註冊全域性元件或載入其他 Vue 函式庫。</li> - <li><code>App.vue</code>：這是 Vue 應用程式的根節點元件。往下看可以了解更多關於 Vue 元件的說明。</li> - <li><code>components</code>：你可以把你的元件放在這個資料夾。目前它只有放一個範例元件。</li> - <li><code>assets</code>：這個資料夾是用來放一些靜態檔案像是 CSS 和圖片。因為這些檔案在來源目錄下，它們可以透過 Webpack 加工處理。這表示你可以使用一些前處理器，像是 <a href="https://sass-lang.com/">Sass / SCSS</a> 或是 <a href="https://stylus-lang.com/">Stylus</a>。</li> + <li><code>main.js</code> ：這是應用程式的進入點。目前，這個檔案會初始化你的 Vue 應用程式並定義要將應用掛載到 <code>index.html</code> 檔案中的哪個 HTML 元素。通常還會在這個檔案註冊全域性元件或載入其他 Vue 函式庫。</li> + <li><code>App.vue</code> ：這是 Vue 應用程式的根節點元件。往下看可以了解更多關於 Vue 元件的說明。</li> + <li><code>components</code> ：你可以把你的元件放在這個資料夾。目前它只有放一個範例元件。</li> + <li><code>assets</code> ：這個資料夾是用來放一些靜態檔案像是 CSS 和圖片。因為這些檔案在來源目錄下，它們可以透過 Webpack 加工處理。這表示你可以使用一些預處理器，像是 <a href="https://sass-lang.com/">Sass / SCSS</a> 或是 <a href="https://stylus-lang.com/">Stylus</a> 。</li> </ul> </li> </ul> @@ -136,55 +136,55 @@ tags: <p><strong>注意</strong>：依據你創建專案時所選設定的不同，你可能會看到其他資料夾（舉例來說，如果你有選擇 router，你將會看到一個 <code>views</code> 資料夾）。</p> </div> -<h2 id=".vue_files_single_file_components">.vue 檔案 (單一檔案元件)</h2> +<h2 id=".vue_files_single_file_components">.vue 檔案（單一檔案元件）</h2> -<p>Like in many front-end frameworks, components are a central part of building apps in Vue. These components let you break a large application into discrete building blocks that can be created and managed separately, and transfer data between each other as required. These small blocks can help you reason about and test your code.</p> +<p>就像很多其他的框架一樣，元件是建構應用程式中很重要的一部分。這些元件讓你可以把一個很大的應用程式拆分成獨立的區塊，這些區塊可以分別被創建和管理，而且彼此之間可以傳遞所需要的資料。這些小區塊程式碼讓人更容易理解及測試。</p> -<p>While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using <a href="https://vuejs.org/v2/guide/single-file-components.html">Single File Components</a>, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in <code>.vue</code>. These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components.</p> +<p>雖然有些框架鼓勵你把模板、邏輯和樣式的程式碼放在不同的檔案，但是 Vue 卻採取相反的策略。使用<a href="https://vuejs.org/v2/guide/single-file-components.html">單一檔案元件</a>時， Vue 讓你把模板、相關指令碼和 CSS 整合在一起放在以 <code>.vue</code> 結尾的檔案裡。這些檔案會被 JS 的打包工具（像是 Webpack ）加以處理，這也代表你可以在你的專案裡使用一些建置工具，像是 Babel 、 TypeScript 、 SCSS 等工具來創造更複雜的元件。</p> -<p>As a bonus, projects created with the Vue CLI are configured to use <code>.vue</code> files with Webpack out of the box. In fact, if you look inside the <code>src</code> folder in the project we created with the CLI, you'll see your first <code>.vue</code> file: <code>App.vue</code>.</p> +<p>使用 Vue CLI 創建的專案會產生現成的 <code>.vue</code> 檔案以及 Webpack 。看一下我們使用 CLI 創建的專案，在 <code>src</code> 資料夾會看到你的第一個 <code>.vue</code> 檔案： <code>App.vue</code> 。</p> -<p>Let's explore this now.</p> +<p>現在讓我們來探索。</p> <h3 id="App.vue">App.vue</h3> -<p>Open your <code>App.vue</code> file — you’ll see that it has three parts: <code><template></code>, <code><script></code>, and <code><style></code>, which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.</p> +<p>打開 <code>App.vue</code> 檔案——你將會看到它由三個部分組成： <code><template></code> 、 <code><script></code> 以及 <code><style></code> ，分別包含了元件的模板、指令碼和樣式資訊。所有的單一檔案元件都是使用這種基本架構。</p> -<p><code><template></code> contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.</p> +<p><code><template></code> 包含所有的標記結構以及元件的呈現邏輯。你的模板可以包含任何有效的 HTML，以及一些我們接下來要介紹的 Vue 特定的語法。</p> <div class="notecard note"> -<p><strong>Note</strong>: By setting the <code>lang</code> attribute on the <code><template></code> tag, you can use Pug template syntax instead of standard HTML — <code><template lang="pug"></code>. We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.</p> +<p><strong>注意</strong>：在 <code><template></code> 標籤上設定 <code>lang</code> 屬性。例如設置 <code><template lang="pug"></code>，你就可以使用 Pug 樣板語法來取代標準的 HTML 。在本教學中我們會使用標準 HTML ，但還是值得知道有這個方法。</p> </div> -<p><code><script></code> contains all of the non-display logic of your component. Most importantly, your <code><script></code> tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a <code>render()</code> function.</p> +<p><code><script></code> 包含元件中所有非顯示的邏輯。最重要的是，你的 <code><script></code> 標籤必須輸出一個 JS 物件。這個物件是你在本地端註冊的元件，包含定義屬性、處理本地狀態、定義方法等等。在建置步驟這個物件會被處理及轉換（包含 template 模板），變成一個有 <code>render()</code> 函數的 Vue 元件。</p> -<p>In the case of <code>App.vue</code>, our default export sets the name of the component to <code>App</code> and registers the <code>HelloWorld</code> component by adding it into the <code>components</code> property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.</p> +<p>以 <code>App.vue</code> 為例，我們設定元件的名稱為 <code>App</code> ，並且在 <code>components</code> 屬性中加入 <code>HelloWorld</code> 來註冊這個元件。以這種方式來註冊元件是本地註冊。本地註冊的元件只能在註冊它們的元件裡面使用，所以你需要在每個使用它們的元件檔案裡匯入並且註冊它們。這對於 bundle splitting/tree shaking 很有用，因為在應用程式裡不是每一頁都需要所有的元件。</p> <pre class="brush: js">import HelloWorld from './components/HelloWorld.vue'; export default { name: 'App', components: { - //You can register components locally here. + // 你可以在這裡註冊元件 HelloWorld } };</pre> <div class="notecard note"> -<p><strong>注意</strong>: 如果你想要使用 <a href="https://www.typescriptlang.org/">TypeScript</a> 語法， you need to set the <code>lang</code> attribute on the <code><script></code> tag to signify to the compiler that you're using TypeScript — <code><script lang="ts"></code>.</p> +<p><strong>注意</strong>：如果你想要使用 <a href="https://www.typescriptlang.org/">TypeScript</a> 語法，你必須把 <code><script></code> 標籤的 <code>lang</code> 屬性設定成 <code><script lang="ts"></code> 來告訴編譯器你要使用 TypeScript 。</p> </div> -<p><code><style></code> is where you write your CSS for the component. If you add a <code>scoped</code> attribute — <code><style scoped></code> — Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.</p> +<p><code><style></code> 是你撰寫元件的 CSS 的地方。如果你加上 <code>scoped</code> 屬性，例如 <code><style scoped></code> ， Vue 會把樣式的範圍限制在這個單一檔案元件裡。這類似 CSS-in-JS 的解決方案，但是它允許你寫單純的 CSS 。</p> <div class="notecard note"> -<p><strong>Note</strong>: If you select a CSS pre-processor when creating the project via the CLI, you can add a <code>lang</code> attribute to the <code><style></code> tag so that the contents can be processed by Webpack at build time. For example, <code><style lang="scss"></code> will allow you to use SCSS syntax in your styling information.</p> +<p><strong>注意</strong>：如果你在使用 CLI 創建專案時有選擇 CSS 預處理器，你可以在 <code><style></code> 標籤上添加 <code>lang</code> 屬性，這些內容在建置的時候將會被 Webpack 處理。舉例來說， <code><style lang="scss"></code> 允許你在樣式資訊中使用 SCSS 語法。</p> </div> <h2 id="Running_the_app_locally">在本地端運行應用程式</h2> -<p>The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a <code>serve</code> command to the project’s <code>package.json</code> file as an npm script, so you can easily run it.</p> +<p>Vue CLI 有內建的程式開發伺服器。這讓你可以在本地端運行你的應用程式，你不需要自己設置一個伺服器就可以很輕鬆地測試它。 CLI 有添加一個 <code>serve</code> 命令在專案的 <code>package.json</code> 檔案中當成一個 npm script ，所以你可以很輕易的運行它。</p> -<p>In your terminal, try running <code>npm run serve</code> (or <code>yarn serve</code> if you prefer yarn). Your terminal should output something like the following:</p> +<p>在你的終端機執行 <code>npm run serve</code>（或 <code>yarn serve</code> 如果你比較喜歡使用 yarn ）。你的終端機會輸出類似以下的資訊：</p> <pre>INFO Starting development server... 98% after emitting CopyPlugin @@ -198,25 +198,25 @@ export default { Note that the development build is not optimized. To create a production build, run npm run build.</pre> -<p>If you navigate to the “local” address in a new browser tab (this should be something like <code>http://localhost:8080</code> as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.</p> +<p>如果你在瀏覽器的新分頁開啟「本地」位址（如上所述，這串位址應該會類似 <code>http://localhost:8080</code> ，但可能因設置而異），你應該會看到你的應用程式。現在，它應該包含一個歡迎訊息、一個導向 Vue 文件的連結、使用 CLI 初始化應用程式時所添加的套件的連結、以及一些導向 Vue 社群及生態圈的有用連結。</p> <p><img alt="default vue app render, with vue logo, welcome message, and some documentation links" src="vue-default-app.png" style="border-style: solid; border-width: 1px;"></p> -<h2 id="Making_a_couple_of_changes">Making a couple of changes</h2> +<h2 id="Making_a_couple_of_changes">做一些改變</h2> -<p>Let's make our first change to the app — we’ll delete the Vue logo. Open the <code>App.vue</code> file, and delete the <code><a href="/en-US/docs/Web/HTML/Element/img"><img></a></code> element from the template section:</p> +<p>現在讓我們來對應用程式做一些改變——刪除 Vue logo 。打開 <code>App.vue</code> 檔案，從 template 區塊刪除 <code><a href="/zh-TW/docs/Web/HTML/Element/img"><img></a></code> 元素：</p> <pre class="brush: html"><span class="author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90z8h7gz67ziz76zcz77zz80zz71zncfz69zz69ziaz82zz71zz72zhz77zz122zz90z14mcyd"><img alt="Vue logo" src="./assets/logo.png"></span></pre> -<p>If your server is still running, you should see the logo removed from the rendered site almost instantly. Let’s also remove the <code>HelloWorld</code> component from our template.</p> +<p>如果你的伺服器仍在正常運行，你應該可以看到 logo 幾乎即時地從渲染頁面裡移除。接下來，我們再把 <code>HelloWorld</code> 從模板裡移除。</p> -<p>First of all delete this line:</p> +<p>首先刪除以下這行：</p> <pre class="brush: html"><HelloWorld msg="Welcome to Your Vue.js App"/></pre> -<p>If you save your <code>App.vue</code> file now, the rendered app will throw an error because we’ve registered the component but are not using it. We also need to remove the lines from inside the <code><script></code> element that import and register the component:</p> +<p>這時如果你儲存 <code>App.vue</code> 檔案，渲染的應用程式會拋出一個錯誤，因為我們註冊了元件但是沒有使用它。所以我們必須移除在 <code><script></code> 元素裡面用來匯入及註冊元件的程式碼：</p> -<p>Delete these lines now:</p> +<p>現在刪除以下這幾行：</p> <pre class="brush: js">import HelloWorld from './components/HelloWorld.vue'</pre> @@ -224,9 +224,9 @@ export default { HelloWorld }</pre> -<p>Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside <code><template></code>.</p> +<p>渲染好的應用程式應該不再顯示錯誤了，只有一個空白的頁面，因為目前在 <code><template></code> 沒有可見的內容。</p> -<p>Let’s add a new <code><h1></code> inside <code><div id="app"></code>. Since we’re going to be creating a todo list app below, let's set our header text to "To-Do List". Add it like so:</p> +<p>我們接下來要製作一個待辦清單應用程式，在 <code><div id="app"></code> 裡面加一個新的 <code><h1></code> ，並將標題文字設定為「 To-Do List 」。參考如下：</p> <pre class="brush: html"><template> <div id="app"> @@ -234,77 +234,77 @@ export default { </div> </template></pre> -<p><code>App.vue</code> will now show our heading, as you'd expect.</p> +<p><code>App.vue</code> 將會如預期地展示標題。</p> <h2 id="Summary">總結</h2> -<p>Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes.</p> +<p>讓我們現在暫時告一個段落。我們學習了 Vue 背後的一些想法，創建應用架構並使我們的範例應用可以在其運行，檢查它，並且對它做一些初步的改變。</p> -<p>With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos.</p> +<p>在進行基本介紹之前，我們將進一步建構我們的範例應用，一個基本的待辦應用程式，它讓我們儲存待辦事項，在已完成的事項上打勾，以及依事項完成/未完成狀態來過濾列表。</p> -<p>In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.</p> +<p>在下一篇文章中，我們將會建立第一個客製元件，研究一些重要的概念，像是透過 props 傳遞資料及儲存它的資料狀態。</p> <p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p> <h2 id="In_this_module">在本模組</h2> <ul> - <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">前端框架介紹</a></li> - <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">框架的主要功能</a></li> - <li>React - <ul> - <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">開始學 React</a></li> - <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">建立我們的 React 待辦清單</a></li> - <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">把 React app 元件化</a></li> - <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">響應性 React：事件與狀態</a></li> - <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">響應性 React：編輯、過濾、條件式過濾</a></li> - <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">React 無障礙</a></li> - <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React 的資源</a></li> - </ul> - </li> - <li>Ember - <ul> - <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">開始學 Ember</a></li> - <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app 架構與元件</a></li> - <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">響應性 Ember：事件、類別、狀態</a></li> - <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">響應性 Ember：Footer 功能、條件式渲染</a></li> - <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Ember 的路由</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember 的資源與除錯</a></li> - </ul> - </li> - <li>Vue - <ul> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">開始學 Vue</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">建立第一個 Vue 元件</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">渲染 Vue 元件的列表</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">寫一個 todo 表單：Vue 的事件、方法、model</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">透過 CSS 樣式化 Vue 元件</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">使用 Vue 的計算屬性 (compueted)</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue 的條件式渲染：編輯已存在的待辦</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">重點管理 Vue ref</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue 的資源</a></li> - </ul> - </li> - <li>Svelte - <ul> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">開始學 Svelte</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">建立我們的 Svelte 待辦清單</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">把 Svelte app 元件化</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">部署與下一步</a></li> - </ul> - </li> - <li>Angular + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">前端框架介紹</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">框架主要功能</a></li> + <li>React <ul> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">開始學 Angular</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">開始我們的 Angular 待辦清單</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">把我們的 Angular app 樣式話</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">建立一個項目組建</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">過濾我們的待辦項目</a></li> - <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Building Angular applications and further resources</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">React 入門</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">建立我們的 React 待辦清單</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">元件化我們的 React 應用程式</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React 互動性：事件與狀態</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React 互動性：編輯、過濾、條件式渲染</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">React 無障礙</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React 資源</a></li> </ul> - </li> -</ul> + </li> + <li>Ember + <ul> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Ember 入門</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember 應用程式結構及元件化</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember 互動性：事件、類別、狀態</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember 互動性： Footer 功能、條件式渲染</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Ember 路由</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember 資源及偵錯</a></li> + </ul> + </li> + <li>Vue + <ul> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Vue 入門</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">建立第一個 Vue 元件</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">渲染 Vue 清單</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">新增待辦表單： Vue 事件、方法、模型</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">透過 CSS 樣式化 Vue 元件</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">使用 Vue 計算屬性</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue 條件式渲染：編輯已存在的待辦表單</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">聚焦 Vue refs</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue 資源</a></li> + </ul> + </li> + <li>Svelte + <ul> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Svelte 入門</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">開始寫我們的 Svelte 待辦清單應用程式</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Svelte 中的動態行為：變數及屬性</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">元件化我們的 Svelte 應用程式</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">進階 Svelte ：反應性、生命週期、可存取性</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">和 Svelte stores 共舞</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">Svelte 中的 TypeScript</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">部署和下一步</a></li> + </ul> + </li> + <li>Angular + <ul> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Angular 入門</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">開始我們的 Angular 待辦清單應用程式</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">樣式化我們的 Angular 應用程式</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">Creating an item component 建立（待辦清單）項目元件</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">過濾我們的待辦項目</a></li> + <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">建置 Angular 應用程式及更多資源</a></li> + </ul> + </li> + </ul> |