一个合格的初级前端工程师需要掌握的模块笔记
前言
❤️笔芯❤️~
Web模块
html基本结构
html
标签是由<>
包围的关键词。html
标签通常成对出现,分为标签开头和标签结尾。- 有部分标签是没有结束标签的,为单标签,单标签必须使用
/
结尾。 - 页面所有的内容,都在
html
标签中。 html
标签分为三部分:标签名称,标签内容,标签属性。html
标签具有语义化,可通过标签名能够判断出该标签的内容,语义化的作用是网页结构层次更清晰,更容易被搜索引擎收录,更容易让屏幕阅读器读出网页内容。- 标签的内容是在一对标签内部的内容。
- 标签的内容可以是其他标签。
标签属性
class
属性:用于定义元素的类名id
属性:用于指定元素的唯一id
,该属性的值在整个html
文档中具有唯一性style
属性:用于指定元素的行内样式,使用该属性后将会覆盖任何全局的样式设定title
属性:用于指定元素的额外信息accesskey
属性:用于指定激活元素的快捷键tabindex
属性:用于指定元素在tab
键下的次序dir
属性:用于指定元素中内容的文本方向,属性只有ltr
或rtl
两种lang
属性:用于指定元素内容的语言
事件属性
window
窗口事件,onload
,在网页加载结束之后触发,onunload
,在用户从网页离开时发生(点击跳转,页面重载,关闭浏览器窗口等)form
表单事件,onblur
,当元素失去焦点时触发,onchange
,在元素的值被改变时触发,onfocus
,当元素获得焦点时触发,onreset
,当表单中的重置按钮被点击时触发,onselect
,在元素中文本被选中后触发,onsubmit
,在提交表单时触发keyboard
键盘事件,onkeydown
,在用户按下按键时触发,onkeypress
,在用户按下按键后,按着按键时触发。该属性不会对所有按键生效,不生效的有,alt,ctrl,shift,esc
mouse
鼠标事件,onclick
,当在元素上发生鼠标点击时触发,onblclick
,当在元素上发生鼠标双击时触发,onmousedown
,当元素上按下鼠标按钮时触发,onmousemove
,当鼠标指针移动到元素上时触发,onmouseout
,当元素指针移出元素时触发,onmouseup
,当元素上释放鼠标按钮时触发。Media
媒体事件,onabort
,当退出时触发,onwaiting
,当媒体已停止播放但打算继续播放时触发。
文本标签
- 段落标签
<p></p>
,段落标签用来描述一段文字 - 标题标签
<hx></hx>
,标题标签用来描述一个标题,标题标签总共有六个级别,<h1></h1>
标签在每个页面中通常只出现一次 - 强调语句标签,
<em></em>
,用于强调某些文字的重要性 - 更加强调标签,
<strong></strong>
和<em>
标签一样,用于强调文本,但它强调的程度更强一些 - 无语义标签
<span></span>
,标签是没有语义的 - 短文本引用标签
<q></q>
,简短文字的引用 - 长文本引用标签
<blockquote></blockquote>
,定义长的文本引用 - 换行标签
<br/>
多媒体标签
- 链接标签,
<a></a>
- 图片标签,
<img/>
- 视频标签,
<video></video>
- 音频标签,
<audio></audio>
列表
- 无序列表标签,
ul,li
,<ul></ul>
列表定义一个无序列表,<li></li>
代表无需列表中的每一个元素 - 有序列表,
ol,li
- 定义列表,
<dl></dl>
,定义列表通常和<dt></dt>
和<dd></dd>
标签一起使用
表格
- 表格标签
<table></table>
- 表格的一行
<tr></tr>
- 表格的表头
<th></th>
- 单元格
<td></td>
- 表格合并,同一行内,合并几列
colspan="2"
,同一列内,合并几行rowspan="3"
表单标签
- 表单标签
<form>
<form></form>
表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
<form method="传送方式" action="服务器文件">
action
,浏览者输入的数据被传送到的地方
method
,数据传送的方式
- 输入标签
<input/>
name
:为文本框命名,用于提交表单,后台接收数据用。
value
:为文本输入框设置默认值。
type
:通过定义不同的type
类型,input
的功能有所不同。
1 | text 单行文本输入框 |
button
按钮,下拉选择框<select></select>
1 | <option value="提交值">选项</option>是下拉选择框里面的每一个选项 |
- 文本域:
<textarea></textarea>
,当用户想输入大量文字的时候,使用文本域。cols
,多行输入域的列数,rows
,多行输入域的行数。
其他语义化标签
- 盒子
<div></div>
- 网页头部
<header></header>
,html5
新增语义化标签,定义网页的头部,主要用于布局,分割页面的结构 - 底部信息
<footer></footer>
,html5
新增语义化标签,定义网页的底部,主要用于布局,分割页面的结构 - 导航
<nav></nav>
,html5
新增语义化标签,定义一个导航,主要用于布局,分割页面的结构 - 文章
<article></article>
,html5
新增语义化标签,定义一篇文章,主要用于布局,分割页面的结构 - 侧边栏
<aside></aside>
,语义化标签,定义主题内容外的信息,主要用于布局,分割页面的结构。 - 时间标签
<time></time>
,语义化标签,定义一个时间
网页结构
<!DOCTYPE html>
定义文档类型,告知浏览器用哪一种标准解释HTML
<html></html>
可告知浏览器其自身是一个HTML
文档<body></body>
标签之间的内容是网页的主要内容<head></head>
标签用于定义文档的头部,它是所有头部元素的容器<title></title>
元素可定义文档的标题<link>
标签将css
样式文件链接到HTML
文件内<meta>
定义文档的元数据
模块划分
- 常见的企业网站,多由头部区,展示图片区域,主题区域,底部信息区域组成
- 网页拆分原则: – 由上到下 - 由内到外
CSS代码语法
CSS
全称为层叠样式表(Cascading Style Sheets)
,它主要是用于定义HTML
内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。css
代码通常存放在<style></style>
标签内css
样式由选择符和声明组成,而声明又由属性和值组成- 选择符
{属性:值}
- 选择符:又称选择器,指明网页中要应用样式规则的元素
CSS 放置位置
- 行内样式,不建议使用
- 内联式样式表
- 外联样式表
CSS的继承
CSS
的某些样式是具有继承性的,继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。- 不可继承样式:
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear
- 可以继承的样式:
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、visibility、cursor
选择器的种类
- 标签选择器:通过标签的名字,修改
css
样式 - 通配符选择器:选择页面中所有的元素
- 属性选择器
- 后代选择器:选择某个父元素下面所有的元素
- 一级子元素选则器:选择某个父元素的直接子元素,后代选择器是选择父元素的所有子孙元素,一级子元素原则器只选择第一级子元素,不会再向下查找元素
id
选择器:通过id
查找页面中唯一的标签class
选择器:通过特定的class
(类)来查找页面中对应的标签,以.class
名称- 伪类选择器:
:hover
鼠标移入某个元素;:before
在某个元素的前面插入内容;:after
在某个元素的后面插入内容 - 群组选择器:可以对多个不同的选择器设置相同的样式
选择器的优先级
- 当有不同的选择器对同一个对象进行样式指定时,并且两个选择器有相同的属性被赋予不同的值时。
- 通过测算那个选择器的权重值最高,应用哪一个选择器的样式
- 权重计算方式:
1 | 标签选择器:1 |
背景样式
- 背景颜色
background-color
- 背景图片
background-image
1 | background-image:url(bg01.jpg); |
- 背景图片位置
background-position
1 | background-position:10px 100px; |
- 背景图片重复
background-repeat
1 | background-repeat:no-repeat |
- 背景图片定位
background-attachment
1 | background-attachment:fixed |
background
缩写
1 | background:#ff0000 url(bg01.jpg) no-repeat fixed center |
字体样式
- 字体族
font-family
1 | font-family:"微软雅黑","黑体"; |
- 字体大小
font-size
1 | font-size:12px; |
网页默认字体大小是
16px
- 字体粗细
font-weight
1 | font-weight:400; |
- 字体颜色
color
1 | 颜色的英文单词color:red; |
- 字体斜体
font-style
1 | font-style:italic |
文本属性
- 行高
line-height
1 | line-height:50px; |
可以将父元素的高度撑起来
- 文本水平对齐方式
text-align
1 | left 左对齐 |
- 文本所在行高的垂直对齐方式
vertical-align
1 | baseline 默认 |
- 文本缩进
text-indent
1 | text-indent:2em; |
通常用在段落开始位置的首行缩进
- 字母之间的间距
letter-spacing
- 单词之间间距
word-spacing
- 文本的大小写
text-transform
1 | capitalize 文本中的每个单词以大写字母开头。 |
- 文本的装饰
text-decoration
1 | none 默认。 |
- 自动换行
word-wrap
1 | word-wrap: break-word; |
基本样式
- 宽度
width
1 | width:200px; |
- 高度
height
1 | height:300px |
- 鼠标样式
cursor
定义鼠标的样式cursor:pointer
1 | default默认 |
- 透明度
opacity
1 | opacity:0.3 |
1 | 透明度的值0~1之间的数字,0代表透明,1代表完全不透明 |
- 可见性
visibility
1 | visibility:hidden; |
- 溢出隐藏
overflow
设置当对象的内容超过其指定高度及宽度时如何显示内容
1 | visible 默认值,内容不会被修剪,会呈现在元素框之外。 |
- 边框颜色
outline
input
文本输入框自带边框,且样式丑陋,我们可以通过outline
修改边框
1 | outline:1px solid #ccc; |
样式重置
早期的网页没有css
样式,为了界面美观,很多元素自带margin、padding
等样式,但这些样式在不同浏览器解析的值都不一样,需要将css
样式重置,保证在不同浏览器显示一致。
1 | 清除元素的margin和padding |
盒模型样式
- 块状元素、内联元素和内联块状元素。
块级元素:
- 每个块级元素都从新的一行开始,并且其后的元素也另起一行。
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- 元素宽度在不设置的情况下,是它本身父容器的100%,除非设定一个宽度。
行内元素:
- 和其他元素都在一行上
- 元素的高度、宽度、行高及顶部和底部边距不可设置
- 元素的宽度就是它包含的文字或图片的宽度,不可改变。
行内块状元素:
- 和其他元素都在一行上
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- 元素分类转换
display
block
:将元素转换为块级元素
inline
:将元素装换为行级元素
inline-block
:将元素转换为内联块元素
none
: 将元素隐藏
- 描边
border
1 | border:2px solid #f00; |
线条的样式:
1 | dashed(虚线)| dotted(点线)| solid(实线)。 |
css
样式中允许只为一个方向的边框设置样式:
1 | 下描边border-bottom:1px solid red; |
- 间距
margin
1 | div{margin:20px 10px 15px 30px;} |
- 内填充
padding
1 | padding:10px |
浮动float
- 浮动原理
浮动使元素脱离文档普通流,漂浮在普通流之上的。
浮动元素依然按照其在普通流的位置上出现,然后尽可能的根据设置的浮动方向向左或者向右浮动,直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止,且允许文本和内联元素环绕它。
浮动会产生块级框(相当于设置了
display:block
),而不管该元素本身是什么。
- 清除浮动带来的影响
clear
清除浮动:
1 | none : 不清除(默认值)。 |
- 利用伪类实现清除浮动
1 | .clearFix { |
定位position
- 定位功能可以让布局变的更加自由。
- 层模型–绝对定位(相对于父类)
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
1 | #box_relative { |
如下图所示:
如果想为元素设置层模型中的绝对定位,需要设置
position:absolute
(绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom
属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body
元素,即相对于浏览器窗口。
- 层模型–相对定位(相对于原位置)
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
1 | #box_relative { |
如下图所示:
如果想为元素设置层模型中的相对定位,需要设置
position:relative
(相对定位),它通过left、right、top、bottom
属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)
方式生成一个元素(并且元素像层一样浮动了起来),然后相对于原位置移动,移动的方向和幅度由left、right、top、bottom
属性确定,偏移前的位置保留不动。
- 层模型–固定定位(相对于网页窗口)
1 | position:fixed |
与
absolute
定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed
属性功能相同。
浏览器默认样式
- 页边距
IE
默认为10px
,通过body
的margin
属性设置
要清除页边距一定要清除这两个属性值
1 | body { margin:0; padding:0;} |
- 段间距
IE
默认为19px
,通过p
的margin-top
属性设置
p
默认为块状显示,要清除段间距,一般可以设置
1 | p { margin-top:0; margin-bottom:0;} |
html5
HTML5 的优势
- 解决跨浏览器,跨平台问题
- 增强了
web
的应用程序
HTML5 废弃元素
1 | frame frameset noframes |
HTML5 新增元素
1 | <header> 用于定义文档或节的页眉 |
HTML5 表单相关元素和属性
1 | input新增type类型 |
1 | HTML5 input新增属性 |
css3
CSS3 新增选择器
- 兄弟选择器
元素 1 ~ 元素 2
第1个元素之后,所有的元素2都会被选择,且这些元素和第一个元素拥有同一个父元素(两个元素之间不一定要相邻)。
- 属性选择器
E[attribute^=value]
用于选取带有以指定值开头的属性值的元素E[attribute$=value]
用于选取属性值以指定值结尾的元素E[attribute*=value]
用于选取属性值中包含指定值的元素,位置不限,也不限制整个单词
- 伪类选择器
:root
选择文档的根元素,HTML 里,永远是<html>
元素:last-child
向元素添加样式,且该元素是它的父元素的最后一个子元素:nth-child(n)
向元素添加样式,且该元素是它的父元素的第 n 个子元素:nth-last-child(n)
向元素添加样式,且该元素是它的父元素的倒数第 n 个子 元素:only-child
向元素添加样式,且该元素是它的父元素的唯一子元素:first-of-type
向元素添加样式,且该元素是同级同类型元素中第一个元 素:last-of-type
向元素添加样式,且该元素是同级同类型元素中最后一个 元素:nth-of-type(n)
向元素添加样式,且该元素是同级同类型元素中第 n 个元 素:nth-last-of-type(n)
向元素添加样式,且该元素是同级同类型元素中倒数第 n 个元素:only-of-type
向元素添加样式,且该元素是同级同类型元素中唯一的元素:empty
向没有子元素(包括文本内容)的元素添加样式
- 伪元素选择器
:enabled
向当前处于可用状态的元素添加样式,通常用于定义表单的样式或者超链接的样式:disabled
向当前处于不可用状态的元素添加样式,通常用于定义表单的 样式或者超链接的样式:checked
向当前处于选中状态的元素添加样式:not(selector)
向不是selector
元素的元素添加样式:target
向正在访问的锚点目标元素添加样式::selection
向用户当前选取内容所在的元素添加样式
CSS3 新增属性
- 新增背景属性
background-clip
设置背景覆盖范围border-box/paddingbox/content-box
background-origin
设置背景覆盖的起点border-box/paddingbox/content-box
background-size
设置背景的大小cover/contain/长度/百分比
- 新增的字体文本相关属性
text-overflow
设置当文本溢出元素框时处理方式clip/ellipsis
word-wrap
规定单词的换行方式normal/break-word
word-break
规定自动换行的方式normal/break-all/keep-all
- 新增盒模型属性
box-shadow
阴影h-shadow v-shadow <br />blur spread color inset
resize
调整尺寸none/both/horizontal
outline-offset
轮廓的偏移量length/inherit
新增变形动画属性
transform
translate(x,y)
rotate(angle)
scale(x,y)
skew(angleX ,angleY)
transform-origin
表示元素旋转的中心点,默认值为 50% 50%。
第一个值表示元素旋转中心点的水平位置,它还可以赋值
left、right、center
、长度、百分比第二个值表示元素旋转中心点的垂直位置,它还可以赋值
top、bottom、 center
、长度、百分比。
3D 变形属性
transform 3D
函数
transform
增加了三个变形函数:
rotateX
:表示元素沿着x
轴旋转。rotateY
:表示元素沿着y
轴旋转。rotateZ
:表示元素沿着z
轴旋转。
transform-style
用来设置嵌套的子元素在3D
空间中显示效果。perspective
设置成透视效果,透视效果为近大远小。perspective-origin
设置3D
元素所基于的x
轴和y
轴,改变3D
元素的底部位置,该属性取值同transform-origin
,默认值为50% 50%。
backface-visibility
用来设置当元素背面面向屏幕时是否可见,通常用于设置 不希望用户看到旋转元素的背面。
它的属性值有visible
(背面可见,默认值)、 hidden
(背面不可见)两个。
CSS3 的过渡属性
transition-delay
设置过渡的延迟时间transition-duration
设置过渡的过渡时间transition-timing-function
设置过渡的时间曲线transition-property
设置哪条CSS
使用过渡transition
一条声明设置 所有过渡属性
CSS3 的动画属性
animation
@keyframes
定义动画选择器animation-name
使用@keyframes
定义的动画animation-delay
设置动画的持续动画时间animation-timing-function
设置动画的时间曲线animation-iteration-count
设置动画播放次数animation-direction
设置动画反向播放animation-play-state
设置动画播放状态transition
一条声明设置所有动画属性
CSS3 新增多列属性
column-count
设置元素应该被分隔的列数column-width
设置列的宽度columns
一条声明设置列宽和列数column
column-gap
设置列之间的间隔column-span
设置元素应该横跨的列数column-rule-style
设置列之间间隔的样式column-rule-color
设置列之间间隔的颜色column-rule-width
设置列之间间隔的宽度column-rule
一条声明设置列之间间 隔所有属性
CSS3新增单位
px、em、rem、vh、 vw和%
移动端长度单位
使用CSS单位
px、em、rem、vh、 vw
等实现页面布局。
px
:绝对单位,页面按精确像素展示em
:相对单位,基准点为父节点字体的大小,如果自身定义了font-size
按自身来计算(浏览器默认字体是16px
),整个页面内1em
不是一个固定的值。
em
会根据父级元素的大小而变化,但是如果嵌套了多个元素,要计算它的大小,是很容易出错的,这样就引申出了rem
。
rem
:相对单位,可理解为”root em”
, 相对根节点html
的字体大小来计算,CSS3
新加属性。%
:%
百分比,相对长度单位,相对于父元素的百分比值vw、vh、vmin、vmax
主要用于页面视口大小布局
vw:viewpoint width
,视窗宽度,1vw
等于视窗宽度的1%。
vh:viewpoint height
,视窗高度,1vh
等于视窗高度的1%。
vmin:vw
和vh
中较小的那个。vmax:vw
和vh
中较大的那个。
弹性盒模型
弹性盒模型的语法基础概念
任何一个容器都可以指定弹性布局
JavaScript
JavaScript基础
- 外部引入
js
文件:通过<script src="main.js"></script>
- 关键词
- 变量名大小写敏感
- 命名规范
JavaScript数据类型
- 字符串
(String)
- 数字
(Number)
- 布尔值
(Boolean)
- 未定义
(Undefined)
1 | //undefined有两种结果 |
undefined
,表示未定义或只声明未给值的变量
- 对象
(Object)
js
中内置了如下的对象:
Object
是所有JS对象的超类(基类),JS中的所有对象都是继承自Object对象的Array
数组对象 定义数组属性和方法Number
数字对象Boolean
布尔对象 布尔值相关Error
错误对象 处理程序错误Function
函数对象 定义函数属性和方法Math
数学对象Date
日期对象RegExp
对象正则表达式对象 定义文本匹配与筛选规则String
字符串对象 定义字符串属性和方法
算术运算
1 | var y = 3; |
强制转换
- 字符串转数字
parseInt() parseFloat() isNaN()
- 数字转为字符串
toString()
赋值运算
- 复合的赋值运算符
+= -= *= /= %=
关系运算
- 关系运算:
> < <= >= != == === ==和=== !=和!==
“=”、“==”、“===”
有什么区别?
=
是赋值符号==
忽略数据类型的判断 是否相等===
数值和数据类型都要相等才判断为相等
逻辑运算
- 逻辑与
&&
- 逻辑或
||
- 逻辑非
!
- 复合逻辑表达式
三元运算
1 | 条件运算符?: |
分支循环
程序运行的三大结构:顺序结构、选择结构、循环结构
- 单分支选择:
if
语句 - 双分支选择:
if-else
语句 - 多分支语句:
if-else if-else
语句
switch
语法格式
1 | switch(num){ //表达式 |
while
语法格式:
while
循环的特点:不知道具体执行的次数时,使用最合适
1 | while(条件表达式){ |
do-while
语法格式:
1 | do{ |
do-while
是先执行循环体,再检测循环条件。do-while
能保证循环体至少执行一次。- 其他循环无法保证循环至少执行一次。
for
1 | for(1循环变量初始化;2循环条件判断;4循环变量的修改){ |
break和continue
break
退出循环continue
跳过本次循环,继续下一次循环
数组
- 数组定义
1 | var arr = new Array(); |
- 字面量方式定义
1 | var arr = ["1","2"]; |
- 向数组赋值
1 | arr[0] = "1"; |
- 数组索引
1 | arr[0]+","+arr[1] |
- 数组长度
1 | //语法 |
数组方法
indexOf
数组可以通过indexOf()
来搜索一个指定的元素的位置,如未找到返回 -1
concat
concat()
方法把当前的 数组 和 另一个 数组连接起来,并返回一个新的 数组
1 | var newArr = arr1.concat(arr2,"dada"); |
push和pop
push()
向数组的末尾添加若干元素,pop()
则把 数组的最后一个元素删除掉
1 | arr.push("a","b"); |
unshift和shift
unshift()
向数组前面添加若干元素,shift()
则把数组的第一个元素删除掉
1 | arr.unshift("a","b"); |
slice
slice()
截取数组的部分元素,然后返回一个新的数组
1 | console.log(arr.slice(0,3)); //从索引0开始,到索引3结束,但不包括3 |
如果不给
slice()
传递任何参数,就会从头到尾截取所有元素。利用这一点,可以很容易的复制一份新的数组
sort
sort()
可以对当前数组排序
1 | var arr = ["b","c","a"]; |
reverse
reverse()
把整个数组的元素给掉个个
join
join()
方法把数组的每个元素用指定的字符串连接起来
1 | var arr = ["a","b","c"]; |
splice
可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素
二维数组
1 | var arr = [[1,2,3],["a","b","c"],"dadaqianduan"]; |
字符串
- 字符串属性
length
-字符串的长度属性 slice()
1 | slice(start[,end]),start--开始索引 end--结束索引 |
substr()
1 | substr(start[,length]),start:开始,取length个字符 |
split()
split([separator[,limit]])
,按条件分割字符串,返回数组
indexOf()
在父串中首次出现的位置,从0
开始!没有返回-1
lastIndexOf()
倒序查找
charAt(index)
charAt(index)
指定索引的字符
toLowerCase()
转小写
toUpperCase()
转大写
正则表达式
创建正则表达式
1 | var reg = new RegExp("a","i"); |
元字符
模式修饰符
正则方法
test
方法
检索字符串中指定的值。
exec
方法
该方法用于检索字符串中的正则表达式的匹配,该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null
。
支持正则的 String方法
js对象
定义对象
1 | //使用new运算符 |
对象的数据访问
1 | //用.语法 |
JSON
json(JavaScript Object Notation)
,是一种轻量级的数据交换格式。
1 | var man = { |
内置对象
Object
是所有JS对象的超类(基类),JS中的所有对象都是继承自Object对象的Array
数组对象Number
数字对象Boolean
布尔对象Error
错误对象Function
函数对象Math
数学对象Date
日期对象RegExp
对象正则表达式对象String
字符串对象
Math 方法
abs()
绝对值 (去除正负)random()
随机数,0-1
之间的随机数,1
不会出现round()
四舍五入floor(x)
下舍入(向下取整)ceil(x)
上舍入(向上取整)max(x,y)
x 和 y
中的最大值min(x,y)
x 和 y
中的最小值cos(x)
x
的余弦sin(x)
x
的正弦sqrt(x)
返回x
的平方根pow(3,4)
返回3
的4
次方
Date 方法
getFullYear()
返回 年(4位)getMouth()
返回 月(0–11)getDate()
返回 日期getDay()
返回 星期 (0-6)getHours()
返回 小时getMinutes()
返回 分钟getSeconds()
返回秒getTime()
返回1970年1月1日午夜到指定日期(字符串)的毫秒数setFullYear()
设置 年份setMouth()
设置 月setDate()
设置 天setHours()
设置小时setMinutes()
设置 分钟setSeconds()
设置 秒setTime()
使用毫秒的形式设置时间对象
1 | //判断闰年 |
面向对象是一种编程思想
- 类是一个抽象的概念
- 对象:具体的事物
- 类是对象的抽象,对象是类的具体实例
- 类不占用内存,对象占用内存空间
- 对象的访问 声明对象
- 遍历对象 –
for in
循环
定义对象
- 字面量创建
- 工厂模式
1 | // 工厂模式中的函数,首字母大写 |
- 构造函数
Javascript
提供了一个构造函数(Constructor)
模式。
所谓”构造函数”,其实就是一个普通函数,但是内部使用了this
变量。
对构造函数使用new
运算符,就能生成实例,并且this
变量会绑定在实例对象上。
构造函数首字母大写
构造函数中的this
,指向的 实例化的对象
1 | function Cat(n,c){ |
生成实例对象
1 | var cat1 = new Cat("dadaqianduan","黄色") |
实例:自动含有一个
constructor
属性,指向它们的构造函数
1 | alert(cat1.constructor == Cat); //true |
Javascript
还提供了一个instanceof
运算符
验证 原型对象 与 实例对象 之间的关系。
1 | var txt = 'dadaqianduan'; |
原型和原型链
构造函数都有一个
prototype
属性,指向 另一个对象 。这个对象的 所有属性和方法,都会被构造函数的实例继承。
所有的函数都是 Function
的实例。
在构造函数上都有一个 原型 属性prototype,prototype
也是一个对象;这个对象上有一个 constructor
属性,该属性指向的就是构造函数。
实例对象上有一个_proto_
属性,该属性也指向原型对象,该属性不是标准属性,不可以用在编程中,该属性用于浏览器内部使用。
constructor
constructor
是构造函数 创建的实例的属性,该属性的作用是 指向 创建当前对象的 构造函数。
1 | son.constructor == parent; // true |
每个原型都有一个constructor
属性,指向该关联的构造函数。
1 | function Person() { |
关系图:
区分一下普通对象和函数对象
1 | function f1(){}; |
- 在
JavaScript
中,原型是一个对象,原型的作用是 实现对象的继承。 - 在
JavaScript
中的所有函数对象中,都存在一个属性,prototype
,该属性对应当前对象的原型。 - 所有的
JavaScript
对象,都存在一个_proto_
属性,_proto_
属性指向实例对象的构造函数的原型。
1 | var p = new Person(); // 实例对象 |
p
是实例对象,Person
是p
的构造函数。p
的_proto_
属性 指向 构造函数Person
的原型。
js
是如何通过原型进行继承的:
1 | var parent = function(name) { |
son
继承了parent
的原型中的函数属性getName
原型链
除了
Object
的prototype
的原型是null
外,所有的对象 和 原型 都有自己的原型,对象的原型 指向 原型对象。
在层级多的关系中,多个原型层层相连 则 构成了 原型链。
在查找一个对象的属性时,如当前对象找不到该属性,就会沿着原型链一直往上查找,直到找到为止,如果到了原型链顶端,没找到,则返回undefined
原型
- 所有引用类型都有一个
__proto__
属性 - 所有函数都有一个
prototype
属性 - 所有引用类型的
__proto__
属性指向它构造函数的prototype
构造函数和实例原型之间的关系:
Person
(构造函数) 的 prototype
指向 Person.prototype
__proto__
每个对象,除null
外,都有的属性叫__proto__
,这个属性会指向该对象的原型。
1 | function Person() { |
关系图:
关系图:
关系图:
梳理:
写一个构造函数Person
,一般构造函数区别与普通函数要求首字母大写:
1 | function Person(){} |
prototype
原型
原型 是 一个对象,在原型prototype
上定义的属性,通过“继承”,实现 实例 也有这个属性。
继承 是在 new
操作符内部实现的。
构造函数 内部 有个
prototype
的属性,通过这个属性就能访问到 原型。
Person
是构造函数,Person.prototype
是原型。
- 实例
有构造函数,可以在原型上创建可继承的属性,通过new
操作符创建实例:
1 | function Person(){} |
proto
实例通过_proto_
访问到原型。
1 | function Person() {} |
constructor
构造函数
原型也可以通过
constructor
访问到构造函数
1 | function Person() {} |
小结
- 所有引用类型(函数,数组,对象)都拥有
__proto__
属性。 - 所有函数拥有
prototype
属性。 - 每个实例对象(
Object
)都有一个私有属性,为__proto__
指向它的构造函数的原型对象(prototype
)。该原型对象也有一个自己的原型对象__proto__
,层层向上直到一个对象的原型对象为null
,null
没有原型,并作为这个原型链中的最后一个环节。
常用的JavaScript设计模式
百度百科:
设计模式(Design pattern)
是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。
使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问,设计模式于己于他人于系统都是多赢的;设计模式使代码编制真正工程化;设计模式是软件工程的基石脉络,如同大厦的结构一样。
单体模式
单体是一个用来划分 命名空间并将一批相关的属性和方法组织在一起的对象,如果它可以被实例化,那么它只能被实例化一次。
特点:
(1)可以来划分命名空间,从而清除全局变量所带来的危险。
(2)利用分支技术来来封装浏览器之间的差异。
(3)可以把代码组织的更为一体,便于阅读和维护。
工厂模式
工厂模式的定义:
提供创建对象的接口,意思就是根据领导(调用者)的指示(参数),生产相应的产品(对象)。
- 创建一个对象常常需要复杂的过程,所以不适合在一个复杂的对象中。
- 创建对象可能会导致大量的重复代码,也可能提供不了足够级别的抽象。
工厂就是把成员对象的创建工作转交给一个外部对象,好处在于消除对象之间的耦合(也就是相互影响)。
分类:
简单工厂模式:使用一个类,通常为单体,来生成实例。
复杂工厂模式定义:将其成员对象的实列化推到子类中,子类可以重写父类接口方法以便创建的时候指定自己的对象类型。
父类只对创建过程中的一般性问题进行处理,这些处理会被子类继承,子类之间是相互独立的,具体的业务逻辑会放在子类中进行编写。
应用场景:
以下几种情景下工厂模式特别有用:
(1)对象的构建十分复杂;
(2)需要依赖具体环境创建不同实例;
(3)处理大量具有相同属性的小对象。
单例模式
单例模式定义了一个对象的创建过程,此对象只有一个单独的实例,并提供一个访问它的全局访问点。也可以说单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。
使用闭包方式来实现单例:
1 | var single = (function(){ |
unique
是返回对象的引用,而getInstance
是静态方法获得实例。Construct
是创建实例的构造函数。
可以通过 single.getInstance()
来获取到单例,并且每次调用均获取到同一个单例。这就是 单例模式 所实现的效果。
应用场景:
- 单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如全局缓存、浏览器的
window
对象。 - 借助单例模式,可以把代码组织的更为一致,方便阅读与维护。
函数
函数的定义
1 | // 使用关键字function 定义函数 |
局部变量和全局变量
- 变量的作用域
- 函数体内的变量:局部变量,仅在函数体内可以使用
- 函数体外的变量:全局变量,对全局可见
- 局部变量
1 | function da(){ |
- 全局变量
1 | var da = "我是全局变量"; |
典型错误,不使用var
声明的变量也是全局变量(不建议这样用)
1 | function dada(){ |
返回值
return
的含义
1 | //理解返回值 |
return
使用方法
return
只能返回一个数据- 如果函数中没有
return
,则返回undefined
return
可以用来结束一个函数
1 | function Fun(){ |
1 | function fn(){ |
匿名函数
1 | //使用函数表达式定义函数 |
自运行函数
示例:
1 | function fn(){ |
闭包
闭包 (closure)
有权访问另外一个函数作用域中的变量的函数。
创建闭包的常见方式有:
- 在一个函数内部创建另外一个函数,并且把这个函数
return
出去。 - 用函数为元素绑定事件,当事件发生时,还可以操作该函数中的变量。
特性
- 可以读取其它函数内部的变量
- 让这些变量的值始终保持在内存中
示例:
1 | //方式1----函数内部return一个函数 |
1 | //方式2--函数内部为绑定事件 |
1 | //方式3--函数内部将变量作为回调函数的参数 |
BOM
BOM概述
BOM(browser object model)
浏览器对象模型
BOM
提供了独立于内容而与浏览器窗口进行交互的对象、载入页面的相关信息,其核心对象是window
对象
BOM
没有相关标准,每个浏览器都定义了自己的属性,并且,都有其自己对BOM
的实现方式
W3C
虽然没有为BOM
统一制定标准,但是其中的窗口对象、导航对象等,因功能趋同,实际上已经成为默认的标准
window方法
alert()
提示框confirm()
带有确认 取消 按钮的提示框prompt()
带有可输入内容的文本域的提示框setInterval()
间隔定时器,可按照指定的周期(以毫秒计)来调用函数或计算表达式setTimeout()
超时定时器,在指定的毫秒数后调用函数clearInterval()
清除间隔定时器clearTimeout()
清除超时定时器requestAnimationFrame
帧定时器
frames [ ]
框架集
把浏览器窗口分成几个窗框,每个窗框同时取得多个URL
地址,显示不同网页内容。
history 历史记录
window.history.go(1)
前进(跳转)window.history.go(-1)
后退(跳转)window.history.forward()
前进window.history.back()
后退
location 定位
window.location.href='http://www.baidu.com/'
页面跳转window.location.reload()
页面重载
navigator 导航
window.navigator.userAgent
浏览器类型、版本、操作系统类型、浏览器引擎类型等信息
screen 屏幕
window.screen.width
返回当前屏幕宽度(分辨率值)window.screen.height
返回当前屏幕高度(分辨率值)
document 文档
window
的document
的属性,代表所有html
的元素,这部分是js
主要操作的部分,因此这部分必须规范,才能进行统一开发。因此,W3C
将这部分进行了规范—DOM
标准。
DOM
DOM(document object model )
文档对象模型,定义了表示和修改文档所需的对象、行为和属性,以及这些对象之间的关系。
DOM对象方法
getElementById(id)
通过id
获取DOM
对象(对象)getElementsByTagName(tag)
通过标签获取DOM
对象(“类似数组”对象)getElementsByName(name)
通过name
获取DOM
对象(“类似数组”对象)getElementsByClassName(class)
通过class
获取DOM
对象(IE8以下不支持)
操作DOM间的关系
createElement(tag)
创建元素removeChild(对象)
删除元素appendChild(对象)
插入元素replaceChild(替换对象,被替换对象)
替换元素insertBefore(对象,目标对象)
前部插入
appendChild replaceChild insertBefore
都具有移动对象的功能
节点属性:
1 | 父节点 parentNode |
克隆节点:
1 | cloneNode( 布尔值 ) |
DOM节点属性
setAttribute("属性名",属性值)
设置属性getAttribute( 属性名 )
获取属性removeAttribute( 属性名 )
删除属性:hasAttributes(属性名)
判断属性是否存在(返回ture/false
)
事件
1 | var oDiv=document.getElementById('box'); |
addEventListener( )
增加事件监听removeEventListener( )
删除事件监听
事件分类
window
事件
onload
加载(某个页面或图像被完成)onunload
用户退出页面onresize
窗口或框架被调整尺寸onscroll
滚动条事件
- 鼠标事件
1 | onclick 鼠标点击 |
- input事件
1 | onblur 元素失去焦点。 |
- 键盘事件
1 | onkeydown 按键按下 |
- form事件
1 | onreset 表单重置(重置按钮) |
事件对象
获取事件数据,不同的事件会有不同数据
1 | oDiv.onclick=function(ev){ |
事件流
- 对象的默认行为
- 阻止默认行为:
event.preventDefaut()
事件流
事件流方向:捕获 → 事件目标→冒泡
- 事件捕获
- 事件目标
- 事件冒泡 与 阻止事件冒泡
事件目标
1 | ev.targrt |
事件委派(delegate)
原理: 将事件绑定在父级上,利用事件冒泡原理,通过判断事件的“目标元素”来触发父级上绑定的事件
作用
- 不用分别为子元素绑定事件
- 为未知元素绑定事件
事件监听
可以为一个元素,同时绑定多个事件
1 | obj.addEventListener(事件,回调函数,冒泡/捕获) ; |
jQuery
1 | 一款轻量级的js库 |
jQuery 选择器
id
选择器
1 | $('#box') |
class
选择器
1 | $('.box') |
- 标记选择器
1 | $('p') |
*
代表所有标签
属性选择器
[attribute]
匹配包含给定属性的元素[attribute=value]
匹配给定的属性是某个特定值的元素[attribute!=value]
匹配给定的属性不是某个特定值的元素[attribute^=value]
匹配给定的属性是以某些值开始的元素[attribute$=value]
配给定的属性是以某些值结尾的元素[attribute*=value]
匹配给定的属性是以包含某些值的元素
位置选择器
:first
匹配第一个元素
:last
获取最后一个元素
:not
去除所有与给定选择器匹配的元素
:even
匹配所有索引值为偶数的元素,从 0 开始计数
:odd
匹配所有索引值为奇数的元素,从 0 开始计数
:eq
匹配一个给定索引值的元素
:gt
匹配所有大于给定索引值的元素
:lt
匹配所有小于给定索引值的元素
后代选择器
1 | $("选择器1 选择器2 ……") |
子代选择器
1 | $("选择器1>选择器2>……") |
选择器对象
1 | $("选择器").each(function(index){this}) 选择器对象的遍历 |
子元素
1 | :first-child 匹配第一个子元素 |
表单
1 | :input 匹配所有 input, textarea, select 和 button 元素 |
表单对象属性
1 | :enabled 匹配所有可用元素 |
DOM操作
- 查找获取
1 | text() - 设置或返回所选元素的文本内容 |
- 内部插入
1 | append() 向每个匹配的元素内部追加内容 |
- 外部插入
1 | after() 在每个匹配的元素之后插入内容 |
- 包裹
1 | wrap() 把所有匹配的元素用其他元素的结构化标记包裹起来 |
- 替换
1 | replaceWith() 将所有匹配的元素替换成指定的HTML或DOM元素 |
- 删除
1 | empty() 删除匹配的元素集合中所有的子节点 |
- 克隆
1 | clone() 克隆匹配的DOM元素并且选中这些克隆的副本 |
JQuery 事件
页面载入
1 | $(document).ready(function(){ |
事件绑定
1 | $("#box").on("click",function(){ |
容器适应
获取元素的宽高有以下几种方法:
1 | $(选择器).width() | innerWidth() | outerWidth() |
1 | innerWidth()和innerHeight()是指元素里面内容的宽高加上内边距的宽高; |
获取窗口的宽高的方法如下:
1 | $(window).width() |
标签样式操作
1 | $(选择器).css (样式属性名[,值]) 方法设置或返回被选元素的一个或多个样式 属性 |
滑动
1 | show() 显示元素 |
自定义动画
1 | animate() 自定义动画 |
AJAX
1 | $.ajax() |
1 | $.get() 通过远程 HTTP GET 请求载入信息 |
工作原理
AJAX = 异步 JavaScript 和 XML
在浏览器中输入
url
地址请求服务器时,是通过Ajax
发送http
请求给服务器,服务的响应结果也是先返回给Ajax
,先Ajax
处理之后在返回给浏览器显示在页面。
XMLHttpRequest对象
1 | //第一步: |
XML和HTML的区别
get() 和post()
1 | $.get(url,data,callback,dataType) |
AJAX
工作原理
Ajax
的基本格式如下:
1 | $.ajax({ |
HTTP
HTTP
(超文本传输协议)是一种通信协议,它允许将超文本标记语言(HTML
)文档从Web
服务器传送到客户端的浏览器。
HTTP消息结构
request line
请求行:第一行必须是请求行,用来说明请求类型、要访问的资源以及使用的HTTP
版本。
header
请求头:用来说明服务器要使用的附加信息。
blank line
空白行:请求头部与请求体之间必须有一个空白行,必不可少
body
请求体:也叫请求正文,可以添加任意的其他数据
状态行:
1 | Host 接受请求的服务器地址,可以是:IP:端口 或 域名 |
url请求过程
- 首先客户端与服务器需要建立连接。
- 建立连接后,客户端发送一个请求给服务器,请求方式的格式为:统一资源标识符(
URL
)、协议版本号,客户端信息和可能的内容。 - 服务器接到请求后,给予相应的响应信息,其格式为一个状态行,包括信息的协议版本号、一个成功或错误的代码(
status Code
状态码),后边服务器信息、实体信息和可能的内容。 - 客户端接收完, 服务器所返回的信息后,与服务器断开连接。
如果在以上过程中的某一步出现错误,那么产生错误的信息将返回到客户端。对于用户来说,这些过程是由
HTTP
自己完成的,用户只要用鼠标点击,等待信息显示就可以了。
预加载
预加载:将所有所需的资源提前请求加载到本地,后面在需要使用就直接从缓存中存取资源
- 使用
image
对象
1 | <img src="" style="display:none"/> |
- 使用
image
对象
1 | var image = new Image(); |
- 使用
XMLHttpRequest
对象
1 | xmlhttprequest.onreadystatechange=callback; |
懒加载
首屏加载,技术上显示要用的技术就是图片懒加载,即到可视区域再加载。
性能优化
JavaScript代码优化
- 代码与结构分离
- 样式与结构的分离
- 数据与代码分离
AMD:Asynchronous Module Definition
,即异步模块加载机制。CMD:Common Module Definition
,即通用模块定义规范- 导出
(export)
与导入(import)
两个模块
提升文件加载速度
- 合并
JavaScript
代码,尽可能少的使用script
标签。 - 无堵塞加载
JavaScript
。 - 动态创建
script
标签来加载
webpack
webpack
是一个module bundler
(模块构建工具),由于 JavaScript
应用程序的复杂性不断增加,构建工具已成为 web
开发中不可或缺的一部分。它帮助我们去打包、编译和管理项目需要的众多资源文件和依赖库。
webpack
支持CommonJS
、AMD和ES6
模块系统,并且兼容多种JS
书写规范,可以处理模块间的依赖关系,所以具有更强大的JS
模块化的功能,它能压缩图片,对CSS、js
文件进行语法检查、压缩、编译打包。
webpack的特点
- 可以很好的用于单页应用
- 同时支持
require()
和import
模块语法 - 允许非常前沿的
code splitting
(代码分割) 特性 - 热加载可以让
React、Vue.js
和其它类似框架的本地开发更快 - 它是目前最受欢迎的构建工具
webpack的缺点
- 不适合
web
开发的初学者 - 对于
CSS
、图片和其它非JS
资源文件时,需要先混淆处理 - 文档不够完善
- 变化很大,不同版本的使用方法存在较大差异
安装
- 全局安装:
1 | //安装全局webpack |
webpack基本应用
SPA(single page web application)
单页应用程序,是webpack
打包的典型应用
示例,主要的几个部分组成:
1 | index.html 主文件 |
示例:
1 | //a.js |
1 | //b.js |
1 | //index.js |
dist
文件夹(存放打包后的文件,可以先不创建,打包时可以自动创建)-dis,dist,bulit
打包:
1 | webpack --mode development |
配置文件入门
默认的配置文件名为:webpack.config.js
核心概念
一个配置文件的基本结构如下:
1 | //配置项 |
1 | entry 入口 定义入口文件,默认入口文件:./src/index.js |
设置配置文件自动完成:
1 | // webpack是基于node构建的,只支持CommonJS模块 |
修改webpack.json
文件
在webpack.json
中的"scripts"
下增加:
1 | "scripts": { |
执行打包
1 | npm run dev |
entry 和 output
entry
入口配置 是指页面中的入口文件。也就是打包从哪个文件开始。默认入口文件:./src/index.js
output
出口配置 是指生成的文件输出到哪个地方去,默认出口文件:./dist/main.js
,主要有以下属性:
1 | path 输出路径 |
示例:
1 | //入口 |
module
webpack
只能打包js
文件(只理解 JavaScript
语法),无法识别其他语法的文件,如果要让webpack
打包其他文件,首先需要让webpack
识别不同文件,这就需要特别的模块,这种模块统称为loader
。
loader
分类
1 | 转换编译 script-loader,babel-loader,ts-loader,coffee-loader |
常用loader
1 | css-loader 解析css语句 |
css loader
1 | //index.js |
安装loader
(loader
也是依赖包,需要安装)
1 | npm install css-loader --save-dev |
在module
中定义ccs
模块相关的配置:
1 | module: { |
babel loader
babel
是一个 js
编译器,它通过语法转换器支持最新版本的 JavaScript
(包括JSX、TypeScript
等新语法)。 这些插件允许你立刻使用新语法,无需等待浏览器支持。
使用Babel
首先要配置 .babelrc
文件,该文件用来设置转码规则和插件(json
格式),存放在项目的根目录下。
tips
:在linux
系统中,rc
结尾的文件通常代表运行时自动加载的文件、配置等等。
在.babelrc
配置文件中,主要是对预设(presets
) 和 插件(plugins
) 进行配置。.babelrc
配置文件一般为如下:
1 | { |
预设 对
js
最新的语法糖进行编译,并不负责转译新增的api
和全局对象。
插件 控制如何转换代码,
babel
默认只转换新的js
语法,而不转换新的API
plugins
插件(plugins
)可以扩展webpack
的功能,loader
不能做的处理都能交给plugin
来做。
如:HtmlWebpackPlugin
插件简化了HTML
文件的创建,可以通过模板文件,生成一个HTML
文件
resolve
resolve
(译:解析)配置webpack
如何寻找模块对应的文件。
1 | alias (译:别名)通过别名将原来导入路径映射成一个新的导入路径 |
其他配置项示例:
1 | devtool 是否生成以及如何生成sourcemap |
webpack-dev-server
webpack-dev-server
是一个小型的web
服务器,可以自动监视项目文件的变化,自动刷新浏览器,其HMR
(Hot Module Replacement
热模块替换)方式只替换更新的部分,而不是重载页面,大大提高了刷新效率。
1 | 需要本地安装 webpack和webpack-cli |
webpack.config.js
配置文件:
1 | let path=require("path"); |
webpack-dev-serve.cmd
是定义在.bin
目录中的
1 | "scripts": { |
运行
1 | npm start |
vue
MVC模式
MVC
模式是移动最广泛的软件架构之一,把应用程序强制性地划分为三部分:模型(Model
)、视图(View
)和控制器(Controller
)。
MVVM模式
MVVM
模式是把MVC
模式的Controller改成ViewModel
。View
的变化会自动更新ViewModel,ViewModel
的变化也会自动同步到View
上显示。
基础语法
示例:
1 | el 把 Vue 实例挂载到DOM元素上,通过id绑定html元素 |
实例属性/方法
1 | vm.$el Vue 实例使用的根 DOM 元素 |
方法
1 | vm.$emit() 子组件可以使用 $emit 触发父组件的自定义事件 |
生命周期
4个阶段:创建→挂载→更新→销毁
1 | beforeCreate 实例创建前 |
计算属性
多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数。
计算属性具有缓存
数组的更新检查
1 | push()、pop()、shift()、unshift() |
事件对象
1 | event.type 触发的事件类型 |
Vue组件
- 创建组件
1 | let myTemp={ |
- 注册组件
1 | //在components配置项中注册组件 |
- 使用组件
1 | <!--在Vue实例中使用组件--> |
- 事件通信
- 父子组件之间的数据操作,是通过
props
属性和$emit()
方法来实现的
路由使用
定义路由包括路由路径(
path
)、路由名称(name
)、路由组件对象(component
)
1 | routes: [ |
- 动态路由
1 | routes: [ |
1 | /user/:username |
路由导航
- 路由导航守卫
什么是路由导航守卫可以简单理解为路由组件的生命周期回调函数。
1 | // 路由导航守卫 |
- 编程式路由导航
1 | methods: { |
- push()
跳转到指定的路由地址, 并把当前地址写入到history中,参数可以是字符串路径或描述地址信息的对象
1 | 字符串 router.push('home') |
replace( )
:跳转到指定路由,它不会向history
添加新记录,而是替换掉当前的history
记录。全局路由导航守卫
示例:
1 | // 全局路由导航守卫 |
嵌套路由
1 | children: [ |
命名视图
使用
<router-view>
可以使用name
属性为其设置名称,即命名路由的视图简称命名视图。
示例:
1 | <router-view/> |
回看笔者往期高赞文章,也许能收获更多喔!
- Vue.js笔试题解决业务中常见问题
- 【初级】个人分享Vue前端开发教程笔记
- 达达前端个人web分享92道JavaScript面试题附加回答
- 【图文并茂,点赞收藏哦!】重学巩固你的Vuejs知识体系
- 【思维导图】前端开发-巩固你的JavaScript知识体系
- 14期-连肝7个晚上,总结了计算机网络的知识点!(共66条)
❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更好的文章