新手想写小说怎么做网站,房地产开发公司属于什么企业,wordpress iframe启用,建设一个连接的网站文章目录 一、组件注册的两种方式二、使用步骤三、练习 一、组件注册的两种方式 局部注册#xff1a;只能在注册的组件内使用 ① 创建 .vue 文件 (三个组成部分) 以.vue结尾的组件#xff0c;一般也叫做 单文件组件#xff0c;即一个组件就是组件里的全部内容 ② 在使用的组… 文章目录 一、组件注册的两种方式二、使用步骤三、练习 一、组件注册的两种方式 局部注册只能在注册的组件内使用 ① 创建 .vue 文件 (三个组成部分) 以.vue结尾的组件一般也叫做 单文件组件即一个组件就是组件里的全部内容 ② 在使用的组件内导入并注册 全局注册所有组件内都能使用 二、使用步骤
步骤
创建.vue文件三个组成部分在使用的组件内先导入再注册最后使用
使用方式
当成html标签使用即可 组件名/组件名
注意
组件名规范 — 大驼峰命名法 如 HmHeader
语法
① 创建 .vue 文件 (三个组成部分)
创建是往components注意是复数目录里建 ② 在使用的组件内导入并注册
// 导入需要注册的组件
import 组件对象 from .vue文件路径
import HmHeader from ./components/HmHeaderexport default { // 局部注册components: {组件名: 组件对象,// 前面是我们将来需要使用的名字后面是导过来的变量名一般情况下这两个会起同样的名字HmHeader:HmHeaer,HmHeader}
}三、练习
需要备份一份src直接在空白的地方粘贴即可 在App组件中完成以下练习。在App.vue中使用组件的方式完成下面布局 App.vue
template!-- 这个类名最好是跟当前的组件名同名 --div classApp!-- 头部组件 --HmHeader/HmHeader!-- 主体组件 --HmMain/HmMain!-- 底部组件 --HmFooter/HmFooter!-- 如果 HmFooter tab 出不来 → 需要配置 vscode设置中搜索 trigger on tab → 勾上--/div
/templatescript
import HmHeader from ./components/HmHeader.vue
import HmMain from ./components/HmMain.vue
import HmFooter from ./components/HmFooter.vue
export default {components: {// 组件名: 组件对象// 同名的时候是可以简写的HmHeader: HmHeader,HmMain,HmFooter}
}
/scriptstyle
.App {width: 600px;height: 700px;background-color: #87ceeb;margin: 0 auto;padding: 20px;
}
/styleHmHeader.vue
template!-- 在类名中多个单词用 - 连接 --div classhm-header我是hm-header/div
/templatescript
export default {}
/scriptstyle
.hm-header {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #8064a2;color: white;
}
/styleHmMain.vue
templatediv classhm-main我是hm-main/div
/templatescript
export default {}
/scriptstyle
.hm-main {height: 400px;line-height: 400px;text-align: center;font-size: 30px;background-color: #f79646;color: white;margin: 20px 0;
}
/styleHmFooter.vue
templatediv classhm-footer我是hm-footer/div
/templatescript
export default {}
/scriptstyle
.hm-footer {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #4f81bd;color: white;
}
/style
