# `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>
```
Sign in with Wallet
Connect another wallet