Vue组件(二）单文件组件

2023-12-03 19:58:57

1. Vue组件化编程

，组件时Vue项目重要组成部分，分为单文件组件和非单文件组件，这按文章主要介绍单文件组件。

1.2. 非单文件组件

模板编写没有提示
没有构建过程, 无法将 ES6 转换成 ES5
不支持组件的 CSS
真正开发中几乎不用

1.3. 单文件组件

1.3.1. 一个.vue 文件的组成(3 个部分)

在用脚手架构建程序的时候，每一个.Vue文件就是一个组件，共分为三个部分：

1. 模板页面
 <template>
    模板
 <template>
 2. JS 模块对象
 <script>
 export default {
 data() {return {}}, methods: {}, computed: {}, components: {}
  }
 </script>
 3. 样式
 <style>
 css等等
 </style>

<template>
	<div class="demo">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="showName">点我提示学校名</button>	
	</div>
</template>

<script>
	 export default {
		name:'School',
		data(){
			return {
				name:'尚硅谷',
				address:'北京昌平'
			}
		},
		methods: {
			showName(){
				alert(this.name)
			}
		},
	}
</script>

<style>
	.demo{
		background-color: orange;
	}
</style>

1.3.2. 基本使用

引入组件
映射成标签
使用组件标签

<template>
	<div>
	//映射成标签，并使用组件
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	//引入组件
	import School from './School.vue'
	import Student from './Student.vue'

	export default {
		name:'App',
		components:{
			School,
			Student
		}
	}
</script>

1.3.3 单文件组件工作方式

从上一小节代码可以看到，App.vue引入了School.vue和Student.vue，作为所有组件的“祖宗”，也就是组件管理者。而单文件组件通常在脚手架程序中使用，不能直接运行.vue文件。所有的组件使用，都需要先引入、再注册。

脚手架创建vue项目

码农公寓