组件的基本使用

v_Monster

于 2022-05-09 11:49:18 发布

阅读量123

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/v_Monster/article/details/124663040

版权

本文档介绍了Vue.js中组件的基本使用方法。首先，通过在HTML文件中引入Vue.js库，然后创建一个组件构造器，定义组件的模板。接着，注册组件并将其应用到页面上。在示例中，组件包含了一段描述组件使用方法的文本。最后，通过Vue实例将组件挂载到DOM元素上，展示了如何在实际项目中运用组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>组件的基本使用</title>
		<!-- 引用vue -->
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用组件 -->
			<mycpn></mycpn>
		</div>
	</body>
	<script>
		// 创建组件构造器
		const cpnContrctor = Vue.extend({
		// 组件模板
			template:
				`
				<div>
					<p>这里是组件的基本使用</p>
					<h2>构造</h2>
					<p>注册<p>
					<h2>使用</h2>
				</div>
				`
			
		})
		// 注册组件
		Vue.component('mycpn',cpnContrctor)
		var vm = new Vue({
 			el:'#app',      
			data:{
				msg:'Hello World!'
			}
			}
		})
	</script>
</html>