Vue實例和內置組件
Vue實例方法
下面將分別介紹vue的實例方法：
$mount()：用來掛載我們的擴展的
$destroy()：用來銷燬整個掛載的
$forceUpdate()：用來提示更新數據的
$nextTick()：用來提示數據已經被修改的
結合vue的幾個生命週期，可以更好的理解這些實例方法
實例方法
一. $mount()方法的示例
先構造一個外部擴展：
var demoExtendsObject=Vue.extend({
template:`<p style="color:green">{{messages}}</p>`,
data:function(){
return{
messages:'這是vue實例方法中的$mount()方法'
}
}
});
實例化擴展，調用$mount()方法進行元素掛載
var vm=new demoExtendsObject().$mount("#demo")
運行結果：
二. $destroy()方法的示例
新建一個按鈕，完成銷燬功能，調用vue生命週期中的destroyed()方法，查看該方法的運行效果。
<p><button onclick="destroy()">銷燬</button></p>
調用vue生命週期中的destroyed()方法：
destroyed:function(){
console.log("destroyed 已經被銷燬")
}
調用實例方法，進行卸載：
function destroy(){
vm.$destroy();
}
運行結果：
三. $forceUpdate()()方法的示例
新建一個按鈕，完成數據更新功能，調用vue生命週期中的updated()方法，查看該方法的運行效果。
這個方法與vue生命週期中的updated鉤子函數類似
<p><button onclick="reload()">刷新</button></p>
調用vue生命週期中的updated()方法：
updated:function(){
console.log("updated 更新完成")
}
調用實例方法，進行更新：
function reload(){
vm.$forceUpdate()
}
運行結果：
四. $nextTick()方法的示例
當Vue構造器裏的data值被修改完成後會調用這個方法，也相當於一個鉤子函數
新建一個按鈕，完成數據修改功能，修改messages屬性的值，修改完成後會執行用此方法。
<p><button onclick="modify()">修改</button></p>
構造modify()方法,完成數據的修改：
function modify() {
vm.messages = "這是vue實例方法中的$nextTick()方法 ";
vm.$nextTick(function() {
console.log('messages更新完後我被調用了');
})
}
運行結果：
注意：以上四個實例方法後邊必須要有括號，沒有括號是無用的。
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的實例方法</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue的實例方法</h1>
<div id="demo"></div>
<p><button onclick="destroy()">銷燬</button></p>
<p><button onclick="reload()">刷新</button></p>
<p><button onclick="modify()">修改</button></p>
<script type="text/javascript">
var demoExtendsObject = Vue.extend({
template: `<p style="color:green">{{messages}}</p>`,
data: function() {
return {
messages: '這是vue實例方法中的$mount()方法'
}
},
mounted: function() {
console.log("mounted 創建掛載")
},
destroyed: function() {
console.log("destroyed 已經被銷燬")
},
updated: function() {
console.log("updated 更新完成")
}
});
var vm = new demoExtendsObject().$mount("#demo")
function destroy() {
vm.$destroy();
}
function reload() {
vm.$forceUpdate()
}
function modify() {
vm.messages = "這是vue實例方法中的$nextTick()方法 ";
vm.$nextTick(function() {
console.log('messages更新完後我被調用了');
})
}
</script>
</body>
</html>
運行結果：
