HTML標籤

HTML文檔結構#javascript

head#

Copy
<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#

Copy
<!-- 主體內容 --> <body> <h3>Junior</h3> </body> 

style#

Copy
<!-- css樣式 --> <style></style> 

script#

Copy
<!-- 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

轉義符#

實體字符 編譯後的字符
&lt; 小於號 <
&gt; 大於號 >
&amp; 於號 &
&nbsp; 空格
&copy; 版權
&times; 乘號
&divide; 除號

標籤元素#

塊級元素#

塊級元素(至關執行了 display:block)ios

1.獨佔一行 寬度和高度是可控的,如沒有設置寬度將默認鋪滿nginx

2.其行內能夠包含塊級和行級元素正則表達式

行級元素#

行級元素(至關執行了 display:inline)vue-router

1.不會獨佔一行,與相鄰的行級元素佔同一行docker

2.寬高是不可控的

3.其行內只有包含行級元素

Emmet語法#

2-1. 後代:>#

Copy
nav>ul>li
Copy
<nav> <ul> <li></li> </ul> </nav> 

2-2. 兄弟:+#

Copy
div+p+bq
Copy
<div></div> <p></p> <blockquote></blockquote> 

2-3. 上級:^#

Copy
div+div>p>span+em^bq 
Copy
<div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div> 
Copy
div+div>p>span+em^^bq 
Copy
<div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote> 

2-4. 分組:()#

(1)縮寫↓

Copy
div>(header>ul>li*2>a)+footer>p 
Copy
<div> <header> <ul> <li><a href=""></a><li> <li><a href=""></a><li> </ul> </header> </footer> <p></p> </footer> </div> 

(2)縮寫↓

Copy
(div>dl>(dt+dd)*3)+footer>p 
Copy
<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer> 

2-5. 乘法:*#

縮寫↓

Copy
ul>li*5 
Copy
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <ul> 

2-6.自增符號:$#

1)縮寫↓

Copy
ul>li.item$*5 
Copy
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <ul> 

(2)縮寫↓

Copy
h$[title=item$]{Header $}*3 
Copy
<h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3> 

(3)縮寫↓

Copy
ul>li.item$$$*5 
Copy
<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul> 

(4)縮寫↓

Copy
ul>li.item$@-*5 
Copy
<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul> 

(5)縮寫↓

Copy
ul>li.item$@3*5 
Copy
<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)縮寫↓

Copy
#header 
Copy
<div id="header"></div> 

(2)縮寫↓

Copy
.title 
Copy
<div class="title"></div> 

(3)縮寫↓

Copy
form#search.wide 
Copy
<form id="search" class="wide"></form> 

(4)縮寫↓

Copy
p.class1.class2.class3 
Copy
<p class="class1 class2 class3"></p> 

2-8.自定義屬性#

(1)縮寫↓

Copy
p[title="Hello world"] 
Copy
<p title="Hello world"></p> 

(2)縮寫↓

Copy
td[rowspan=2 colspan=3 title] 
Copy
<td rowspan="2" colspan="3" title=""></td> 

(3)縮寫↓

Copy
[a='value1' b="value2"] 
Copy
<div a="value1" b="value2"></div> 

2-9.文本:{}#

(1)縮寫↓

Copy
a{Click me} 
Copy
<a href="">Click me</a> 

(2)縮寫↓

Copy
p>{Click }+a{here}+{ to continue} 
Copy
<p>Click <a href="">here</a> to continue</p> 

2-10.隱式標籤#

(1)縮寫↓

Copy
.class 
Copy
<div class="class"></div> 

(2)縮寫↓

Copy
em>.class 
Copy
<em><span class="class"></span></em> 

(3)縮寫↓

Copy
ul>.class 
Copy
<ul> <li class="class"></li> </ul> 

(4)縮寫↓

Copy
table>.row>.col 
Copy
<table> <tr class="row"> <td class="col"></td> </tr> </table> 

HTML標籤語法#

3-1. 全部未知的縮寫都會轉換成標籤#

縮寫↓

Copy
hangge 
Copy
<hangge></hangge> 

3-2.基本html標籤#

Copy
!
Copy
<!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> 
Copy
a 
Copy
<a href=""></a> 
Copy
a:link 
Copy
<a href="http://"></a> 
Copy
a:mail 
Copy
<a href="mailto:"></a> 
Copy
link:css 
Copy
<link rel="stylesheet" href="style.css" /> 
Copy
link:print 
Copy
<link rel="stylesheet" href="print.css" media="print" /> 
Copy
link:favicon 
Copy
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> 
Copy
link:touch 
Copy
<link rel="apple-touch-icon" href="favicon.png" /> 
Copy
meta:utf 
Copy
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
Copy
meta:win 
Copy
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" /> 
Copy
meta:vp 
Copy
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> 
Copy
meta:compat 
Copy
<meta http-equiv="X-UA-Compatible" content="IE=7" /> 
Copy
script:src 
Copy
<script src=""></script> 
Copy
iframe 
Copy
<iframe src="" frameborder="0"></iframe> 
Copy
form 
Copy
<form action=""></form> 
Copy
form:get 
Copy
<form action="" method="get"></form> 
Copy
inp 
Copy
<input type="text" name="" id="" /> 
Copy
input:hidden 
Copy
<input type="hidden" name="" /> 
Copy
input:h 
Copy
<input type="hidden" name="" /> 
Copy
input:text, input:t 
Copy
<input type="text" name="" id="" /> 
Copy
input:search 
Copy
<input type="search" name="" id="" /> 
Copy
input:email 
Copy
<input type="email" name="" id="" /> 
Copy
html:xml 
Copy
<html xmlns="http://www.w3.org/1999/xhtml"></html> 

