Vue之v-extend

最新推荐文章于 2023-02-19 20:20:06 发布

Mr.ZKH

最新推荐文章于 2023-02-19 20:20:06 发布

阅读量211

点赞数

分类专栏： Vuejs

本文链接：https://blog.csdn.net/weixin_44415461/article/details/96993925

版权

Vuejs 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-extend</title>
	<script src="js/vue.min.js"></script>
</head>
<body>
	<h1>v-extend</h1>
	<hr />
     <div id="header"></div>
      <div id="footer"></div>
</body>
<script>
		var header = Vue.extend({
	    template: '<P>{{message}}</p>',
	    data: function(){
	        return {
	        	message: 'This is header'
	        }
	}
 })
		new header().$mount('#header'); //挂载

		var footer = Vue.extend({
	    template: '<P>{{message2}}</p>',
	    data: function(){
	        return {
	        	message2: 'This is footer'
	        }
	}
 })
		new footer().$mount('#footer'); //挂载
</script>
</html>

运行效果图：
在这里插入图片描述