---
tags : 六角課程-快速掌握 Vue3.js
---
# 六角-一天時間 快速掌握 Vue3.js
## ==Js基本概念==
* [this運用](/deD84xTpQaq6BzLBQzl1sw)
* [為何要用到 this](/Shjz8mk_R2KNIOE2YLlZpw)
### ==匯入模式 import and export default==
* 基礎常見的匯出形式（自己在撰寫模組時最常用）
```javascript=
import app from './app_module.js';
```
* 載入模組時記得 加入 **type="module"**
```javascript=
<script type="module">
```
### ==起手式架構==
* data : 關注點分離，先定義資料
* methods : 方法 (一定是物件)
* created : 生命週期
* data 資料本身就是個函式、所以要加入return
```javascript=
<script type="module">
import { createApp } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.11/vue.esm-browser.js';
// 標準起手式
// 關注點分離，先定義資料
const app = createApp({
data() {
return {
name: '小明'
}
},
// 方法列表
methods: {
},
// 生命週期
created() {
}
});
// 不同定義上的概念解說
app.mount('#app')
</script>
```
### ==基礎概念及指令介紹==
* 我們用指令的一些運用時機時 以這張表作為參考
* :bind 綁定data model裡面的資料常用到
```htmlembedded=
<img :src="綁定資料的 image" alt="">
```
### ==Options API==
* 在vue 的 生命週期 有兩大重點
* ==created== 資料以建構、但DOM尚未完成。
* ==mounted== 資料以建構、DOM也已完成。
* 以下面兩個生命週期為例、各取得同一個DOM元素的話，
```javascript=
// 生命週期
created() {
console.log('created:', document.querySelector('#live'));
},
mounted() {
console.log('mounted:', document.querySelector('#live'));
},
```
> 只會先出現 mounted 的資料
### ==computed 運算==
* computed 可以監聽 ==data==裡面的數值
> 例如data中我們有個數值 為 num:0
```javascript=
data() {
return {
num: 0
}
},
```
> computed 中我們加入一個函式去做監聽，每當num 有變化時 我們就乘以 2
```javascript=
computed: {
num2() {
return this.num * 2
}
}
```
* 在HTML 中 顯示兩個設定
```htmlembedded=
<input type="number" v-model.number="num">
<div class="h5">原始值:{{ num }}</div>
<div class="h5">監聽後:{{ num2 }}</div>
```
> 當監聽後 原始值更動 監聽就會改變
### ==watch 監聽==
* 可以處裡比較複雜的函式、可以讀取及寫入data資料
```javascript=
watch: {
num() {
console.log('watch');
this.getThis();
}
},
```
### ==元件運用及資料傳遞==
* 元件起手式寫法 (全域註冊)
* template 與 data 必寫
> 定義元件起手式 寫法
```javascript=
// 全域註冊
const CardComponent = {
template: `<div class="card">
<div class="card-body">
{{ title }}
</div>
</div>`,
data() {
return {
title: '全域元件'
}
}
}
```
### ==全域註冊==
* 定義全域註冊 : 必須在 createApp 的後方
```javascript=
const app = createApp({
});
// 定義全域註冊 : 必須在 createApp 的後方
app.component('card',CardComponent);
```
* component 定義方式
* 第一個為自取名稱、第二個是定義元件宣告變數
```javascript=
app.component('card',CardComponent);
```
* 元件上一律小駝峰命名 cardComponent
* 也因為HTML標籤無法大小寫命名 所以元件標籤會分開寫類似
```htmlembedded=
<card-component></card-component>
```
### ==區域註冊==
* 在區域註冊中使用 components 可定義許多元件
```javascript=
const app = createApp({
components: {
card,
CardComponent2: {
template: `<div class="card">
<div class="card-body">
{{ title }}
</div>
</div>`,
data() {
return {
title: '區域元件'
}
}
},
CardComponent3: {
template: `<div class="card">
<div class="card-body">
{{ title }}
<card-component></card-component>
</div>
</div>`,
data() {
return {
title: '區域元件 3'
}
}
}
}
});
```
### ==props 與 emit 資料傳遞==
* 在資料傳遞之間內外層用到的 props (值) 與 emit(事件)
* props (值) - 由外層傳到內層
* emit (事件) - 由內層傳到外層
### ==props (傳值)==
* 以順序來說 先在內層定義 ==props== (接收值的方式)
* 內層要接受的值 ，值可以自己定義
> 內層元件 定義 props 接收的變數 及顯示 {{outer}}
```javascript=
//內層元件
const cardComponent = {
template: `<div class="card">
<div class="card-body">
{{ title }} {{outer}}
</div>
</div>`,
data() {
return {
title: '全域元件'
}
},
//內層要接受的值 變數可以自己定義
props: ['outer']
}
```
> 外層元件 傳值進去 預計將 data中的 title 傳遞進去 內層
```javascript=
//外層元件
const app = createApp({
data() {
return {
title: '外層元件'
}
},
components: {
cardComponent
}
});
```
> 顯示綁定 ==前內後外 心法== outer是內層定義的變數、title是外層傳進去的值
```htmlembedded=
<card-component
:outer="title">
</card-component>
```
### ==emit (事件觸發)==
* 由內層元件而外傳遞外層元件
* 需在內層元件加上一個 methods:
* 觸發事件需加上$emit、(第一個自訂的名稱,第二個向外傳出的值)
```javascript=
const cardComponent = {
template: `<div class="card">
<div class="card-body">
{{ title }} , {{outer}}
</div>
// 觸發事件
<button type="button"
@click="pushData">emit
</button>
</div>`,
data() {
return {
title: '全域元件'
}
},
//需在內層元件加上一個 methods:
methods: {
pushData() {
//(第一個自訂的名稱,第二個向外傳出的值)
this.$emit('push-data',this.title)
}
},
props: ['outer']
}
```
* 外層元件 也需要定義一個methods方法
* 並在標籤元件上定義一個觸發器
* 觸發器 是前內後外命名
```javascript=
// 外層元件
const app = createApp({
data() {
return {
title: '外層元件'
}
},
components: {
cardComponent
},
//外層元件 也需要定義一個methods方法接收
methods: {
getData(item) {
console.log(item);
}
},
});
```
> 並在標籤元件上定義一個 觸發器 使用 "@"
```htmlembedded=
<card-component
:outer="title"
<!-- @觸發器 是前內後外命名
內層emit的命名="外層函式方法"
-->
@push-data='getData'>
</card-component>
```
### ==ref 取得動元素==
* ref類似在抓取Dom元素的節點上
* 需要在Dom元件產生生命週期時，用 mounted 才能開始用 ref 取得Dom元素
* ref後面為自訂名稱 ref="自訂名稱"
* 在mounted使用 vue的 refs + 自訂名稱 取得動元素
> ref 後面為自訂名稱 ref="自訂名稱"
```htmlembedded=
<button ref="buttons" type="button">點我</button>
```
> 在mounted使用 vue的 refs + 自訂名稱 取得動元素
```javascript=
mounted() {
console.log(this.$refs.buttons);
},
```
> ref的概念
### ==Proxy 與 Composition API==
### Proxy 重點：
* Proxy 是由 物件、Handler 組成
* 透過 Handler 的 get, set 監聽，可以做到雙向綁定的特性
* Proxy 傳入必定是物件
* 預設只有一層
### ==ref , reactive 選擇要點==
* reactive 一定要是物件
* reactive 不可重新被賦值
* 怕錯，就都用 ref (只需要在後面加上 value加以運用) 例: obj2.value
Google Drive
Gist
Clipboard
Sign in with Wallet
