Vue的实例、生命周期与Vue脚手架（vue-cli）实例详(9)
初始化结果：
更新message的值：
手动销毁实例：
2.5、手动挂载与调用事件 2.5.1、手动挂载
vm.＄mount( [elementOrSelector] ) 如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.＄mount() 手动地挂载一个未挂载的实例。
如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。
这个方法返回实例自身，因而可以链式调用其它实例方法。
var MyComponent = Vue.extend({
template: '<div>Hello!</div>'
})
// 创建并挂载到 #app (会替换 #app)
new MyComponent().＄mount('#app')
// 同上
new MyComponent({ el: '#app' })
// 或者，在文档之外渲染并且随后挂载
var component = new MyComponent().＄mount()
document.getElementById('app').appendChild(component.＄el)
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue2生命周期</title>
<style>
#app1 {
color: red;
}
#app2 {
color: blue;
}
</style>
</head>
<body>
<div id="app1">
</div>
<div id="app2">
</div>
<button type="button" onclick="loaddata1()">手动挂载1</button>
<button type="button" onclick="loaddata2()">手动挂载2</button>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app1 = new Vue({
template: "<h2>{{msg}}</h2>",
data: {
msg: "Hello Vue2!"
}
});
function loaddata1() {
app1.＄mount("#app1");
document.getElementById("app1").appendChild(app1.＄el);
}
function loaddata2() {
app1.＄mount();
document.getElementById("app2").appendChild(app1.＄el);
}
</script>
</body>
</html>
结果：
2.5.2、销毁实例
vm.＄destroy() 完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
2.5.3、强制更新
vm.＄forceUpdate() 迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
