vue8 生命周期
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>智能社——http://www.zhinengshe.com</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><style></style><script src="vue.js"></script>
</head>
<body><div id="box">{{msg}} <!-- 要去編譯 --></div><script>new Vue({ //創建實例。以下2.0會不一樣
el:'#box',data:{msg:'well'},created:function(){ //new Vue()成功以后
alert('實例已經創建'); //創建完之后再編譯
},beforeCompile:function(){alert('編譯之前');},compiled:function(){alert('編譯之后');},ready:function(){ //編譯之后插入到文檔，{{msg}}文本節點添加到文檔中，顯示{{msg}}，
alert('插入到文檔中');}});</script>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>智能社——http://www.zhinengshe.com</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><style></style><script src="vue.js"></script>
</head>
<body><div id="box">{{msg}}</div><script>var vm=new Vue({el:'#box',data:{msg:'well'},created:function(){alert('實例已經創建');},beforeCompile:function(){alert('編譯之前');},compiled:function(){alert('編譯之后');},ready:function(){alert('插入到文檔中');},beforeDestroy:function(){alert('銷毀之前');},destroyed:function(){alert('銷毀之后');}});/*點擊頁面銷毀vue對象*/document.onclick=function(){vm.$destroy();};</script>
</body>
</html>
?
轉載于:https://www.cnblogs.com/yaowen/p/6976270.html
總結
- 上一篇： Oracle 常用命令举例
- 下一篇： html5倒计时秒杀怎么做,vue 设