<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="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>
<script type="text/javascript">
var jspang=Vue.extend({
template:`<p>{{message}}</p>`,
data:function(){
return{
message:'hello , i am jspang'
}
},
mounted(){
console.log('mouted 被创建!');
},
//销毁方法后执行的生命周期
destroyed(){
console.log("destroued");
},
//更新方法生命周期
updated(){
console.log("更新之后");
}
})
var vm= new jspang().$mount("#app");
//销毁方法
function destroy(){
vm.$destroy();
}
//属性方法
function reload(){
vm.$forceUpdate();
}
</script>
</body>
</html>