html5&&css3新特性

  • html5

HTML5 新元素(HTML5提供了新的元素来创建更好的页面结构)

标签

描述

<article>

定义页面独立的内容区域。

<aside>

定义页面的侧边栏内容。

<bdi>

允许您设置一段文本,使其脱离其父元素的文本方向设置。

<command>

定义命令按钮,比如单选按钮、复选框或按钮

<details>

用于描述文档或文档某个部分的细节

<dialog>

定义对话框,比如提示框

<summary>

标签包含 details 元素的标题

<figure>

规定独立的流内容(图像、图表、照片、代码等等)。

<figcaption>

定义 <figure> 元素的标题

<footer>

定义 section 或 document 的页脚。

<header>

定义了文档的头部区域

<mark>

定义带有记号的文本。

<meter>

定义度量衡。仅用于已知最大和最小值的度量。

<nav>

定义导航链接的部分。

<progress>

定义任何类型的任务的进度。

<ruby>

定义 ruby 注释(中文注音或字符)。

<rt>

定义字符(中文注音或字符)的解释或发音。

<rp>

在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。

<section>

定义文档中的节(section、区段)。

<time>

定义日期或时间。

<wbr>

规定在文本中的何处适合添加换行符。

HTML5 Canvas

HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

// html
<canvas id="myCanvas" width="200" height="100"></canvas>// js
<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);
</script>

HTML5 拖放

// 首先,为了使元素可拖动,把 draggable 属性设置为 true :
<img draggable="true">

拖动

每一个可拖动的元素,在拖动过程中,都会经历三个过程,拖动开始-->拖动过程中--> 拖动结束

针对对象 事件名称 说明
被拖动的元素 dragstart 在元素开始被拖动时候触发
drag 在元素被拖动时反复触发
dragend 在拖动操作完成时触发
目的地对象 dragenter 当被拖动元素进入目的地元素所占据的屏幕空间时触发
dragover 当被拖动元素在目的地元素内时触发
dragleave 当被拖动元素没有放下就离开目的地元素时触发

dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此,我们必须阻止浏览器这种默认行为。e.preventDefault();

释放

到达目的地之后,释放元素事件

针对对象 事件名称 说明
目的地对象 drop 当被拖动元素在目的地元素里放下时触发,一般需要取消浏览器的默认行为。

 HTML5 地理定位

 HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。

<script>var x=document.getElementById("demo");function getLocation(){if (navigator.geolocation){navigator.geolocation.getCurrentPosition(showPosition);}else{x.innerHTML="该浏览器不支持获取地理位置。";}}function showPosition(position){x.innerHTML="Latitude: " + position.coords.latitude +"<br>Longitude: " + position.coords.longitude;}
</script>

HTML5  Audio(音频)、Video(视频)

HTML5 规定了在网页上嵌入音频元素的标准,即使用 <audio> 元素。

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

 HTML5 规定了一种通过 video 元素来包含视频的标准方法。

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

HTML5 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证

  • color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
<input type="range" name="points" min="1" max="10">
Search Google: <input type="search" name="googlesearch">
电话号码: <input type="tel" name="usrtel">

HTML5 表单元素

HTML5 有以下新的表单元素:

标签 描述
<datalist> <input>标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
<keygen> ><keygen> 标签规定用于表单的密钥对生成器字段。
<output> <output> 标签定义不同类型的输出,比如脚本的输出。

HTML5 表单属性

<form>新属性:

  • autocomplete、novalidate

<input>新属性:

  • autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height and width、list、min and max、multiple、pattern (regexp)、placeholder、required、step

HTML5 语义元素

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>

HTML5 离线Web应用(应用程序缓存)
应用程序缓存为应用带来三个优势:
  1. 离线浏览 - 用户可在应用离线时使用它们
  2. 速度 - 已缓存资源加载得更快
  3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
HTML5--离线web应用 - 简书
.HTML5 WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。
  • css3

