head#
<head> <!-- 汉字编码 --> <meta charset="UTF-8"> <!-- 设置一个网站的搜索关键字 --> <meta name="Keywords" content=""/> <!-- 网站描述内容 --> <meta name="Description" content=""/> <!-- 视口设定 --> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <!-- 标题 --> <title>少年的博客</title> <!-- 加载页面图标 --> <link rel="shortcut icon" href="bitbug_favicon.ico" type="image/x-icon"> <!-- 加载外部css样式 --> <link rel="stylesheet" href="css/base.css"> </head>
body#
<!-- 主体内容 --> <body> <h3>Junior</h3> </body>
style#
<!-- css样式 --> <style></style>
script#
<!-- js --> <script type="text/javascript"> // 脚本代码块 </script>
格式#
| 标签 | 描述 |
|---|---|
| acronym | 定义只取首字母的缩写。 |
| ababr | 定义缩写。 |
| address | 定义文档做者或拥有者的联系信息。 |
| b | 定义粗体文本。 |
| bdi | 定义文本的文本方向，使其脱离其周围文本的方向设置。 |
| bdo | 定义文字方向。 |
| big | 定义大号文本。 |
| blockquote | 定义长的引用。 |
| center | 不同意使用。定义居中文本。 |
| cite | 定义引用(citation)。 |
| code | 定义计算机代码文本。 |
| del | 定义被删除文本。 |
| dfn | 定义定义项目。 |
| em | 定义强调文本。 |
| font | 不同意使用。定义文本的字体、尺寸和颜色 |
| i | 定义斜体文本。 |
| ins | 定义被插入文本。 |
| kbd | 定义键盘文本。 |
| mark | 定义有记号的文本。 |
| meter | 定义预约义范围内的度量。 |
| pre | 定义预格式文本。 |
| progress | 定义任何类型的任务的进度。 |
| q | 定义短的引用。 |
| rp | 定义若浏览器不支持 ruby 元素显示的内容。 |
| rt | 定义 ruby 注释的解释。 |
| ruby | 定义 ruby 注释。 |
| s | 不同意使用。定义加删除线的文本。 |
| samp | 定义计算机代码样本。 |
| small | 定义小号文本。 |
| strike | 不同意使用。定义加删除线文本。 |
| strong | 定义语气更为强烈的强调文本。 |
| sup | 定义上标文本。 |
| sub | 定义下标文本。 |
| time | 定义日期/时间。 |
| tt | 定义打字机文本。 |
| u | 不同意使用。定义下划线文本。 |
| var | 定义文本的变量部分。 |
| wbr | 定义视频。 |
连接#
| 标签 | 描述 |
|---|---|
| a | 定义锚。 |
| link | 定义文档与外部资源的关系。 |
| nav | 定义导航连接。 |
音频/视频#
| 标签 | 描述 |
|---|---|
| audio | 定义声音内容。 |
| source | 定义媒介源。 |
| track | 定义用在媒体播放器中的文本轨道。 |
| video | 定义视频。 |
图像#
| 标签 | 描述 |
|---|---|
| img | 定义图像。 |
| map | 定义图像映射。 |
| area | 定义图像地图内部的区域。 |
| canvas | 定义图形。 |
| figcaption | 定义 figure 元素的标题。 |
| figure | 定义媒介内容的分组，以及它们的标题。 |
标签属性#
通用属性:#
id: 取惟一名称css
class: 给标签取类名html
style: 行内样式vue
title: 标题java
转义符#
| 实体字符 | 编译后的字符 |
|---|---|
< |
小于号 < |
> |
大于号 > |
& |
于号 & |
|
空格 |
© |
版权 |
× |
乘号 |
÷ |
除号 |
标签元素#
块级元素#
块级元素(至关执行了 display:block)ios
1.独占一行 宽度和高度是可控的,如没有设置宽度将默认铺满nginx
2.其行内能够包含块级和行级元素正则表达式
行级元素#
行级元素(至关执行了 display:inline)vue-router
1.不会独占一行,与相邻的行级元素占同一行docker
2.宽高是不可控的
3.其行内只有包含行级元素
Emmet语法#
2-1. 后代：>#
nav>ul>li
<nav> <ul> <li></li> </ul> </nav>
2-2. 兄弟：+#
div+p+bq
<div></div> <p></p> <blockquote></blockquote>
2-3. 上级：^#
div+div>p>span+em^bq
<div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>
div+div>p>span+em^^bq
<div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote>
2-4. 分组：()#
(1)缩写↓
div>(header>ul>li*2>a)+footer>p
<div> <header> <ul> <li><a href=""></a><li> <li><a href=""></a><li> </ul> </header> </footer> <p></p> </footer> </div>
(2)缩写↓
(div>dl>(dt+dd)*3)+footer>p
<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer>
2-5. 乘法：*#
缩写↓
ul>li*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <ul>
2-6.自增符号：$#
1)缩写↓
ul>li.item$*5
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <ul>
(2)缩写↓
h$[title=item$]{Header $}*3
<h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3>
(3)缩写↓
ul>li.item$$$*5
<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul>
(4)缩写↓
ul>li.item$@-*5
<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul>
(5)缩写↓
ul>li.item$@3*5
<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul>
2-7.ID和类属性#
(1)缩写↓
#header
<div id="header"></div>
(2)缩写↓
.title
<div class="title"></div>
(3)缩写↓
form#search.wide
<form id="search" class="wide"></form>
(4)缩写↓
p.class1.class2.class3
<p class="class1 class2 class3"></p>
2-8.自定义属性#
(1)缩写↓
p[title="Hello world"]
<p title="Hello world"></p>
(2)缩写↓
td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>
(3)缩写↓
[a='value1' b="value2"]
<div a="value1" b="value2"></div>
2-9.文本：{}#
(1)缩写↓
a{Click me}
<a href="">Click me</a>
(2)缩写↓
p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p>
2-10.隐式标签#
(1)缩写↓
.class
<div class="class"></div>
(2)缩写↓
em>.class
<em><span class="class"></span></em>
(3)缩写↓
ul>.class
<ul> <li class="class"></li> </ul>
(4)缩写↓
table>.row>.col
<table> <tr class="row"> <td class="col"></td> </tr> </table>
HTML标签语法#
3-1. 全部未知的缩写都会转换成标签#
缩写↓
hangge
<hangge></hangge>
3-2.基本html标签#
!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>
a
<a href=""></a>
a:link
<a href="http://"></a>
a:mail
<a href="mailto:"></a>
link:css
<link rel="stylesheet" href="style.css" />
link:print
<link rel="stylesheet" href="print.css" media="print" />
link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
link:touch
<link rel="apple-touch-icon" href="favicon.png" />
meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
meta:win
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
meta:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
meta:compat
<meta http-equiv="X-UA-Compatible" content="IE=7" />
script:src
<script src=""></script>
iframe
<iframe src="" frameborder="0"></iframe>
form
<form action=""></form>
form:get
<form action="" method="get"></form>
inp
<input type="text" name="" id="" />
input:hidden
<input type="hidden" name="" />
input:h
<input type="hidden" name="" />
input:text, input:t
<input type="text" name="" id="" />
input:search
<input type="search" name="" id="" />
input:email
<input type="email" name="" id="" />
html:xml
<html xmlns="http://www.w3.org/1999/xhtml"></html>
CSS属性
宽高#
height: 310px; width: 65%;
动画简写属性#
animation 动画名称 持续时间 运动曲线 什么时候开始 播放次数 是否反方向 动画开始或结束状态
animation: name duration timing-function delay iteration-count direction fill-mode;
背景 background#
/* 背景图片 */ background: no-repeat center/100% url("../img/index.png"); /* 背景颜色 */ background-color: #ffffff;
浮动 float#
float: left;
字体 font#
/* 字体颜色 */ color: #888888; /* 字体粗细 */ font-weight: 400; /* 字体大小 */ font-size: 14px; /* 文字居中 */ text-align: center; /* 字体行内居中 */ line-height: 45px;
盒子边距 margin | padding#
/* 外边距 */ margin: 60px 0 0 -40px; /* 居中显示 */ margin: 0 auto; /* 向下10px */ margin-bottom: 10px; /* 外边距 */ padding: 15px 0 10px 12px;
透明#
opacity: 0.9;
边框 border#
/* 边框宽度1px 样式 颜色 */ border: 1px solid #edeef0; /* 边框边角弧度 */ border-radius: 5px; /* 边框下划线 */ border-bottom: 1px solid #edeef0; /* 样式 1px */ border-style: ridge; border-width: 1px;
2D动画#
动画效果#
/* 动画效果 */ transition: all 5s;
动画触发#
:hover { /* 放大2倍 */ /* transform: scale(2, 2); */ /* 旋转 */ transform: rotate(720deg); /* 上移 */ transform: translateY(-3px); }
3D动画#
3D转换 translate3d#
transform: translate3d(0,100px,100px);
透视 perspective#
/* 透视写在被观察元素的父盒子上面 */ perspective: 500px;
旋转 rotate3d#
transform: rotateX(45deg); transform: rotateY(); transform: rotateZ(); /* 自定义 */ transform: rotate3d(x,y,z,deg);
3d呈现 transform-style#
/* 让子元素保持3d立体空间环境 */ transform-style: preserve-3d;
响应式布局#
开发实现#
媒体查询
百分比布局
rem布局
视口单位布局(vw/vh)
设计步骤#
设置meta标签
媒体查询设置样式
设置多种视图宽度
css 样式简写#
4-2. 经常使用样式简写#
pos
position:relative;
t
top:;
pos:s
position:static;
pos:a
position:absolute;
pos:r
position:relative;
pos:f
position:fixed;
t
top:;
t:a
right:auto;
c
Bootstrap
container-fluid#
.container-fluid 则支持全屏的流式布局，以下使用：
<div class="container-fluid"> ... </div>
自定义适应宽度
<style type="text/css"> /* 超小屏幕 */ @media (max-width:575px) { .container-fluid{ width: 100%; background-color: #002752; } } /* 小屏幕 */ @media (min-width:576px) and (max-width:767px) { .container-fluid{ background-color: #ff5500; width: 540px; } } /* 中屏幕 */ @media (min-width:768px) and (max-width:991px) { .container-fluid{ background-color: #5555ff; width: 720px; } } /* 大屏幕 */ @media (min-width:992px) and (max-width:1199px) { .container-fluid{ background-color: #55ff00; width: 960px; } } /* 中超大屏幕 */ @media (min-width:1200px) { .container-fluid{ background-color: #aa5500; width: 1140px; } } </style>
响应式 meta 标签#
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
响应式外部容器#
它容许在指定的屏幕下定义 100%宽
如.container-sm 则只在sm屏幕下显示100%宽,其它断点包括.container-md、 .container-lg、 .containerxl
<div class="container-sm">100% wide until small breakpoint</div> <div class="container-md">100% wide until medium breakpoint</div> <div class="container-lg">100% wide until large breakpoint</div> <div class="container-xl">100% wide until extra large breakpoint</div>
分割线#
<div class="dropdown-divider"></div>
基于FlexBox布局#
一个简明的Bootstrap 4框架（只区分pc与手机并基于FlexBox布局）：
<div class="container"> <div class="row"> <div class="col-sm"> </div> </div> </div>
Emment语法：
div.container>div.row>div.col-sm
全栅格定义框架#
<div class="container"> <div class="row"> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12"> </div> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12"> </div> </div> </div>
Emment语法：
div.container>div.row>div.col-xl-6.col-lg-6.col-md-6.col-sm-6.col-12+div.col-xl-6.col-lg-6.col-md-6.col-sm-6.col-12
经常使用的属性#
隐藏#
hidden
清除边界#
clearfix
指定屏幕下显示#
visible-xs
center-block
不显示前缀点#
list-unstyled
列偏移：#
.offset-md-*
文本对齐#
Left aligned text.
Center aligned text.
Right aligned text.
text-capitalize 利用
text-center 居中
text-danger 加红危险
text-hide 隐藏文字
text-info 信息
text-justify 字体对齐（齐行——
text-left 文字左对齐
text-lowercase 小写（仅英文）
text-muted 静音
text-nowrap 不换行
text-primary 原生效果
text-right 文字居右
text-success 成功
text-uppercase 文字大写（仅英文）
text-warning 警告红色
文字样式#
柔和灰（text-muted）
、主要蓝（text-primary）
、成功绿（text-secondary）
、成功红（text-success）
、危险红（text-danger）
、警告黄（text-warning）
、危息绿（text-info）
、黑白对比（text-dark）
背景是样式#
主要蓝（bg-primary）
、成功绿（bg-secondary）
、成功红（bg-success）
、危险红（bg-danger）
、警告黄（bg-warning）
、危息绿（bg-info）
、黑白对比（bg-dark）
BootstrapVue
安装#
# With npm npm install vue bootstrap-vue bootstrap # With yarn yarn add vue bootstrap-vue bootstrap
程序入口点注BootstrapVue：
// app.js import Vue from 'vue' import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' // Install BootstrapVue Vue.use(BootstrapVue) // Optionally install the BootstrapVue icon components plugin Vue.use(IconsPlugin)
引入 Bootstrap 和BootstrapVue的css
// app.js import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css'
行列#
<b-container class="bv-example-row">
<b-row cols="1" cols-sm="2" cols-md="4" cols-lg="6">
<b-col>Column</b-col>
<b-col>Column</b-col>
<b-col>Column</b-col>
<b-col>Column</b-col>
<b-col>Column</b-col>
<b-col>Column</b-col>
</b-row>
</b-container>
关键字
<b-row> <b-col> <b-container> <b-form-row>
<b-col sm="auto"> 实例的宽度将自动为25%。
列属性 sm, md, lg, xl表示在不一样断点处，每行可能使用12个列中要使用的列数。所以，若是在断点sm处须要三个等宽列， 可使用<b-col sm="4">。特殊值auto可用于占用行中剩余的可用列空间。
删除边距#
经过在<b-row>上设置no-gutters属性来删除 <b-row> 的边距和<b-col>的padding。
JavaScript
输入输出语句#
alert(msg) 浏览器弹出警示框
console.log(msg) 浏览器打印输出信息
prompt(info) 浏览器弹出输入框
vue
数据对象#
data: {
newTodoText: '', visitCount: 0, hideCompletedTodos: false, todos: [], error: null }
文本插值#
{{ }}
v-once 执行一次性地插值
<span v-once>这个将不会改变: {{ msg }}</span>
v-html
<p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p>
指令#
v-if#
<h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1>
v-show#
只是简单地切换元素的 CSS property display。
<h1 v-show="ok">Hello!</h1>
v-for#
基于一个数组来渲染一个列表#
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
可选的第二个参数，即当前项的索引。
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
以用 of 替代 in 做为分隔符，由于它更接近 JavaScript 迭代器的语法：
<div v-for="item of items"></div>
遍历对象#
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } })
提供第二个的参数为 property 名称 (也就是键名)：
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
还能够用第三个参数做为索引：
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
惟一key
<div v-for="item in items" v-bind:key="item.id"> <!-- 内容 --> </div>
使用值范围#
v-for 也能够接受整数。在这种状况下，它会把模板重复对应次数。
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
在template使用#
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
自定义组件上使用#
<my-component v-for="item in items" :key="item.id"></my-component>
v-bind#
<a v-bind:href="url">...</a>
动态绑定
<a v-bind:[attributeName]="url"> ... </a>
attributeName 会被做为一个表达式进行动态求值，值将会做为最终的参数来使用。例如，若是你的 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。
缩写
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a> <!-- 动态参数的缩写 (2.6.0+) --> <a :[key]="url"> ... </a>
v-on:click#
基础语法#
<a v-on:click="doSomething">...</a>
动态的事件名绑定处理函数
<a v-on:[eventName]="doSomething"> ... </a>
缩写
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a> <!-- 动态参数的缩写 (2.6.0+) --> <a @[event]="doSomething"> ... </a>
事件修饰符#
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件再也不重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符能够串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，而后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a
<!-- 滚动事件的默认行为 (即滚动行为) 将会当即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的状况 -->
<div v-on:scroll.passive="onScroll">...</div>
按键修饰符#
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit">
.exact 修饰符#
修饰符容许你控制由精确的系统修饰符组合触发的事件
<!-- 即便 Alt 或 Shift 被一同按下时也会触发 --> <button v-on:click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的时候才触发 --> <button v-on:click.ctrl.exact="onCtrlClick">A</button> <!-- 没有任何系统修饰符被按下的时候才触发 --> <button v-on:click.exact="onClick">A</button>
鼠标按钮修饰符#
.left .right .middle
v-model#
v-model 指令在表单 <input>、<textarea> 及 <select> 元素上建立双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
文本#
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
多行文本#
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
复选框#
单个复选框，绑定到布尔值：
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
多个复选框，绑定到同一个数组：
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
new Vue({ el: '#example-3', data: { checkedNames: [] } })
单选按钮
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
new Vue({ el: '#example-4', data: { picked: '' } })
选择框#
单选时：
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
new Vue({ el: '...', data: { selected: '' } })
多选时 (绑定到一个数组)：
<div id="example-6">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
new Vue({ el: '#example-6', data: { selected: [] } })
用 v-for 渲染的动态选项：
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({ el: '...', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } })
值绑定#
<!-- 当选中时，`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false --> <input type="checkbox" v-model="toggle"> <!-- 当选中第一个选项时，`selected` 为字符串 "abc" --> <select v-model="selected"> <option value="abc">ABC</option> </select>
组件基础#
基本示例：#
// 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' })
建立的 Vue 根实例中，把这个组件做为自定义元素来使用：
<div id="components-demo">
<button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })
组件名#
Vue.component('my-component-name', { /* ... */ })
这些组件是全局注册的。也就是说它们在注册以后能够用在任何新建立的 Vue 根实例 (new Vue) 的模板中
局部注册#
经过一个普通的 JavaScript 对象来定义组件：
var ComponentA = { /* ... */ } var ComponentB = { /* ... */ }
而后在 components 选项中定义你想要使用的组件：
new Vue({ el: '#app', components: { 'component-a': ComponentA, 'component-b': ComponentB } })
在模块中局部注册#
import ComponentA from './ComponentA' import ComponentC from './ComponentC' export default { components: { ComponentA, ComponentC }, // ... }
自动化全局注册#
可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。咱们有时候会把它们称为基础组件，它们会在各个组件中被频繁的用到。
import Vue from 'vue' import upperFirst from 'lodash/upperFirst' import camelCase from 'lodash/camelCase' const requireComponent = require.context( // 其组件目录的相对路径 './components', // 是否查询其子目录 false, // 匹配基础组件文件名的正则表达式 /Base[A-Z]\w+\.(vue|js)$/ ) requireComponent.keys().forEach(fileName => { // 获取组件配置 const componentConfig = requireComponent(fileName) // 获取组件的 PascalCase 命名 const componentName = upperFirst( camelCase( // 获取和目录深度无关的文件名 fileName .split('/') .pop() .replace(/\.\w+$/, '') ) ) // 全局注册组件 Vue.component( componentName, // 若是这个组件选项是经过 `export default` 导出的， // 那么就会优先使用 `.default`， // 不然回退到使用模块的根。 componentConfig.default || componentConfig ) })
全局注册的行为必须在根 Vue 实例 (经过 new Vue) 建立以前发生
vue-router
npm install vue-router
安装路由
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
axios
安装#
npm install --save axios vue-axios
main.js 导入
import request from '@/network/request' //封装的js new Vue({ router, request, //注册axios render: h => h(App), }).$mount('#app')
封装公共实例#
建network 文件夹 下新建 request.js
import axios from 'axios' export function request(config) { // 1建立axios实例 const intstance = axios.create({ baseURL: 'https://localhost:44398/', timeout: 5000 // contentType: 'application/json;charset=UTF-8', // dataType: 'json' }) // 1.axios拦截器 intstance.interceptors.request.use(config => { return config }, er => { }) // 1.axios响应拦截拦截 intstance.interceptors.response.use(res => { return res }, er => { }) return intstance(config) } export default request
调用#
在vue的页面导入
import Headers from './Headers'
methods: {
AsyGetTest () {
request({
url: '/api/Contents/AsyGetTest' }).then(res => { // 只获取0到4之间的数据 this.newinfo = res.data.slice(0, 4); console.log(this.newinfo) }).catch((e) => { console.log('获取数据失败'); }); } }