Vue挂载.创建销毁更新生命周期

最新推荐文章于 2024-05-25 17:33:09 发布

Lvdon9

最新推荐文章于 2024-05-25 17:33:09 发布

阅读量850

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_37995109/article/details/88753226

版权

Vue 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<!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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Lvdon9

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue挂载.创建销毁更新生命周期

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title>Examples Method Demo</title&gt...
复制链接

扫一扫