<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例方法</title>
<meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<script src="../assets/js/flexible_css.js"></script>
<script src="../assets/js/flexible.js"></script>
<script src="../assets/js/jquery-3.2.1.js"></script>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<button onclick="destroy()">销毁</button>
<button onclick="reload()">刷新</button>
<button onclick="tick()">数据更改</button>
</body>
<script type="text/javascript">
var cai=Vue.extend({ // 扩展器
template:`<p>{{message}}</p>`, //模版
data:function(){ //数据
return {
message:'你好我蔡蔡'
}
},
mounted:function(){ //挂载运行次方法
console.log('mounted 被创建！')
},
destroyed:function(){ //销毁后 调用次方法 生命周期
console.log('destroyed 销毁之后')
},
updated:function(){
console.log('updated更新后')
}
})
var vm=new cai().$mount("#app"); //挂载
function destroy(){ // js方法函数
vm.$destroy(); //销毁
}
function reload(){
vm.$forceUpdate(); //更新
}
function tick(){
vm.message="修改后的内容";
vm.$nextTick(function(){ //数据修改方法 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
console.log('message更改完成后我被调用了');
})
}
</script>
</html>
