首页 > > 网页制作 > css >

前端学习记录

2020-06-05 16:01:45来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

前端学习记录

前端开发

HTML标签

HTML文档结构

<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: 取唯一名称

class: 给标签取类名

style: 行内样式

title: 标题

转义符

实体字符 编译后的字符
&lt; 小于号 <
&gt; 大于号 >
&amp; 于号 &
&nbsp; 空格
&copy; 版权
&times; 乘号
&divide; 除号

标签元素

块级元素

块级元素(相当执行了 display:block)

1.独占一行 宽度和高度是可控的,如没有设置宽度将默认铺满

2.其行内可以包含块级和行级元素

行级元素

行级元素(相当执行了 display:inline)

1.不会独占一行,与相邻的行级元素占同一行

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('获取数据失败');
      });
    }
  }

展示接口内容

v-for="info in newinfo" :key="info.cid"

{{ info.title }}

原文链接:https://www.cnblogs.com/ouyangkai/p/13050256.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：字节、腾讯、滴滴前端面试经验分享，裸辞过后，我终于又活过来了

下一篇：CSS3

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签