Vue组件(二）单文件组件

1. Vue组件化编程

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

1.2. 非单文件组件

1. 模板编写没有提示
2. 没有构建过程, 无法将 ES6 转换成 ES5
3. 不支持组件的 CSS
4. 真正开发中几乎不用
   如需查看非单文件组件知识，请查看：
   Vue组件(一） 非单文件组件

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. 基本使用

1. 引入组件
2. 映射成标签
3. 使用组件标签

<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项目