CSS3选择器
选择器 示例 示例说明 CSS
.class .intro 选择所有class="intro"的元素 1
#id #firstname 选择所有id="firstname"的元素 1
* * 选择所有元素 2
element p 选择所有<p>元素 1
element,element div,p 选择所有<div>元素和<p>元素 1
element element div p 选择<div>元素内的所有<p>元素 1
element>element div>p 选择所有父级是 <div> 元素的 <p> 元素 2
element+element div+p 选择所有紧接着<div>元素之后的<p>元素 2
[attribute] [target] 选择所有带有target属性元素 2
[attribute=value] [target=-blank] 选择所有使用target="-blank"的元素 2
[attribute~=value] [title~=flower] 选择标题属性包含单词"flower"的所有元素 2
[attribute|=language] [lang|=en] 选择一个lang属性的起始值="EN"的所有元素 2
:link a:link 选择所有未访问链接 1
:visited a:visited 选择所有访问过的链接 1
:active a:active 选择活动链接 1
:hover a:hover 选择鼠标在链接上面时 1
:focus input:focus 选择具有焦点的输入元素 2
:first-letter p:first-letter 选择每一个<P>元素的第一个字母 1
:first-line p:first-line 选择每一个<P>元素的第一行 1
:first-child p:first-child 指定只有当<p>元素是其父级的第一个子级的样式。 2
:before p:before 在每个<p>元素之前插入内容 2
:after p:after 在每个<p>元素之后插入内容 2
:lang(language) p:lang(it) 选择一个lang属性的起始值="it"的所有<p>元素 2
element1~element2 p~ul 选择p元素之后的每一个ul元素 3
[attribute^=value] a[src^="https"] 选择每一个src属性的值以"https"开头的元素 3
[attribute$=value] a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素 3
[attribute*=value] a[src*="44lan"] 选择每一个src属性的值包含子字符串"44lan"的元素 3
:first-of-type p:first-of-type 选择每个p元素是其父级的第一个p元素 3
:last-of-type p:last-of-type 选择每个p元素是其父级的最后一个p元素 3
:only-of-type p:only-of-type 选择每个p元素是其父级的唯一p元素 3
:only-child p:only-child 选择每个p元素是其父级的唯一子元素 3
:nth-child(n) p:nth-child(2) 选择每个p元素是其父级的第二个子元素 3
:nth-last-child(n) p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素,从最后一个子项计数 3
:nth-of-type(n) p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素 3
:nth-last-of-type(n) p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素,从最后一个子项计数 3
:last-child p:last-child 选择每个p元素是其父级的最后一个子级。 3
:root :root 选择文档的根元素 3
:empty p:empty 选择每个没有任何子级的p元素(包括文本节点) 3
:target #news:target 选择当前活动的#news元素(包含该锚名称的点击的URL) 3
:enabled input:enabled 选择每一个已启用的输入元素 3
:disabled input:disabled 选择每一个禁用的输入元素 3
:checked input:checked 选择每个选中的输入元素 3
:not(selector) :not(p) 选择每个并非p元素的元素 3
::selection ::selection 匹配元素中被用户选中或处于高亮状态的部分 3
:out-of-range :out-of-range 匹配值在指定区间之外的input元素 3
:in-range :in-range 匹配值在指定区间之内的input元素 3
:read-write :read-write 用于匹配可读及可写的元素 3
:read-only :read-only 用于匹配设置 "readonly"(只读) 属性的元素 3
:optional :optional 用于匹配可选的输入元素 3
:required :required 用于匹配设置了 "required" 属性的元素 3
:valid :valid 用于匹配输入值为合法的元素 3
:invalid :invalid 用于匹配输入值为非法的元素
CSS3 边框(Borders
 用CSS3,你可以创建圆角边框,添加阴影框
属性 说明 CSS
border-image 设置所有边框图像的速记属性。 3
border-radius 一个用于设置所有四个边框- *-半径属性的速记属性 3
box-shadow 附加一个或多个下拉框的阴影 3

CSS3 背景

顺序 描述 CSS
background-clip 规定背景的绘制区域。 3
background-origin 规定背景图片的定位区域。 3
background-size 规定背景图片的尺寸。 3

多背景

body{background-image:url(img_flwr.gif),url(img_tree.gif);
}

CSS3 渐变

CSS3 定义了两种类型的渐变(gradients):

  • 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
background: linear-gradient(direction, color-stop1, color-stop2, ...);
  • 径向渐变(Radial Gradients)- 由它们的中心定义
background: radial-gradient(center, shape size, start-color, ..., last-color);

CSS3 文本效果

属性 描述 CSS
hanging-punctuation 规定标点字符是否位于线框之外。 3
punctuation-trim 规定是否对标点字符进行修剪。 3
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3
text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 3
text-outline 规定文本的轮廓。 3
text-overflow 规定当文本溢出包含元素时发生的事情。 3
text-shadow 向文本添加阴影。 3
text-wrap 规定文本的换行规则。 3
word-break 规定非中日韩文本的换行规则。 3
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3

CSS3 字体

<style>@font-face{font-family: myFirstFont;src: url(sansation_light.woff);}div{font-family:myFirstFont;}
</style>

CSS3 转换和变形

2D新转换属性

以下列出了所有的转换属性:

Property 描述 CSS
transform 适用于2D或3D转换的元素 3
transform-origin 允许您更改转化元素位置

2D 转换方法

函数 描述
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
scaleY(n) 定义 2D 缩放转换,改变元素的高度。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。

3D转换属性

下表列出了所有的转换属性:

属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3
transform-style 规定被嵌套元素如何在 3D 空间中显示。 3
perspective 规定 3D 元素的透视效果。 3
perspective-origin 规定 3D 元素的底部位置。 3
backface-visibility 定义元素在不面对屏幕时是否可见。 3

3D 转换方法

函数 描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)
定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

