vue---组件化开发

最新推荐文章于 2024-01-09 00:04:18 发布

骑台风走

最新推荐文章于 2024-01-09 00:04:18 发布

阅读量2.9k

点赞数

分类专栏： vue大全(更订中) 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_52385631/article/details/123286817

版权

vue大全(更订中) 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

1. 组件[component]

组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的网站之间，也存在同样的功能。

而在网页中实现一个功能，需要使用html定义功能的内容结构，使用css声明功能的外观样式，还要使用js来定义功能的特效，因此就产生了把一个功能相关的[HTML、css和javascript]代码封装在一起组成一个整体的代码块封装模式，我们称之为“组件”。

所以，组件就是一个html网页中的功能，一般就是一个标签，标签中有自己的html内容结构，css样式和js特效。

这样，前端人员就可以在开发时，只需要书写一次代码，随处引入即可使用。

我们在进行vue开发的时候，还记得我们自己创建的vm对象吗，这个vm对象我们称为一个大组件，根组件(页面上叫Root)，在一个网页的开发中，根据网页上的功能区域我们又可以细分成其他组件，或称为子组件

组件有两种：默认组件[全局组件] 和单文件组件[局部组件]

1.1 局部组件

三步：声子、用子、挂子

注意:每个组件中的template对应的标签,都必须有一个外层标签包裹

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>todolist</title>

</head>
<body>
	<div id="app">
		<!-- 3.使用子组件  用子 -->
<!--		<xx></xx>-->
<!--		<xx2></xx2>-->
	<Vheader></Vheader>
	<xxx></xxx>
	<Kk></Kk>
<!--	content  header footer aside section nav H5有一些新标签,注意,组件名称尽量不要和标签名称冲突 -->
	</div>
</body>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script>
	// 组件化开发(将页面的每块功能,单独封装为一个组件,哪个页面用哪些组件,就直接拿到这几个组件,拼到页面上展示)
	// 1.声明子组件  声子
	let Vheader = {
		data(){
			return {
				nav_list:['个人中心','登录','注册']
			}
		},
		template:'<h1>{{nav_list}}</h1>',


	};

	let xxx = {
		data(){
			return {
				content_list:['xxx','ooo',]
			}
		},
		template:'<h1 style="color:red;">{{content_list}}</h1>',


	};

	// 全局组件  不需要挂载,直接使用
	Vue.component('Kk',{
		data(){
			return {
				name:'全局组件!!!'
			}
		},
		template:'<h1 style="color:tan;">{{name}}</h1>',

	})



	let vm  = new Vue({
		el:'#app',
		data(){
			return {
				data:'',
			}
		},

		created(){

		},
		components:{
			Vheader,  //2.挂载子组件  挂子
			// Content:Content,
			xxx,   // 键和值相同,就可以简写
		}


	})



</script>
</html>

1.2 默认组件(全局组件)

直接看代码，局部组件使用时需要挂载，全局组件使用时不需要挂载。那么他们两个什么时候用呢，局部组件就在某个局部使用的时候，全局组件是大家公用的，或者说每个页面都有这么一个功能的时候，在哪里可能都会用到的时候。

<div id="app">
    <Kk></Kk>

</div>

<script>
    	// 全局组件  不需要挂载,直接使用
	Vue.component('Kk',{
		data(){
			return {
				name:'全局组件!!!'
			}
		},
		template:'<h1 style="color:tan;">{{name}}</h1>',

	})


    var vm = new Vue({
        el:"#app",
        data:{

        }
    })
</script>