实例方法
<!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">
</div>
<p><button onclick="destroy()">卸载</button></p>
<p><button onclick="reload()">刷新</button></p>
<p><button onclick="tick()">tick</button></p>
<script type="text/javascript">
var jspang = Vue.extend({
template:`<p>{{message}}</p>`,
data:function(){
return {
message:'Hello ,I am JSPang'
}
},destroyed:function () {
console.log("销毁之后==");
},updated:function () {
console.log("更新之后==");
}
})
//挂载app这个节点
var vm = new jspang().$mount("#app")
function tick(){
vm.message="update message info ";
vm.$nextTick(function(){
console.log('message更新完后我被调用了');
})
}
function destroy(){
console.log("摧毁===================");
vm.$destroy();
}
function reload(){
console.log("刷新===================");
vm.$forceUpdate();
}
</script>
</body>
</html>
