1、$mount方法
$mount方法是用來掛載擴展的，先來複習一下擴展的寫法。
這裏做了hedong的擴展，而後用$mount的方法把hedong掛載到DOM上，生成了一個Vue的實例，直接看代碼。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Examples Method Demo</title> </head> <body> <h1>Examples Method Demo</h1> <hr> <div id="app"> {{message}} </div>
<script type="text/javascript"> var hedong = Vue.extend({ template:`<p>{{message}}</p>`, data:function(){ return { message:'Hello ,I am hedong' } } }) var vm = new hedong().$mount("#app") </script> </body> </html> |
2、$destroy() 卸載方法
用$destroy()進行卸載。
寫了一個button按鈕，點擊後卸載整個掛載。
html：
1 |
<p><button onclick="destroy()">卸載</button></p> |
javascript
1 2 3 |
function destroy(){ vm.$destroy(); } |
PS:$destroy()後邊必需要有括號，沒有括號是無用的。
3、$forceUpdate() 更新方法
1 |
vm.$forceUpdate() |
4、$nextTick() 數據修改方法
當Vue構造器裏的data值被修改完成後會調用這個方法，也至關於一個鉤子函數吧，和構造器裏的updated生命週期很像。
1 2 3 4 5 6 |
function tick(){ vm.message="update message info "; vm.$nextTick(function(){ console.log('message更新完後我被調用了'); }) } |
5、安裝Vue的控制檯調試工具。
每一個人的安裝方法不一樣。
第3節：實例事件
實例事件就是在構造器外部寫一個調用構造器內部的方法。這樣寫的好處是能夠經過這種寫法在構造器外部調用構造器內部的數據。
仍是寫一個點擊按鈕，持續加1的例子。
1、$on 在構造器外部添加事件。
1 2 3 4 |
app.$on('reduce',function(){ console.log('執行了reduce()'); this.num--; }); |
$on接收兩個參數，第一個參數是調用時的事件名稱，第二個參數是一個匿名方法。
若是按鈕在做用域外部，能夠利用$emit來執行。
1 2 3 4 |
//外部調用內部事件 function reduce(){ app.$emit('reduce'); } |
2、$once執行一次的事件
1 2 3 4 5 |
app.$once('reduceOnce',function(){ console.log('只執行一次的方法'); this.num--;
}); |
3、$off關閉事件
1 2 3 4 |
//關閉事件 function off(){ app.$off('reduce'); } |
第4節：內置組件 -slot講解
slot是標籤的內容擴展，也就是說用slot就能夠在自定義組件時傳遞給組件內容，組件接收內容並輸出。
先來定義一個<hedong></hedong>的組件，這個組件用來顯示博主的一些信息。
咱們在Vue 構造器裏的data中給出了信息，信息以下：（博客地址，網名，使用技能）
1 2 3 4 5 6 7 |
data:{ jspangData:{ bolgUrl:'http://hedong.com', netName:'技術-dong', skill:'Web前端' } }, |
咱們用<template></template>標籤的方式定義了組件：
1 2 3 4 5 6 7 8 |
<template id="tmp"> <div> <p>博客地址：</p> <p>網名：</p> <p>技術類型：</p>
</div> </template> |
如今就能夠用slot功能讓組件接收傳遞過來的值，並在模板中接收顯示。
slot的使用須要兩步：
一、在HTML的組件中用slot屬性傳遞值。
1 2 3 4 5 |
<jspang> <span slot="bolgUrl">{{jspangData.bolgUrl}}</span> <span slot="netName">{{jspangData.netName}}</span> <span slot="skill">{{jspangData.skill}}</span> </jspang> |
二、在組件模板中用<slot></slot>標籤接收值。
1 2 3 4 5 6 7 8 |
<template id="tmp"> <div> <p>博客地址：<slot name="bolgUrl"></slot></p> <p>網名：<slot name="netName"></slot></p> <p>技術類型：<slot name="skill"></slot></p>
</div> </template> |
貼出這個案例的所有代碼：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Slot content extend Demo</title> </head> <body> <h1>Slot content extend Demo</h1> <hr> <div id="app"> <hedong> <span slot="bolgUrl">{{jspangData.bolgUrl}}</span> <span slot="netName">{{jspangData.netName}}</span> <span slot="skill">{{jspangData.skill}}</span> </hedong> </div>
<template id="tmp"> <div> <p>博客地址：<slot name="bolgUrl"></slot></p> <p>網名：<slot name="netName"></slot></p> <p>技術類型：<slot name="skill"></slot></p>
</div> </template>
<script type="text/javascript"> var hedong={ template:'#tmp' }
var app=new Vue({ el:'#app', data:{ jspangData:{ bolgUrl:'http://hedong.com', netName:'技術-dong', skill:'Web前端' } }, components:{ "hedong":hedong } }) </script> </body> </html> |