---
# System prepended metadata

title: '`Vue.js` 從 3.0 開始'
tags: [Vue3, note, Vue.js]

---

# `Vue.js` 從 3.0 開始

###### tags: `Vue.js`, `Vue3`, `note`

---

## 【如何開始】

### 【開發者工具】

- Firefox
	> - https://addons.mozilla.org/en-GB/firefox/addon/vue-js-devtools/

- Chrome 系統
	> - https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd



---

### 0_【安裝方式】

A. **`<script>`**
- 【只需要載入 `Vue.js` 的核心 `CDN`】 
    - `#輕前端`
    - ==**`#新手入門`**==
    - **`#新舊專案、技術轉換的過渡期`**


A-1. 【直接載入 `CDN`】


A-2. 【運用 `ESModule` 模組觀念】


-- 

B. `npm`、`yarn`
- `#預備知識`：`terminal`、`套件管理工具`、`安裝編譯機制`、`Node`、`webpack` 
	
C. 官方鷹架 `Vue-CLI` 
- `#進階使用`
- `#建構專案`

---

## 【架構流程】

- Vue 的初始化方式有很多種
    - 但是架構都是運用類似的觀念


---

### 【版本】_A-1_直接載入

#### 【Step-0】_載入-`CDN` 


- 【地點】：`<body>` 裡面置底

```javascript=
<script src="https://unpkg.com/vue@next">
    /**
     **Step-0: import Vue 3.0
     */
</script>
```


---

#### 【Step-1】_定義基礎物件-`app`

- 【參數格式】：`{ Options Object }`
    - 必須使用 `function return` 
	- 用來回傳另外存放的 `Object` 資料內容

```javascript=
/** 
 **Step-1:
 * data item -> { Options Object }
 * { Options Object } -> function returns another Obj
 */
const app = {
    data() {
        return {
            // updated data value //
            message: 'Hi, Vue, view!'
        }
    }
}
```


---

#### 【Step-2】_建立-`Vue`-的實體物件-`createApp({})`

- 【參數格式】：`{ Options Object }`

```javascript=
/** 
 **Step-2:
 * Creating a Vue App with-{ Options Object }
 * const app = Vue.createApp({})
 *          
 */

Vue.createApp(app)
```


---

#### 【Step-3】_掛載到-`HTML`-上面-`.mount()`

- 【參數格式】：`.mount('DOM selector')`

```javascript=
/** 
 * 
 **Step-3:
 * Mount App into ('DOM selector')
 */

Vue.createApp(app).mount('#app')
```


> - 【術語】：掛載
>   - ~~J3 小~~

> - 【Linux】掛載硬碟
>    - 將檔案系統連結到目錄樹結合的動作


  
> - 【原文說明】：`.mount()`
>    Which is a method that requires a DOM selector as an argument. 
>    This lets us **plug the Vue app** into that piece of our DOM.
>    

>
> - 【重新認識-`Vue.js`】
>   - 將 `Vue` 實體物件與網頁的 `HTML` 結合
> 


>
> - 【單字】：`mount`
>   to fix something to a wall, in a frame, etc., 
>   so that it can be looked at or used
>   


---

#### 【Step-4】_顯示資料-大括號模板

- 【語法格式】：`{{ }}`
- 【內容物】： 對應到 Vue 實體物件的狀態資料
	- 框架系統會自動更新內容

```HTML=
<!-- *Step-4: Displaying the Data -->
<section id="app">
    <h1>Hello!</h1>    
    <!-- Vue will reactively receive any updates -->
    <div>{{ message }}</div>
</section>
```



---

### 【版本-A-1-1】

```HTML=
<html lang="en">

<head>
    ...
</head>

<body>
    <section id="app">
        <h1>Hello!</h1>
        <!-- *Step-4: Displaying the Data -->
        <!-- Vue will reactively receive any updates -->
        <div>{{ message }}</div>
    </section>


    <script src="https://unpkg.com/vue@next"></script>

    <script>
        /** 
         **Step-1
         */
        const app = {
            data() {
                return {
                    // updated data value //
                    message: 'Hi, Vue, view!'
                }
            }
        }

        /** 
         **Step-2         
         **Step-3
         */
        Vue.createApp(app).mount('#app')

    </script>

</body>

</html>
```


---

### 【版本-A2】

```HTML=
<body>
    <section id="app">
        <h1>Hello!</h1>
        <!-- will reactively receive any updates -->
        <div>{{ message }}</div>
    </section>



    <script src="https://unpkg.com/vue@next"></script>

    <script>
        /**
         **Step-1
         **Step-2
         */
        const app = Vue.createApp({
            data() {
                return {
                    message: 'Hi, Vue, view!'
                }
            }
        })

        /**
         **Step-3:
         */
        app.mount('#app')

    </script>

</body>
```


---

### 【版本-A3】

```HTML=
<body>
    <section id="app">
        <h1>Hello!</h1>
        <!-- will reactively receive any updates -->
        <div>{{ message }}</div>
    </section>



    <script src="https://unpkg.com/vue@next"></script>

    <script>
        /** 
         **Step-1
         **Step-2
         */
        const app = Vue.createApp({
            data() {
                return {
                    message: 'Hi, Vue, view!'
                }
            }
        })

        /**
         **Step-3
         */
        const mountedApp = app.mount('#app')

    </script>

</body>
```

---

### 【版本-A4】

```HTML=
<body>
    <section id="app">
        <h1>Hello!</h1>
        <!-- will reactively receive any updates -->
        <div>{{ message }}</div>
    </section>



    <script src="https://unpkg.com/vue@next"></script>

    <script>
        /**
         **LIVE-QA: setup()
         * 之後會附上教學
         * 但是本堂課暫時先不帶這塊
         * 因為偏難         
         */
        const { createApp, ref } = Vue;

        const app = {
            setup() {
                const message = ref('Vue 3.0 with Composition API Style!');

                return {
                    message
                }
            }
        }

        Vue.createApp(app).mount('#app')

    </script>

</body>
```
