Vue 组件化

最新推荐文章于 2021-07-31 15:43:48 发布

小王的学习之旅

最新推荐文章于 2021-07-31 15:43:48 发布

阅读量118

点赞数

分类专栏： Vue 组件化文章标签： vue

本文链接：https://blog.csdn.net/wangshengzhang/article/details/107759157

版权

Vue 组件化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue 组件化

在这里插入图片描述
全局变量

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<my-cpn></my-cpn>
		</div>
	</body>
	<script>
		//1、创建组件构造器
		const cpn = Vue.extend({
			template:`
				<ul>
					<li>追风筝的人</li>
					<li>鲁滨孙漂流记</li>
					<li>海王</li>
				</ul>
			`
		});
		
		//2、注册
		Vue.component('my-cpn',cpn);
		
		//使用：
		const app = new Vue({
			el:'#app'
		});
	</script>
</html>

局部变量

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<my-cpn></my-cpn>
		</div>
		<hr />
		<div id="app2">
			<my-cpn></my-cpn>
		</div>
	</body>
	<script>
		//1、创建组件构造器
		const cpn = Vue.extend({
			template:`
				<ul>
					<li>追风筝的人</li>
					<li>鲁滨孙漂流记</li>
					<li>海王</li>
				</ul>
			`
		});
		
		//2、注册
		//Vue.component('my-cpn',cpn);
		
		
		//使用：
		const app = new Vue({
			el:'#app',
			components:{
				'my-cpn':cpn
			}
		});
		
		const app2 = new Vue({
			el:'#app2'
		});
	</script>
</html>