Vue(组件化编程)_02

一、模块与组件、模块化与组件化

1.模块

理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件

为什么: js 文件很多很复杂

作用: 复用 js, 简化 js 的编写, 提高 js 运行效率

2.组件

理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…..)

为什么: 一个界面的功能很复杂

作用: 复用编码, 简化项目编码, 提高运行效率

3.模块化

当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用

4.组件化

当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。

二、非单文件组件

1. 模板编写没有提示

2. 没有构建过程, 无法将 ES6 转换成 ES5

3. 不支持组件的 CSS

4. 真正开发中几乎不用

三、单文件组件

单文件组件分为三个模块，基本使用是引入组件再映射成标签最后使用组件标签。

1. 模板页面

2.JS模块对象

3.样式

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