基礎概念

• 軟體架構MVVM

  • View和ViewModel之間為雙向綁定

  • 優點在當架構複雜時，若用jQuery的操作DOM，會難維護。

    若用此架構的前端framework，則是直接將指令放入DOM中，

    直接藉由控制資料，來改變view的呈現。

  • 也就是不論修改來源資料或修改已宣染的資料，另一方都會同步更新。

• CDN

  簡單的應用可使用CDN

//自動辨別最新穩定版本
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

• 生命週期

• crated：初始化處理資料。

• mounted：el掛載到實例後呼叫，一般是業務邏輯的開始。

• beforeDestory：實例銷毀之前呼叫。主要用在解綁監聽的事件。

• 傳值

  • 後端是使用GET,POST傳值，用session或cookie暫存

  • 前端的JQUERY可直接將暫存的值，隱藏在HTML中

  • 前端的Vue.js是用props和$emit傳值。:bind可當成暫存的變數。bus當成session。

• Render函數：用javascript建立Virtual Dom的一種基礎寫法。因不夠直觀，且巢狀寫法難閱讀。若是React.js會建議用JSX改寫。若是Vue.js多使用單檔的.vue檔案內的template撰寫。

  在Vue.js要使用JSX，要在webpack中，引入外掛babel-plugin-transform-vue-jsx，編譯後才可以使用。

• 元件執行模式：一個元件可以分為資料(model)和視圖(view)，資料更新時，視圖也會自動更新。在視圖中又可以綁定一些事件，它們觸發methods裡指定的方法，進一步可以改變資料、更新視圖。