技术QQ交流群:294088839
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 实例方法</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue 实例方法</h1>
<hr>
<div id="app">
</div>
<p><button onclick="destroy()">卸载</button></p>
<p><button onclick="reload()">刷新</button></p>
<p><button onclick="tick()">修改</button></p>
</body>
</html>
<script>
var whl=Vue.extend({
template:`<p>{{info}}</p>`,
//扩展的直接写对象是不行的 必须用匿名函数来命名数据
data:function () {
return{
info:'我是中国人'
}
},
//挂载的时候执行
mounted:function () {
console.log('我是挂载的时候触发')
},
//删除的时候触发
destroyed:function () {
console.log('我是卸载的时候触发')
},
//被更新的时候触发
updated:function () {
console.log('我是更新之后触发')
}
})
//构造 挂载方法 $mount
var vm = new whl().$mount('#app')
function destroy(){
// 销毁 $destroy
vm.$destroy();
}
function reload(){
//刷新的方法
vm.$forceUpdate()
}
//数据修改方法
function tick(){
vm.info='我更新该了';
vm.$nextTick(function(){
console.log('info更新完了 调用')
})
}
</script>