---
# System prepended metadata

title: 第三週共筆文件
tags: [Vue 實戰班]

---

---
tags: Vue 實戰班
---

# 第三週共筆文件

![](https://i.imgur.com/UL7kqH8.png)


如果CDN 用min版本 會沒有devTools的功能 

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
```HTML=
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```

參考 : https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5

![](https://i.imgur.com/2BgIbHv.png)

---
- Vue必須先定義資料結構，否則無法雙向綁定(若有成功綁定會看到get、set方法) 如下圖示
- this.$set(目標, 屬性, 值) // 強制加入雙向綁定
![](https://i.imgur.com/otBYTmH.png =500x)
![](https://i.imgur.com/bMTdTS7.png)
 
---

## this.data.text 與 this.text是一樣的
- 資料放在 data 裡面，方便管理
![](https://i.imgur.com/0nlmP4N.png)
- vue 在傳入參數的時候，會自動把參數的資料做展開，資料會跑到第一層，資料最終會回到最上層，所以this.data.text 與 this.text是一樣的
![](https://i.imgur.com/REPlTJG.png)

---
## 綁定元素
- 綁定元素可以綁定 2 個以上，但實作時最外層只會綁定一個
- 內層用 元件 實作

---
## 無論如何，先把資料建立起來

## 預先定義資料
- 沒有先定義資料
![](https://i.imgur.com/QK2Q8Vr.png)
- 按下按鈕後，畫面沒有更新, 資料無法雙向綁定
![](https://i.imgur.com/OwTpbUJ.png)
- 使用 `console.log(app);` 查看
![](https://i.imgur.com/AWS2aHT.png)



## 無法先定義資料的時候
### ㊙強制加入雙向綁定
```javascript=
methods: {
  updateItem() {
    // 強制加入雙向綁定
    // this.$set(目標, 屬性, 值);
    this.$set(this.item, "text", "我是漂亮阿姨");
  },
},
```
![](https://i.imgur.com/2vxtIa4.png)

陣列中的 obj 也可以這樣做雙向綁定。

## 陣列取值 v-for
- 💡 v-for 就帶 key，請帶入不同值（v-for 相當於 forEach）
- 常見作法： key 帶入 id，或是隨機文字
    - :no_entry_sign: 盡量避免使用 `:key="key"` 。也就是盡量不要用 index 作為 key 值 因為如果資料被打亂的話(例如篩選資料後) 順序也會跟著改變

![](https://i.imgur.com/88gUtqS.png)

## 動態屬性 `v-bind:` 或是 `:` 
- 💡 `v-bind:` 或是 `:` 可以帶入 javascript 的表達式，或是其它的值
- 如何帶上 data-id
![](https://i.imgur.com/fq0hqf3.png)
![](https://i.imgur.com/6sS60gh.png)
- 加入圖片連結 `:src=''`
![](https://i.imgur.com/pVAoo4c.png)
![](https://i.imgur.com/YnIdVzc.png)

## 觸發事件 `v-on:click` 、 `@click`
button 只要不是用來做表單送出 最好用 `type="button"`
第一行的綁定相當於 `btn.addEventListener('click', function);`

![](https://i.imgur.com/hsa2ptn.png)

## 指令概觀
![](https://i.imgur.com/oVJhBlI.png)

---
## 參考路徑
```javascript=
// 只要看到{} [] 都産生一個新的参考路徑
// function, {}, [] 都是傳参考
var person = {
	name: '小明',
	obj: {}
}
var person2 = person;
person2.name = "小美";
console.log(person.name);  // 小美
console.log(person === person2); //true

// 只要看到{}, []都産生一個新的参考路徑
// function, {}, [] 都是傳参考
var person2 = person;
person2 = {};      
person2.name = '小美';
console.log(person.name);  //小明
console.log(person === person2); //false

// 浅拷貝
var person2 = Object.assign({}, person);
console.log(person === person2); // false
person2.obj.name = '深層';
console.log(person.obj);  // {name: "深層"}

// 深層
var person2 = JSON.parse(JSON.stringify(person));
console.log(person === person2); //false
person2.obj.name = '深層';
console.log(person.obj);  // {}
```
![](https://i.imgur.com/8ljq399.png)

```javascript=
var person2 = Object.assign({}, person);
JSON.parse(JSON.stringify(person));
```

