學習要點：1.框架理解????2.options????3.生命周期

本節課我們來開始學習 Vue 聲明對象，并且理解傳遞選項對象的方法。

一．框架理解

1. 所有的前端框架基本都是為了簡化：模版渲染、事件綁定和用戶交互問題；

2. Vue 參考了 MVVM 模型，即：視圖(View)-視圖模型(ViewModel)-模型(Model)；

3. 當我們 new Vue()創建一個實例時，括號內傳遞的是一個選項對象(options)；

4. 這個選項對象一般包含：數據、模版、掛載元素、方法、生命周期鉤子等等；

5. 當 Vue 實例被創建時，options 對象屬性都會被添加到 Vue 的響應式系統中；

6. 所謂響應式系統，就是可以通過修改這些屬性的值，讓視圖執行更新渲染；

7. 我們可以通過火狐或谷歌 F12 控制器來修改 Vue 對象數據值，也可以使用 Vue 調試；

8. 當然，我們也可以將數據對象設置為保護不得修改，具體代碼如下：

//數據對象const dataObj = { message : 'Hello, Vue!' };//數據凍結Object.freeze(dataObj);//創建一個 Vue 實例const app = new Vue({ el : '#app', data : dataObj });

二．options

1. 在 options 對象中，最為常用的就是模版、數據、方法以及掛載元素；

2. 首先，模版是視圖中{{var}}這樣的存在，它通過 el 屬性掛載綁定指定元素；

//el 固定屬性，掛載指定元素 el : '#app', <div id="app"> {{message}} div>

3. 數據定義，使用 data 屬性實現，它的值是也是一個以對象形式的存在；

//data 固定屬性，定義數據 //數據中的屬性名和模板變量名一致 data : { message : 'Hello, Vue!' }

4. 方法的執行，需要通過 methods 屬性來定義方法，并使用指令執行；

//methods?固定屬性，執行方法?methods : { alert : function () { alert('點擊'); }}<div id="app"> <button v-on:click="alert">點擊button>div>

三．生命周期

1. 當我們創建 Vue 實例時，框架會執行一系列操作，比如監聽、編譯、掛載等；

2. 而這個過程也會執行一些生命周期鉤子的函數，用于某個階段進行觸發；

//created 固定方法，生命周期鉤子//這個方法在初始化后自動執行created : function () { console.log('初始化后：' + this.message);},//當修改并更新渲染后執行的鉤子 updated : function () { console.log('修改后：' + this.message);}

3. 那！整個生命周期的執行順序是如何的？有沒有流程圖啊？有的，太大，官網見！

https://cn.vuejs.org/v2/guide/instance.html#生命周期圖示

如果您覺得有用，記得在下方點贊、關注、留言，小編會定期奉上更多的驚喜哦，您的打賞支持才是小編繼續努力的動力，么么噠。

每日分享在學習過程中總結的學習經驗，學習筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學習為目的，每天閱讀一篇文章，了解身邊的技術，陪有夢想的人一起成長！

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的data的值 如何初始化vue_vue 创建一个基础实例【02】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。