组件化:一个页面可以拆分成一个个组件,每个组件有着自己的独立、样式、行为。利于维护,开发,复用
三个部分组成:
template:结构(有且只能有一个根元素)
script:js逻辑
style:样式(可支持less,需要装包)
组件注册使用::
局部注册:只能在注册的组件内使用
1.创建.vue文件(三个组成部分)
在src文件中的components文件中创建.vue文件
2.在使用的组件内导入并注册
下面是一些操作截图
快速生成结构输入<后回车
生成代码
写一些样式
点击app.Vue,写导入局部注册
在<div id ="app"></div>里面,组件名当成 标签使用即可
组件名规范,大驼峰命名法
局部注册固定使用语法,组件对象就是你导入那个组件根元素的class命名或id命名
import 组件名 from '组件存放路径'
export default{
// 局部注册
components:{
组件名:组件对象
}
}
全局注册:
所以组件内都能使用
1.创建.vue文件(三个组成部分)
在src文件中的components文件中创建.vue文件
2.在main.js中进行全局注册
下面是一些操作截图
在components下新建了个TapButton.vue文件
写好后点击main.js
在main.js中导入后全局注册
Vue.component('组件名',组件对象)
调用组件
这是组件开发的过程,祝你在学前端的路上越来越好