CSS3 过渡

过渡属性

下表列出了所有的过渡属性:

属性 描述 CSS
transition 简写属性,用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3
div{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

CSS3 动画

 要创建CSS3动画,你需要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:

@keyframes myfirst{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

下面的表格列出了 @keyframes 规则和所有动画属性:

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
div{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

CSS3 多列

下表列出了所有 CSS3 的多列属性:

属性 描述
column-count 指定元素应该被分割的列数。
column-fill 指定如何填充列
column-gap 指定列与列之间的间隙
column-rule 所有 column-rule-* 属性的简写
column-rule-color 指定两列间边框的颜色
column-rule-style 指定两列间边框的样式
column-rule-width 指定两列间边框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的宽度
columns 设置 column-width 和 column-count 的简写

CSS3 盒模型

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框,主要包括以下用户界面属性:

  • resize:none | both | horizontal | vertical | inherit
  • box-sizing: content-box | border-box | inherit
  • outline:outline-color outline-style outline-width outine-offset

resize属性指定一个元素是否应该由用户去调整大小。

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

CSS3伸缩布局盒模型(弹性盒)

属性 描述
display 指定 HTML 元素盒子类型。
flex-direction 指定了弹性容器中子元素的排列方式
justify-content 设置弹性盒子元素在主轴(横轴)方向上的对齐方式。
align-items 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。
align-content 修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐
flex-flow flex-direction 和 flex-wrap 的简写
order 设置弹性盒子的子元素排列顺序。
align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。
flex 设置弹性盒子的子元素如何分配空间。

CSS3 多媒体查询

从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型。清单 1 展示了一个示例。

清单 1. 使用媒体类型

<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

清单 2. 媒体查询规则

@media all and (min-width: 800px) { ... }
  • @media all 是媒体类型,也就是说,将此 CSS 应用于所有媒体类型。
  • (min-width:800px) 是包含媒体查询的表达式,如果浏览器的最小宽度为 800 像素,则会告诉浏览器只运用下列 CSS。

清单 3. and 条件

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

清单 4. or 关键词

@media (min-width:800px) or (orientation:portrait) { ... }

清单 5. 使用 not

@media (not min-width:800px) { ... }

如何写一个npm包

发布流程

首先你要先注册一个npm账号,需要有Public email,User name和密码

在项目控制台下登录:

 npm login 

注意:输入密码你会发现怎么都输入不上。不用担心,其实是密码被隐藏了,输入密码时在password:后正常输入密码回车即可,可以正常登陆。

发布:

npm publish --access public

删除发布的包 

  • 删除24小时内发布的包
npm unpublish --force
  • 删除指定名称的包
npx force-unpublish package-name '删除原因' //

 npm更新

  • 所谓的更新,其实就是再次发布
npm publish

Terminal打印

报错信息

npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT http://registry.npmjs.org/xxx-xxx -
You cannot publish over the previously published versions: 2.0.0.
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy

每次更新的时候需要改变package.json中的版本号
重新发布,OK了

问题描述

邮箱未验证

npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! you must verify your email before publishing a new package: https://www.npmjs.com/email-edit : your-package

这个是注册后没有验证邮箱,登录自己邮箱找到对应的邮件确认就好了。注意别选错了,注册 npm 时会发给你两个邮件,我当时就是眼瞎没有看到第二个。如果验证邮件过期的话登录自己的 npm 主页重新发一个就好了。

没有权限发布 

npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! You do not have permission to publish "your-package". Are you logged in as the correct user? : your-package

你的包和别人的包重名了,npm 里的包不允许重名,所以去 npm 搜一下,改个没人用的名字就可以了。

需要登录

npm ERR! code ENEEDAUTH
npm ERR! need auth auth required for publishing
npm ERR! need auth You need to authorize this machine using `npm adduser`

后面已经注明了,输入npm adduser重新登录就可以了,过程和npm login一样,这个问题在你切换了 npm 源之后或登录过期后都有可能发生。

只有管理员才权限发布

npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! [no_perms] Private mode enable, only admin can publish this module [no_perms] Private mode enable, only admin can publish this module: your-package

这个是你的源设置成第三方源的时候才有可能发生,比如设置了淘宝源就可能会导致该问题。只要把源改回默认的就可以了,如下:

npm config set registry http://registry.npmjs.org

包名过于类似 

npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! Package name too similar to existing packages; try renaming your package to '@hopgoldy/auto-git' and publishing with 'npm publish --access=public' instead : your-package

如果npm上已经有了不少和你的包名类似的包,就会出现这个问题,在package.json中修改你的包名就可以了

无法发布到私有包

npm ERR! publish Failed PUT 402
npm ERR! code E402
npm ERR! You must sign up for private packages :

这个当你的包名为@your-name/your-package时才会出现,原因是当包名以@your-name开头时,npm publish会默认发布为私有包,但是 npm 的私有包需要付费,所以需要添加如下参数进行发布:

npm publish --access public

围绕vue-router展开分析知识点

  • 安装

npm install vue-router --save
  • 路由应用过程

下载好vue-router后,在使用时,首先要导入vue-router库,注册路由,然后在实例化vue-router时建立路由映射关系。

main.js文件如下:

import Vue from 'vue'
import App from './App'
import VRouter from 'vue-router'
import Animal from './components/animal'
import Fruit from './components/fruit'Vue.config.productionTip = false//注册路由
Vue.use(VRouter)//实例化router
const router = new VRouter({//路由映射表routers:[{//什么样的地址使用什么样的组件path:'/animal',component: Animal},{path:'/fruit',component: Fruit}]
})
/* eslint-disable no-new */创建和挂载根实例。要通过 router 配置参数注入路由,让整个应用都有路由功能
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

APP.vue文件如下:

<template><div id="app"><img src="./assets/logo.png"><!-- //设置路由在哪里显示 --><router-view></router-view><!-- //router-link呈现a标签超链接的效果 --><router-link :to="{path:'animal'}">to animal</router-link><router-link :to="{path:'fruit'}">to fruit</router-link></div>
</template><script>export default {name: 'App',components: {},//data()必须是函数data() {return {}},}
</script>

实现效果如下:

实现的功能:
当点击to animal 按钮时,地址栏URL会发生变化,router-view里面会被渲染成对应的内容即页面显示animal组件中的内容。同理点击to fruit按钮时,页面显示fruit组件中的内容。并且刷新页面不会跳到首页。

  • 路由参数

路由参数的设置:

路由参数像下面这样,在地址栏URL后面添加type等访问页面的参数。

路由参数的方法就是在路由映射表中设置,动态段由冒号:表示,如下:

路由参数设置规则如下:

组件内部获取参数
路由接受参数以后,路由会向每个组件的this.$route对象插入当前页面的params参数。匹配路径时,动态段的值this.$route.params在每个组件中公开,因此每个子组件可以通过全局对象this.$route来获取当前路由的参数。

例如animal.vue组件中代码:

<template lang="html">
<div class="animal"><h1>{{msg}}</h1><button v-on:click="getParam">get animal route Param</button>
</div>
</template><script>export default {data() {return {msg: 'i like the animal as cat !'}},methods: {getParam(){console.log(this.$route.params)}}}

在地址栏传入参数red后,点击get animal route Param按钮,控制台输出this.$route.params的结果就是red。运行效果如下:

$route.params注入以后就作为了组件的一个属性,也可以通过页面直接获取。如下:

  •  路由嵌套

真正的应用程序通常由嵌套在多个级别深层的组件组成。URL的段对应于嵌套组件的某种结构。路由嵌套配置子路由表如下:

import Vue from 'vue'
import App from './App'
import VRouter from 'vue-router'
import Animal from './components/animal'
import Fruit from './components/fruit'
import RedAnimal from './components/redanimal'Vue.config.productionTip = falseVue.use(VRouter)let router = new VRouter({mode: 'history',routes:[{//什么样的地址使用什么样的组件path:'/animal',component: Animal,//children配置子路由表,与主路由配置相同,由path和component组成children: [{path:'red',component: RedAnimal}]},{path:'/fruit',component: Fruit}]
})
/* eslint-disable no-new */
new Vue({el: '#app',//router: routerrouter,components: { App },template: '<App/>'
})

如上在routes路由表中配置子路由,确定在哪一个路由下跳转就在哪一个路由下配置其子路由。如上代码中,在animal组件路由中设置了其子路由RedAnimal,那么RedAnimal组件中的内容只会在animal组件下显示。

同样也可以使用router-link直接链接到animal组件下的redanimal子组件。

<router-link :to="{path:'animal/red'}">to red animal</router-link>
  • 命名的路由视图

命名路由就是在配置的路由表中给路由一个名字name,然后在router-link中就可以直接使用name。

let router = new VRouter({mode: 'history',routes:[{//什么样的地址使用什么样的组件path:'/animal',component: Animal,//给路由命名name: 'animalName',//children配置子路由表,与主路由配置相同,由path和component组成children: [{path:'red',component: RedAnimal}]},{path:'/fruit',component: Fruit}]
})

<APP.vue>中直接使用name。

运行效果与使用:

<router-link :to="{path:'animal'}">to animal</router-link>

命名视图就是也可以给route-view一个名字。如下

如图viewA和viewB就是给视图route-view的命名。命名视图以后在component中给不同的视图指定不同的组件。
通过使用组件呈现视图,因此多个视图需要同一路径的多个组件。确保使用components(带有s)选项。
如下:

  • 路由重定向

重定向也在routes配置中完成。在routes中配置path和redirect,比如要重定向/a到/b,如下

let router = new VueRouter({routes: [{ path: '/a', redirect: '/b' }]
})

再如上面例子,当访问首页时让其重定向到animal组件页面。

如下,当访问localhost:8080时直接跳转到localhost:8080/animal。

重定向也可以定位到命名路线。

const router = new VueRouter({routes: [{ path: '/a', redirect: { name: 'foo' }}]
})
  • 使用过渡制作路由跳转动画

  1. 过渡transition可以用v-show、v-if以及动态组件中,也可以用在路由router-view中。因为router-view也是具有切换功能。
  2. 给transition一个名称name,然后根据与名字在不同的class中进行CSS3动画的设置。
  3. keep-alive也可以配合router-view使用,用于缓存。
  4. keep-alive用于在页面几个视图中间切换时,切换过得视图会被缓存起来,如果不加keep-alive每次都会进行重新请求组件,比较消耗资源。

  • <router-link> 常用属性

to:表示目标路由的链接。 当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。

//<!-- 字符串 -->
<router-link to="home">Home</router-link>
//<!-- 渲染结果 -->
<a href="home">Home</a>//<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>//<!-- 不写 v-bind 也可以,就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>//<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>//<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>//<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

tag:有时候想要 渲染成某种标签,例如li标签。于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航。

<router-link to="/foo" tag="li">foo</router-link>
//<!-- 渲染结果 -->
<li>foo</li>
<router-link :to="{path:'fruit'}" tag="li">to fruit</router-link>

每日三问之html5css3新特性、如何写一个npm包、围绕vue-router展开分析知识点相关推荐

  1. ES6新特性_ES6模块化引入NPM包--JavaScript_ECMAScript_ES6-ES11新特性工作笔记046

    然后我们再看,如果我们想用es6的语法,来使用jQuery等一些js的框架怎么弄 我们可以利用npm,直接把jQuery导入进来使用就可以了. 首先我们去用npm安装一下jQuery npm i jq ...

  2. 数字后端面试问答No.19-21(每日三问)

    数字后端面试问答No.19-21(每日三问) 文章右侧广告为官方硬广告,与吾爱IC社区无关,用户勿点.点击进去后出现任何损失与社区无关. 前阵子由于小编忙着编写基于 28nm 工艺 ARM Corte ...

  3. 数字后端面试问答No.10-12(每日三问)

    数字后端面试问答No.10-12(每日三问) 文章右侧广告为官方硬广告,与吾爱IC社区无关,用户勿点.点击进去后出现任何损失与社区无关. 周末了,今天继续为大家分享三道数字后端面试题目.这三道题,其中 ...

  4. 创建线程的第三种方式---JDK8新特性

    创建线程的第三种方式-JDK8新特性 实现Callable接口,创建线程 Runnable和Callable接口的不同 1.Callable可以返回一个类型V,而Runnable不可以,也就是说Cal ...

  5. C++11新特性中的匿名函数Lambda表达式的汇编实现分析(二)

    2019独角兽企业重金招聘Python工程师标准>>> C++11新特性中的匿名函数Lambda表达式的汇编实现分析(一) 首先,让我们来看看以&方式进行变量捕获,同样没有参 ...

  6. go每日新闻(2021-02-02)——Go1.16 新特性:一文快速上手 Go embed

    每日一谚:The Go analogue: goroutines connected by channels just like unix pipes style. go中文网每日资讯–2021-02 ...

  7. HTML5CSS3新特性

    目录 一.HTML5新特性 1.新增语义化标签 2.新增多媒体标签 音频 视频 3.新增input类型 4.新增表单属性 二.CSS3新特性 1.新增选择器 属性选择器 结构伪类选择器 伪元素选择器 ...

  8. web前端基础 html5+css3(十.html5css3新特性)

    1.html5新增的语义化标签(针对搜索引擎,提高优化) <header>:头部标签 <nav>:导航标签 <active>:内容标签 <section> ...

  9. Java9 jar兼容_java9新特性-6-多版本兼容jar包

    1.官方Feature 2.使用说明 当一个新版本的Java出现的时候,你的库用户要花费数年时间才会切换到这个新的版本.这就意味着库得去向后兼容你想要支持的最老的Java版本(许多情况下就是Java ...

最新文章

  1. 洛谷P3763 [Tjoi2017]DNA 【后缀数组】
  2. SpringCloud之RestTemplate,几种常见的请求方式
  3. Chrome浏览器里的-webkit-focus-ring-color
  4. 计算机网络ieee,博士生程珂论文连续两年被计算机网络顶级会议IEEE INFOCOM录用...
  5. vsc写vue生成基本代码快捷键_基于vue2.X的webpack基本配置,教你手动撸一个webpack4的配置...
  6. TensorFlow第七步再试牛刀-自编BP代码解Mnist
  7. linux计划任务 没30s_一分钟学会电脑Linux系统和Windows另类的关机方法,6到飞起来...
  8. 100-days: nineteen
  9. JavaScript中的函数 1
  10. 数字孪生技术在交通运输领域管理应用【案例解析】
  11. screenX与clientX区别
  12. 学习javascript这一篇就够了超详细笔记(建议收藏)上
  13. Windows子系统WSL
  14. H5如何拉起微信扫一扫
  15. 就让烟花来代替我对你的祝福叭 ~ 【生日快乐-简单烟花祝福特效】
  16. html怎么绑定数据,06、如何在html中绑定数据
  17. 常用正则表达式爬取网页信息及分析HTML标签总结
  18. 10个好用的的css框架
  19. Verilog数字系统设计——10进制计数器,具有异步复位功能
  20. CSS浮动详解及案例

热门文章

  1. 鹏业云计价i20(西藏)计价软件升级拉萨市招投标清单接口
  2. Labview之子面板的使用
  3. qpython 3h_QPython手机版下载|QPython安卓版3.0.0下载 _当游网
  4. 对接Amazon SP_API的流程
  5. 中小企业MES生产执行系统源码 MES源码
  6. 【力扣刷题 | 第十二天】
  7. python爬虫 - 猿人学第十九题突破ja3指纹验证
  8. heic怎么转换成jpg,heic转jpg格式
  9. 【密歇根大学博士论文】深度强化学习进展:内在奖励,时间信用分配,状态表示和价值等效模型...
  10. JDK1.8HashMap会发生死循环吗?