CSS屬性

寬高#

Copy
height: 310px; width: 65%; 

動畫簡寫屬性#

animation 動畫名稱 持續時間 運動曲線 什麼時候開始 播放次數 是否反方向 動畫開始或結束狀態

Copy
animation: name duration timing-function delay iteration-count direction fill-mode; 

背景 background#

Copy
/* 背景圖片 */ background: no-repeat center/100% url("../img/index.png"); /* 背景顏色 */ background-color: #ffffff; 

浮動 float#

Copy
float: left; 

字體 font#

Copy
/* 字體顏色 */ color: #888888; /* 字體粗細 */ font-weight: 400; /* 字體大小 */ font-size: 14px; /* 文字居中 */ text-align: center; /* 字體行內居中 */ line-height: 45px; 

盒子邊距 margin | padding#

Copy
/* 外邊距 */ margin: 60px 0 0 -40px; /* 居中顯示 */ margin: 0 auto; /* 向下10px */ margin-bottom: 10px; /* 外邊距 */ padding: 15px 0 10px 12px; 

透明#

Copy
opacity: 0.9; 

邊框 border#

Copy
/* 邊框寬度1px 樣式 顏色 */ border: 1px solid #edeef0; /* 邊框邊角弧度 */ border-radius: 5px; /* 邊框下劃線 */ border-bottom: 1px solid #edeef0; /* 樣式 1px */ border-style: ridge; border-width: 1px; 

2D動畫#

動畫效果#

Copy
/* 動畫效果 */ transition: all 5s; 

動畫觸發#

Copy
:hover { /* 放大2倍 */ /* transform: scale(2, 2); */ /* 旋轉 */ transform: rotate(720deg); /* 上移 */ transform: translateY(-3px); } 

3D動畫#

3D轉換 translate3d#

Copy
transform: translate3d(0,100px,100px); 

透視 perspective#

Copy
/* 透視寫在被觀察元素的父盒子上面 */ perspective: 500px; 

旋轉 rotate3d#

Copy
transform: rotateX(45deg); transform: rotateY(); transform: rotateZ(); /* 自定義 */ transform: rotate3d(x,y,z,deg); 

3d呈現 transform-style#

Copy
/* 讓子元素保持3d立體空間環境 */ transform-style: preserve-3d; 

響應式佈局#

開發實現#

媒體查詢

百分比佈局

rem佈局

視口單位佈局(vw/vh)

設計步驟#

設置meta標籤

媒體查詢設置樣式

設置多種視圖寬度

css 樣式簡寫#

4-2. 經常使用樣式簡寫#

pos

Copy
position:relative; 

t

Copy
top:; 

pos:s

Copy
position:static; 

pos:a

Copy
position:absolute; 

pos:r

Copy
position:relative; 

pos:f

Copy
position:fixed; 

t

Copy
top:; 

t:a

Copy
right:auto; 

c

Bootstrap

container-fluid#

.container-fluid 則支持全屏的流式佈局,以下使用:

Copy
<div class="container-fluid"> ... </div> 

自定義適應寬度

Copy
<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 標籤#

Copy
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

響應式外部容器#

它容許在指定的屏幕下定義 100%寬

.container-sm 則只在sm屏幕下顯示100%寬,其它斷點包括.container-md、 .container-lg、 .containerxl

Copy
<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> 

分割線#

Copy
<div class="dropdown-divider"></div> 

基於FlexBox佈局#

一個簡明的Bootstrap 4框架(只區分pc與手機並基於FlexBox佈局):

Copy
<div class="container"> <div class="row"> <div class="col-sm"> </div> </div> </div> 

Emment語法:

Copy
div.container>div.row>div.col-sm

全柵格定義框架#

Copy
<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語法:

Copy
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

安裝#

Copy
# With npm npm install vue bootstrap-vue bootstrap # With yarn yarn add vue bootstrap-vue bootstrap 

程序入口點注BootstrapVue:

Copy
// 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

Copy
// app.js import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' 

行列#

Copy
<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>

關鍵字

Copy
<b-row>  <b-col>  <b-container>  <b-form-row>
Copy
<b-col sm="auto"> 實例的寬度將自動爲25%。 

列屬性 smmdlgxl表示在不一樣斷點處,每行可能使用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

數據對象#

Copy
data: {
  newTodoText: '', visitCount: 0, hideCompletedTodos: false, todos: [], error: null } 

