【Vue 全家桶】2、Vue 组件化编程

目录

• • [模块与组件、模块化与组件化 component](#模块与组件、模块化与组件化 component)
  • • 模块
    • 组件
  • 非单文件组件
  • [单文件组件 .vue](#单文件组件 .vue)

模块与组件、模块化与组件化 component

模块

组件

• 局部功能代码和资源的集合

非单文件组件

// 1、创建组件
const school = Vue.extend({
	data(){
		return {}
	}
})
const student = Vue.extend({
	data(){
		return {}
	}
})


new Vue({
	el:'#root',
	components:{ // 2、注册组件（局部注册）
		school,student
	}
})
// 3、使用组件
<school></school>
<student></student>

单文件组件 .vue

<template></template>
<script>
	export default {
	name: '',
	data(){},
	methods:{}
	}
</script>
<style></style>

• webpack、脚手架
• App.vue