vue學習-02-定義選項物件
阿新 • • 發佈：2021-09-08
vue學習-02-定義選項物件
框架理解
所有的前端框架基本都是為了簡化：模板渲染，事件繫結和使用者互動問題。
Vue參考了MVVM模型，即：檢視View-檢視模型ViewModel-模型Model
new Vue()時，括號內傳遞的是一個選項物件options
這個選項物件包含：資料、模板、掛載元素、方法、生命週期鉤子等
Vue例項物件被建立時，options物件屬性會被新增到Vue的響應式系統裡
響應式系統就是可以通過修改屬性值，讓檢視執行更新渲染
資料物件
使用data屬性實現，值以一個物件的形式存在
方法的執行
需要通過methods屬性定義，使用指令執行
生命週期
當我們建立Vue例項時，框架會執行一系列操作，如：監聽、編譯、掛載等 過程中會執行一些生命週期鉤子的函式，在某個階段觸發
生命週期流程圖
程式碼測試
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定義選項物件</title> </head> <body> <div id="app"> {{message}} <button v-on:click="alert">點選</button> </div> <script src="../js/vue.js"></script> <script> //去掉警告 Vue.config.productionTip = false; //資料物件 const dataObj = { message: 'hello,vue' }; //資料凍結 // Object.freeze(dataObj); //例項物件 const app = new Vue({ el: '#app', data: dataObj, //方法 methods: { alert: function () { alert("點選"); } }, created: function () { console.log('初始化:' + this.message); }, updated: function () { console.log('修改後:' + this.message); } }); </script> </body> </html>
測試結果