一：vue實例的生命週期鉤子
- 簡介
每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命週期鉤子的函數，這給了用戶在不同階段添加自己的代碼的機會。 - 相關函數代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <div id="root">{{content}}</div> <script> var app = new Vue({//創建一個vue的實例，裏面的都是一些配置項 el:'#root', data:{ content:'Hello world' }, beforeCreate:function() { console.log('beforeCreate函數......'); }, beforeMount:function() { //mounted函數時頁面標籤的內容基本還沒有渲染完成 console.log('====beforeMount=====begin'); console.log(this.$el); console.log('====beforeMount=====end'); }, created:function() { console.log('created函數......'); }, mounted:function(){ //mounted函數時頁面標籤的內容基本已經渲染完成時調用這個函數 console.log('========mounted函數========begin'); console.log(this.$el); console.log('========mounted函數========end'); }, beforeDestroy:function() { console.log('beforeDestroy函數......'); }, destroyed:function() { console.log('destroyed函數......'); }, beforeUpdate:function() { //當數據發生改變時，在標籤沒有被渲染之前觸發 console.log('beforeUpdate函數......'); }, updated:function() { //當數據發生改變時，在標籤被渲染後觸發 console.log('updated函數......'); }, }); </script> </body> </html>
二：vue的模板語法
- v-text標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <div id="root"> <!--v-text的效果相當與{{content}}--> <div v-text="content"></div> </div> <script> var app = new Vue({//創建一個vue的實例，裏面的都是一些配置項 el:'#root', data:{ content:'Hello world1' } }); </script> </body> </html> - v-html和v-text的區別
a：代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <div id="root"> <!--v-text的效果相當與{{content}}--> <div v-text="content"></div> <div v-html="content"></div> </div> <script> var app = new Vue({//創建一個vue的實例，裏面的都是一些配置項 el:'#root', data:{ content:'<h1>Hello world1</h1>' } }); </script> </body> </html>
b:效果，可以發現v-html會解析h1標籤，二v-text不會解析
![]()
- v-html和v-text以及花括號都支持js表達式
a：代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <div id="root"> <!--v-text的效果相當與{{content}}--> <div>{{content + ' Lee'}}</div> <div v-text="content + ' Lee'"></div> <div v-html="content + ' Lee'"></div> </div> <script> var app = new Vue({//創建一個vue的實例，裏面的都是一些配置項 el:'#root', data:{ content:'Hello world1' } }); </script> </body> </html>
b：效果
![]()
三：計算屬性，方法以及偵聽器
- 計算屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>計算屬性</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <div id="root"> {{fullName}} </div> <script> var app = new Vue({//創建一個vue的實例，裏面的都是一些配置項 el:'#root', data:{ firstName:'Hello', lastName:'Lee' }, computed: {//使用這個計算屬性,他有一個非常重要的屬性，是內置緩存的，當裏面的變量沒有發生變化時，這裏面的方法不會再次調用，當它裏面計算涉及到的變量發生變化，他是會調用的 fullName:function(){ return this.firstName+" "+this.lastName; } }, }); </script> </body> </html>![]()
- 使用方法實現上面的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>方法</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <!--直接調用方法--> <div id="root"> {{fullName()}} </div> <script> var app = new Vue({//創建一個vue的實例，裏面的都是一些配置項 el:'#root', data:{ firstName:'Hello', lastName:'Lee' }, methods: { fullName:function(){//方法 return this.firstName+"||"+this.lastName; } } }); </script> </body> </html>![]()
- 使用偵聽器方式實現上面效果
a：代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>偵聽器</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <!--直接調用方法--> <div id="root"> {{fullName}} </div> <script> var app = new Vue({//創建一個vue的實例，裏面的都是一些配置項 el:'#root', data:{ firstName:'Hello', lastName:'Lee', fullName:'Hello Lee' }, watch: {//偵聽firstName，lastName變化時觸發下面的方法 firstName:function(){ this.fullName = this.firstName+"||"+this.lastName; }, lastName:function(){ this.fullName = this.firstName+"||"+this.lastName; } } }); </script> </body> </html>
四：計算屬性的get和set方法
- 代碼實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>計算屬性的get和set</title> <!--引入vue.js文件--> <script src="./vue.js"></script> </head> <body> <!--直接調用方法--> <div id="root"> {{fullName}} </div> <script> var app = new Vue({//創建一個vue的實例，裏面的都是一些配置項 el:'#root', data:{ firstName:'Hello', lastName:'Lee' }, computed: { fullName:{ get:function(){ console.log('走起get.....'); return this.fullName = this.firstName+" "+this.lastName; }, set:function(value){//當數據發生變化的時候，會調用set方法 console.log('走起set.....:'+value); var arr = value.split(" "); this.firstName = arr[0]; this.lastName = arr[1]; } } } }); </script> </body> </html> - 效果
![]()