文本插值#

Copy
{{ }}

v-once 執行一次性地插值

Copy
<span v-once>這個將不會改變: {{ msg }}</span> 

v-html

Copy
<p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> 

指令#

v-if#

Copy
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

v-show#

只是簡單地切換元素的 CSS property display

Copy
<h1 v-show="ok">Hello!</h1>

v-for#

基於一個數組來渲染一個列表#
Copy
<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>
Copy
var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) 

可選的第二個參數,即當前項的索引。

Copy
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
以用 of 替代 in 做爲分隔符,由於它更接近 JavaScript 迭代器的語法:
Copy
<div v-for="item of items"></div>
遍歷對象#
Copy
<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
Copy
new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } }) 

提供第二個的參數爲 property 名稱 (也就是鍵名):

Copy
<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

還能夠用第三個參數做爲索引:

Copy
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

惟一key

Copy
<div v-for="item in items" v-bind:key="item.id">
  <!-- 內容 -->
</div>
使用值範圍#

v-for 也能夠接受整數。在這種狀況下,它會把模板重複對應次數。

Copy
<div>
  <span v-for="n in 10">{{ n }} </span>
</div>
在template使用#
Copy
<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>
自定義組件上使用#
Copy
<my-component v-for="item in items" :key="item.id"></my-component>

v-bind#

Copy
<a v-bind:href="url">...</a>

動態綁定

Copy
<a v-bind:[attributeName]="url"> ... </a>

attributeName 會被做爲一個表達式進行動態求值,值將會做爲最終的參數來使用。例如,若是你的 Vue 實例有一個 data property attributeName,其值爲 "href",那麼這個綁定將等價於 v-bind:href。

縮寫

Copy
<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

<!-- 動態參數的縮寫 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on:click#

基礎語法#
Copy
<a v-on:click="doSomething">...</a>

動態的事件名綁定處理函數

Copy
<a v-on:[eventName]="doSomething"> ... </a>

縮寫

Copy
<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

<!-- 動態參數的縮寫 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
事件修飾符#
Copy
<!-- 阻止單擊事件繼續傳播 -->
<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>
按鍵修飾符#
Copy
<!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
.exact 修飾符#

修飾符容許你控制由精確的系統修飾符組合觸發的事件

Copy
<!-- 即便 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>
鼠標按鈕修飾符#
Copy
.left .right .middle 

v-model#

v-model 指令在表單 <input><textarea> 及 <select> 元素上建立雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。

文本#
Copy
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
多行文本#
Copy
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
複選框#

單個複選框,綁定到布爾值:

Copy
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

多個複選框,綁定到同一個數組:

Copy
<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>
Copy
new Vue({ el: '#example-3', data: { checkedNames: [] } }) 

單選按鈕

Copy
<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>
Copy
new Vue({ el: '#example-4', data: { picked: '' } }) 
選擇框#

單選時:

Copy
<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>
Copy
new Vue({ el: '...', data: { selected: '' } }) 

多選時 (綁定到一個數組):

Copy
<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>
Copy
new Vue({ el: '#example-6', data: { selected: [] } }) 

用 v-for 渲染的動態選項:

Copy
<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
Copy
new Vue({ el: '...', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } }) 
值綁定#
Copy
<!-- 當選中時,`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>

組件基礎#

基本示例:#
Copy
// 定義一個名爲 button-counter 的新組件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) 

建立的 Vue 根實例中,把這個組件做爲自定義元素來使用:

Copy
<div id="components-demo">
  <button-counter></button-counter>
</div>


new Vue({ el: '#components-demo' })
組件名#
Copy
Vue.component('my-component-name', { /* ... */ }) 

這些組件是全局註冊的。也就是說它們在註冊以後能夠用在任何新建立的 Vue 根實例 (new Vue) 的模板中

局部註冊#

經過一個普通的 JavaScript 對象來定義組件:

Copy
var ComponentA = { /* ... */ } var ComponentB = { /* ... */ } 

而後在 components 選項中定義你想要使用的組件:

Copy
new Vue({ el: '#app', components: { 'component-a': ComponentA, 'component-b': ComponentB } }) 
在模塊中局部註冊#
Copy
import ComponentA from './ComponentA' import ComponentC from './ComponentC' export default { components: { ComponentA, ComponentC }, // ... } 
自動化全局註冊#

可能你的許多組件只是包裹了一個輸入框或按鈕之類的元素,是相對通用的。咱們有時候會把它們稱爲基礎組件,它們會在各個組件中被頻繁的用到。

Copy
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

Copy
npm install vue-router 

安裝路由

Copy
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 

axios

安裝#

Copy
npm install --save axios vue-axios

main.js 導入

Copy
import request from '@/network/request' //封裝的js new Vue({ router, request, //註冊axios render: h => h(App), }).$mount('#app') 

封裝公共實例#

建network 文件夾 下新建 request.js

Copy
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的頁面導入

Copy
import Headers from './Headers' 
Copy
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('獲取數據失敗'); }); } } 
相關文章
相關標籤/搜索