---
# System prepended metadata

title: 0505 Vue
tags: [JavaScript, framework]

---

# 0505 Vue
###### tags: `framework` `JavaScript`

* Vue3 不支援 IE
* Vite 功用跟 webpack很像
## 練習 1

- 建立 vue 元件
- 掛載作用對象
```javascript=
const vm = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}).mount('#demo'); // 掛載在 id=demo 節點上
```
- 用 {{ }} 包覆 vue 元件

```htmlembedded=
<div id="demo">
  <h1>{{ message }}</h1>
  <h1>{{ message }}</h1>
  <h1>{{ message }}</h1>    <!-- 只要裡面是 message 都會連動 -->
  <input v-model="message">   <!-- v-model 跟表單元素連動/綁定 -->
</div>
```
- 在 {{ }} 內可以做運算，也可在前後另外加東西
```htmlembedded=
<div id="demo">
  <input v-model="price">
  <p>${{ price }}</p>
  <p>${{ price * 0.8 }}</p>
</div>
```
```javascript=
Vue.createApp({
  data() {
    return {
      price: ''
    }
  }
}).mount('#demo');
```
- 因為是 html 所以在 {{ }} 中不能做邏輯判斷
  - 將判斷寫成函式放進 js 檔的 vue 元件中

```htmlembedded=
<div id="demo">
  <input v-model="price">
  <p>${{ price }}</p>
  <p>滿千折百${{ calPrice(price) }}</p>
</div>
```
```javascript=
Vue.createApp({
  data() {
    return {
      price: ''
    }
  },
  //有 s ↓
  methods: {
    calPrice(price){
      if(price >= 1000){
        return price - 100
      }
    }
  }
}).mount('#demo');
```
- 使用 vue 3 專有寫法
  - 用解構賦值把資料抓出來
  - 直接設定 ref 跟 createApp
    - ref 函式會回傳一個被監視的 Proxy object (JS 原生)
```javascript=
const { ref, createApp } = Vue

createApp({
  setup() {  // 整個程式啟動的起點
    const price = ref(100)
    const calPrice = price => price >= 1000 ? price - 100 : price
  }
  
  return {
    price, calPrice
  }
})
```


## 連結
* [官網](https://vuejs.org/v2/guide/)
* [vue-devtools](https://github.com/vuejs/vue-devtools#vue-devtools)
* [教材](https://paper.dropbox.com/doc/Vue-for-astroCamp-2021-05-2Rkjp8OOLFwn1SND0hYcR)
* [重新認識 Vue.js](https://book.vue.tw/) 只開放到今晚20:00

## 修飾子
- v-model.number
- v-model.lazy

## 指令 directive
- 前面有加 `v-` 的東西，後面通常會加 `.` 開頭的修飾子來增強指令效果


```javascript=

```
## computed
把計算完的結果存在記憶體內作快取
會比直接寫計算函式做呼叫好
但無法帶參數
函式：呼叫幾次就做幾次
computed：改變時做一次，再帶入
[1-3 教材](https://book.vue.tw/CH1/1-3-computed-and-methods.html)

## v-bind
`v-bind:value = "n"`簡寫 `:value = "n"`
對屬性
## v-on 原生事件的觸發
`v-on:click` 簡寫 `@click`

拿唯一值當作 key
`:key`

拆 component 時，如果 function 裡用的變數跟父層有關，就會把 function 留在父層

## 題外話
### 面試題
- DOMContentLoaded
[DOMContentLoaded與window.onload](https://ithelp.ithome.com.tw/articles/10197335)