Vue.js 入門

關注點分離

資料是一個獨立區塊，不會混用於渲染、生命週期及事件觸發。

圖片說明：畫面進入時先觸發生命週期，生命週期再觸發渲染，取得資料內容渲染在畫面上。

圖片說明：點擊按鈕觸發事件更動資料內容，更動內容觸發後再重新渲染，取得更新後的文字渲染到畫面上。

MVVM 概念 （Model View ViewModel）

原有的關注點分離是透過一個方法將資料渲染到畫面上，而 Vue 透過 MVVM 概念來處理關注點分離。

圖片說明：MVVM 由 View 畫面、ViewModel 資料繫結器、Model 資料狀態三部分來組成，當 Model 有任何資料的改變，ViewModel 會自動把資料綁定，渲染到 View畫面上。View 與 Model 使用 viewModel 達到雙向綁定。

雙向綁定

Model → View：透過數據綁定，將資料狀態傳遞的數據轉化成所看到的頁面。
View → Model：透過 DOM 監聽事件，將所看到的頁面轉化成資料狀態。

這邊的關注點分離就是將處理 View （畫面）及處理 Model（資料）的部分分離，再透過 ViewModel 的機制讓兩邊的狀態同步，也就是下圖 v-model 指令，使用 v-model 將畫面及資料產生雙向綁定。

Vue.js 起手式

建議安裝 Chrome 開發者工具 Vue.js devtools，可以在瀏覽器開發人員工具上查看元件、資料狀態。

步驟拆解

<div id="app"> <!--step1.定義一個區塊，大部分會使用 id 來命名 -->
  {{counter}} <!--step5.使用{{}}將資料顯示於畫面上-->
  {{text}}
</div>
<script> //step2.插入一個 script 緊鄰 step1 區塊
Vue.createApp({ //step3.建立元件內容
  data(){
    return {
      counter:6,
      text:"這是一段話"
    }
  }
}).mount("#app") //step4.使用mount指定元件要掛載到哪一個區塊
</script>

結構說明

<div id="app">
{{counter}}
<button class="btn btn-primary" type="button" v-on:click="clickMe">按鈕</button><!-- 使用 v-on 來觸發 methods 中的方法 -->
</div>
<script>
  const app={
    //資料（函式）
    data() {
      return {
        counter:0
      }
    },
    //生命週期（函式）:元件生成必經過程，有些資料在進入元件之後才進行調整的話，就可以在生命週期裡進行調整 ex.從遠端取得資料
    created() {
      console.log(this);//Proxy
      this.counter=10;
    },
    //方法（物件）
    methods: {
      clickMe(){
        this.counter+=1;
      }
    },
  }
  Vue.createApp(app).mount("#app");
</script>

Proxy 機制

Proxy 機制會攔截目前所有的值，當有任何變化時就進行攔截，並且給予相對應的反應。在 Proxy 的 target 中可以看到自定義的值及 Vue 所定義的方法，因此所定義的值會自動展開在 target 物件下，所以使用 this 就可以取用到 Proxy 內的所有值。

相關 Codepen

起手是常見結構
將資料加入於 Vue Data
完成新增、編輯商品項目

---

學習來源：

六角學院–Vue 3 實戰影音課程
Vue.js
Vue.js 從零開始：MVVM、漸進式框架