11、组件入门及写个首页头部组件
前言:项目准备工作说了很久,不知道大家学会了没有?今天开始我们开始正式搭建页面,先从首页开始,在搭建页面的过程中,我也会将vue的知识点在其中穿插讲解,但是你最好是提前看看官方文档。ok,今天我们来讲下组件,然后搭个头部组件实现复用; GitHub:https://github.com/Ewall1106/mall
1、官方解读
(1)官方怎么说的啊?组件可以扩展HTML元素,封装可重用的代码,这句话中,记住可重用
这几个字是很重要的,一般来说这就是答案——即到底什么时候应该把一部分的代码抽离出来构成组件?
来自官网
(2)关于组件的命名
组件的命名我在项目中统一用kebab-case
(短横线)表示:
组件命名
(3)组件的复用 可以将组件进行任意次数的复用,举个栗子如下图,每次点击按钮,每个组件都会各自独自维护它的count;因为每用一次组件,就会有一个它的新实例被创建。
组件复用
(4)其它 还有很多关于组件使用的很重要的内容,如组件之间数据的传递,组件的事件等等,我们后面在项目中具体用到了再穿插。
2、组件的运用-创建头部组件
(1)新建一个myHeader头部组件
ok,我们进入components文件夹
里面新建一个myHeader.vue
组件,有helloworld.vue
的删掉或者直接改个名直接用都是可以的,好了,代码敲完了以后变成了这幅模样:
myHeader.vue
仔细看看上图,一个myHeader.vue
的页面分为了三个部分,<template></template>
里面是放html代码的是为结构,<script></script>
里面写js是为逻辑,<style></style>
里些css是为样式,这就是vue里面的结构、样式、逻辑三者分离,我就不多说了,里面我序号标记了几个小要点,我说道一下:
- 这个
name
大家应该明白,就是对这个组件的命名,具体表现在哪里,卖个关子,我们待会讲; -
data
标记出来的意思就是记得data必须函数; - 第3点就是style里面这里有个
scoped
,其实上面注释已经讲得很清楚了,我佛系翻译一下就是你加了css就只会作用于这个组件、这个页面,不会污染。
(2)组件的引入
- ok,我们在div里面加个helloworld便于展示:
往myHeader里面添加内容
- 然后在
home.vue
里面引入:
home.vue
怎么引入的?import照着上图引入然后components属性里面注册一下,我这里讲下命名规范,import后面请使用首字母大写的形式MyHeader
,template里面使用的时候用短横线连接法my-header
。
(3)组件的复用 组件的复用就很简单了,写复制粘贴一下就行,记住,组件都是独立的。
组件复用
localhost
(4)最后我们在回到第(1)
点下面关于组件里面的name
属性具体体现在哪里的问题
我们打开vue的插件,name
属性的值就是组件的名字,你可以自己修改name
属性看看效果:
vue devtools
3、然后,我修改myHeader.vue组件里面得内容,这就是我们的头部
加点样式:
Hxx-Luxury Store
4、题外话
(1)我有想了一会儿,到底这个小商场项目的场景是面向pc端还是手机端的运用呢?最后我觉得还是紧跟时代潮流,做成移动端的商场,有点webApp的意思,我觉得这样更具有实际意义,所以,以后看页面按完F12后请选取手机调试模式【抱拳】;
(2)里面很多小问题但也很重要的,比如import ... from
后面为什么用@
的问题,越到后面我就不会写的很细了,因为篇幅和文章侧重点的问题,所以,大家多培养自己自学google能力,也欢迎留言;
(3)如果有本章相关知识的学习链接欢迎留言分享,开源和分享精神我觉得是很重要的,感谢。
参考链接 https://cn.vuejs.org/v2/guide/components.html
- 简单分析shared pool(一) (r3笔记46天)
- 走索引扫描的慢查询(r3笔记45天)
- AR(I)MA时间序列建模过程——步骤和python代码
- 用python作信用卡欺诈预测
- 联系生活来简化sql(r3笔记第43天)
- [笔记]使用Python一步一步地来进行数据分析
- 使用 R 语言从拉勾网看数据挖掘岗位现状
- 使用strace分析exp的奇怪问题(r3笔记第41天)
- Python文本挖掘:知乎网友如何评价《人民的名义》
- 怎样做中文文本的情感分析?
- 由一条日志警告所做的调优分析(r3笔记第40天)
- 生产环境sql语句调优实战第十篇(r3笔记第39天)
- memory_target设置不当导致数据库无法启动的问题(r3笔记第38天)
- python利用结巴分词做新闻地图
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Vue3对于一个前端来讲意味着什么?
- 这就是你日日夜夜想要的docker!!!---------Dockerfile构建nginx、Tomcat、MySQL镜像
- 深入揭秘前端路由本质,手写 mini-router
- 这就是你日日夜夜想要的docker!!!---------Docker四种网络模式解析
- C语言队列的基本操作
- 10款好用到爆的Vim插件,你知道几个?
- 这就是你日日夜夜想要的docker!!!---------Docker Compose容器编排理论+实操
- 模式检验库Meteva笔记:加载本地观测数据
- Go by Example 中文版: SHA1 哈希
- C语言中缀表达式转后缀表达式
- C语言逆波兰表达式计算(后缀表达式计算器)
- SpringBoot+Druid+Mybatis配置多数据源
- C语言共享栈
- C语言二叉树的基本操作
- 《GEO数据挖掘课程》配套练习题