前端學習記錄
前端開發
HTML標籤
HTML文檔結構
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: 取惟一名稱javascript
class: 給標籤取類名css
style: 行內樣式html
title: 標題前端
轉義符
| 實體字符 | 編譯後的字符 |
|---|---|
< |
小於號 < |
> |
大於號 > |
& |
於號 & |
|
空格 |
© |
版權 |
× |
乘號 |
÷ |
除號 |
標籤元素
塊級元素
塊級元素(至關執行了 display:block)vue
1.獨佔一行 寬度和高度是可控的,如沒有設置寬度將默認鋪滿java
2.其行內能夠包含塊級和行級元素ios
行級元素
行級元素(至關執行了 display:inline)正則表達式
1.不會獨佔一行,與相鄰的行級元素佔同一行vue-router
2.寬高是不可控的npm
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 }}
相關文章
- 1. 前端學習記錄
- 2. 記錄前端學習
- 3. 【前端學習筆記day01】前端學習筆記目錄
- 4. 前端學習記錄（CSS篇）
- 5. 前端開發學習-網址記錄
- 6. 前端學習第二次記錄
- 7. 記錄個人前端學習過程
- 8. 前端學習報錯記錄 二
- 9. 前端學習記錄（七）：盒模型
- 10. 前端學習以及問題記錄
- 更多相關文章...
- • ADO 添加記錄 - ADO 教程
- • ADO 更新記錄 - ADO 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端學習記錄
- 2. 記錄前端學習
- 3. 【前端學習筆記day01】前端學習筆記目錄
- 4. 前端學習記錄（CSS篇）
- 5. 前端開發學習-網址記錄
- 6. 前端學習第二次記錄
- 7. 記錄個人前端學習過程
- 8. 前端學習報錯記錄 二
- 9. 前端學習記錄（七）：盒模型
- 10. 前端學習以及問題記錄