From 4580f65aa07b7b558b8fc769b1d13facb5c503cc Mon Sep 17 00:00:00 2001 From: neil_tsai Date: Tue, 17 Aug 2021 16:45:27 +0800 Subject: 初翻 svelte_todo_list_beginning "Building our first component" 區段 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../svelte_todo_list_beginning/index.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html index d4645f7dca..508a6a2590 100644 --- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html +++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html @@ -85,30 +85,30 @@ tags:
  • 刪除全部已完成任務。
    • -

    Building our first component

    +

    建立我們第一個元件

    -

    Let's create a Todos.svelte component — this will contain our list of todos.

    +

    建立Todos.svelte元件——這將包含我們的待辦任務。

    1. -

      Create a new folder — src/components.

      +

      建立新資料夾——src/components。

      -

      Note: you can put your components anywhere inside the src folder, but the components folder is a recognized convention to follow, allowing you to find your components easily.

      +

      注意：你可以把元件們放在src資料夾當中的任何地方，但放在components資料夾是比較常見的做法，也讓你可以更容易地找到元件們。

    2. -

      Create a file named src/components/Todos.svelte with the following content:

      +

      建立src/components/Todos.svelte檔案並包含以下內容：

      <h1>Svelte To-Do list</h1>
    3. -

      Change the title element in public/index.html to contain the text Svelte To-do list:

      +

      改變public/index.html中的title元素內容為Svelte To-do list：

      <title>Svelte To-Do list</title>
    4. -

      Open src/App.svelte and replace its contents with the following:

      +

      打開src/App.svelte並替換為以下內容：

      <script>
   import Todos from './components/Todos.svelte'
@@ -117,7 +117,7 @@ tags:
 <Todos />
    5. -

      In development mode, Svelte will issue a warning in the browser console when specifying a prop that doesn't exist in the component; in this case we have a name prop being specified when we instantiate the App component inside src/main.js, which isn't used inside App. The console should currently give you a message along the lines of "<App> was created with unknown prop 'name'". To get rid of this, remove the name prop from src/main.js; it should now look like so:

      +

      在開發模式中，當定義屬性沒有存在於元件時，Svelte將會在瀏覽器主控台警示問題；以此例來看，當我們於src/main.js實例化App元件時，由於我們已經明確定義出name屬性，但並無實際在App中使用到。所以主控台現在應該會給你一個警示訊息，如「<App> was created with unknown prop 'name'」。而為了排除這個問題，從src/main.js中移除name屬性；看起來應該要像是如下這樣：

      import App from './App.svelte'
 
@@ -129,7 +129,7 @@ export default app
    -

    Now if you check your testing server URL you'll see our Todos.svelte component being rendered:

    +

    假如你現在檢查你的測試伺服器URL，應該會看到Todos.svelte元件已經被渲染出如下畫面：

    basic component rendering which a title that says 'Svelte to-do list'

    -- cgit v1.2.3-54-g00ecf