JS作品實戰-Week3-主線任務

使用 Vue.js 實作一頁產品管理頁面(學習筆記-1)

3 min readJul 9, 2020

學習目標

練習 Vue.js 的各項語法及指令，完成一頁式的產品新增、刪除、修改的頁面。

Vue 藍圖

HTML<div id=”app”> {{ message }} </div>--------------------------------------------------------------------JavaScriptvar app = new Vue({ 
  el: ‘#app’, 
  data: { 
    message: ‘Hello Vue!’ 
  },
  methods: { 
    functionName(){}
  } 
})

el：Vue.js 作用域的範圍。
data：用來裝資料的物件。
methods：用來裝所有方法（function）的物件

雙向綁定

當資料沒有正確套用時，將無法正確觸發雙向綁定。常見有兩個條件會發生此情況：

資料沒有預先定義。
傳入的物件參考與原始不符合。（所以若使用物件拷貝，參考路徑改變時，會導致無法雙向綁定）
若有成功綁定會看到 get、set 方法，如下圖示：

強制加入雙向綁定 $set

使用深拷貝會產生新的參考路徑，導致「傳入的物件參考與原始不符合」。所以此時需要使用 $set 強制加入雙向綁定，重新觸發 getter。

this.$set(target, key, value);
       // 目標, 欄位(物件屬性、陣列索引), 值

Vue 基本指令

可概括為三大部份：

寫入資料到 data（v-model）
渲染畫面到 HTML 上（{{ … }}、v-for、v-if、v-show、v-bind）
事件綁定（v-on）

物件拷貝

因為物件的傳參考特性（function, {}, [] 都是傳参考），所以在複製時，必須經由物件拷貝，才會使之與原來的物件沒有關聯性。

淺拷貝

將物件裡全部的屬性到過去新的變數。不過只能複製第一層物件的屬性，無法複製屬性質的物件，所以稱為淺拷貝。

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

深拷貝

經由轉換字串再轉換物件的方法，建立全新的物件，全新的參考路徑，屬性質的物件，或更深層的物件都能正確的複製出來。

JSON.parse(JSON.stringify(person));