VUE-组件开发

最新推荐文章于 2024-03-16 14:37:53 发布

Kateri_a

最新推荐文章于 2024-03-16 14:37:53 发布

阅读量143

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/ChenBo8520/article/details/125178599

版权

属性：独立，完成一个整体的逻辑，可以复用。

vue只有一个html

组件分为全局组件和局部组件

全局组件：就是在整个vue项目中可以使用。

template 可视区域

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id = "app">
            //可以使用多次  复用
			<cp></cp>
            <cp></cp>
			<cp></cp>

		</div>
		<script>
		
			//创建vue应用
			let vm = Vue.createApp({})
			//全局组件开发  template  可视区域
			//现在有2个组件，cp app  在app中播放cp中的东西
 			const cp={
				data(){
					return{
						mn:'梦华录'
					}
				},
				template:`<p>{{mn}}</p>`
			}
			const app={
				data(){
					return{
						
						
					}
				}
				
				
			}
			//注册组件
			vm.component('cp',cp)
			//挂载到html结构里
			vm.mount('#app')
		</script>
	</body>
</html>

需要提前完成template。

接下来是给template拎出来赋一个id，在原来的地方使用id用。

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id = "app">
			<cp></cp>
		</div>
		<template id = "cp">
			<p>{{mn}} <button @click="fun">反馈</button></p>
		</template>
		<script>
		
			//创建vue应用
			let vm = Vue.createApp({})
			//全局组件开发  template  可视区域
			//现在有2个组件，cp app  在app中播放cp中的东西
 			const cp={
				data(){
					return{
						mn:'梦华录'
					}
				},
				methods:{
					fun(){
						alert("影片真好看！")
					}
				},
				template:'#cp'
			}
			const app={
				data(){
					return{
						
						
					}
				}
				
				
			}
			//注册组件
			vm.component('cp',cp)
			//挂载到html结构里
			vm.mount('#app')
		</script>
	</body>
</html>