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>
运行结果：
