标签：文件 School Vue name 1.3 vue 组件

1. Vue组件化编程

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

1.2. 非单文件组件

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

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

标签：文件,School,Vue,name,1.3,vue,组件
来源： https://blog.csdn.net/yyclassmvp/article/details/121367581

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。