- 组件的定义：实现应用中局部功能代码和资源的集合
- 模块化：当应用中的js都以模块来编写的，那么这个应用就是一个模块化的应用
- 组件化：当应用中的功能都是多组件的方式来编写的，那么这个应用就是一个组件化的应用
- 非单文件组件：一个文件中包含n个组件
- 单文件组件：一个文件中只包含1个组件
Vue中使用组件的三大步骤：
<body> <div id="root"> <school></school> <student></student> <hr> </div> <script> //创建school组件 const school = Vue.extend({ template: ` <div> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div> `, // el: '#root', data() { return { name: 'B站大学', address: '上海' } } }) const student = Vue.extend({ template: ` <div> <h2>学生名称：{{studentname}}</h2> <h2>学生年龄：{{age}}</h2> </div> `, data() { return { studentname: 'Cai', age: 20 } } }) //创建Vm new Vue({ el: '#root', //注册组件（局部注册） components: { school: school, student: student } }) </script> </body>
组件的注意事项
1、关于组件名：
一个单词组成：
- 第一种写法（首字母小写）：school
- 第二种写法（首字母大写）：School
多个单词组成： - 第一种写法（kebab-case命名）:my-school
- 第二种写法（CamelCase命名）：MySchool（需要使用Vue脚手架）
备注：
- 组件名尽可能回避HTMl中已有的元素的名称，例如h2,H2都不行
- 可以使用name配置项指定组件在开发中呈现的名字
2、关于组件标签：
- 第一种写法：
<school></school> - 第二种写法：
<school/> - 备注：不用脚手架时，
<school/>会导致后续组件不能渲染
3、一个简写的方式
const school=Vue.extend(options)可以简写为：const school=options
