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

# 第三週共筆文件


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


<!-- 开发环境版本，包含了有帮助的命令行警告 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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


---
- Vue必須先定義資料結構，否則無法雙向綁定(若有成功綁定會看到get、set方法) 如下圖示
- this.$set(目標, 屬性, 值) // 強制加入雙向綁定

---

## this.data.text 與 this.text是一樣的
- 資料放在 data 裡面，方便管理
- vue 在傳入參數的時候，會自動把參數的資料做展開，資料會跑到第一層，資料最終會回到最上層，所以this.data.text 與 this.text是一樣的

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

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

## 預先定義資料
- 沒有先定義資料
- 按下按鈕後，畫面沒有更新, 資料無法雙向綁定
- 使用 `console.log(app);` 查看

## 無法先定義資料的時候
### ㊙強制加入雙向綁定

methods: {
  updateItem() {
    // 強制加入雙向綁定
    // this.$set(目標, 屬性, 值);
    this.$set(this.item, "text", "我是漂亮阿姨");
  },
},


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

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


## 動態屬性 `v-bind:` 或是 `:`
- 💡 `v-bind:` 或是 `:` 可以帶入 javascript 的表達式，或是其它的值
- 如何帶上 data-id
- 加入圖片連結 `:src=''`

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


## 指令概觀

---
## 參考路徑

// 只要看到{} [] 都産生一個新的参考路徑
// 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);  // {}


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