$mount方法是用来挂载我们的扩展的。
var xiaofan = Vue.extend ({ template:` <p> {{message}} </p> `, });
var vm = new xiaofan().$mount("#app");
destroyed:function(){ console.log("destroy 已经生效了!") },
function destroy(){ vm.$destroy(); };
updated:function(){ console.log("upadated 更新之后!") }
function reload(){ vm.$forceUpdate(); }
function tick(){ vm.message="update message info "; vm.$nextTick(function(){ console.log(‘message更新完后我被调用了‘); }) }
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实例方法</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>实例方法</h1>
<hr>
<div id="app">
</div>
<p> <button onclick="destroy()">destroy</button> </p>
<p> <button onclick="reload()">reload</button> </p>
<script type="text/javascript">
var xiaofan = Vue.extend ({
template:` <p> {{message}} </p> `,
data:function(){
return{
message:"Hello,I am xiaofan!"
}
},
mounted:function(){
console.log("mounted 已经被挂载了!");
},
destroyed:function(){
console.log("destroy 已经生效了!")
},
updated:function(){
console.log("upadated 更新之后!")
}
});
var vm = new xiaofan().$mount("#app");
function destroy(){
vm.$destroy();
};
function reload(){
vm.$forceUpdate();
}
</script>
</body>
</html>
原文:https://www.cnblogs.com/xiaofandegeng/p/9005059.html