主頁 > 企業開發 > 前端學習記錄

前端學習記錄

2020-09-13 22:41:37 企業開發

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=https://www.cnblogs.com/ouyangkai/p/"bitbug_favicon.ico" type="image/x-icon">
	
  <link rel="stylesheet" href="css/base.css">

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 定義媒介內容的分組，以及它們的標題，

轉義符

物體字符 編譯后的字符
&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=https://www.cnblogs.com/ouyangkai/p/"">
  • 
            
  •

    • (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=https://www.cnblogs.com/ouyangkai/p/"">Click me

    (2)縮寫↓

    p>{Click }+a{here}+{ to continue}

    <p>Click <a href=https://www.cnblogs.com/ouyangkai/p/"">here to continue

    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=https://www.cnblogs.com/ouyangkai/p/"">

    a:link

    <a href=https://www.cnblogs.com/ouyangkai/p/"http://">

    a:mail

    <a href="mailto:"></a>

    link:css

    <link rel="stylesheet" href=https://www.cnblogs.com/ouyangkai/p/"style.css" />

    link:print

    <link rel="stylesheet" href=https://www.cnblogs.com/ouyangkai/p/"print.css" media="print" />

    link:favicon

    <link rel="shortcut icon" type="image/x-icon" href=https://www.cnblogs.com/ouyangkai/p/"favicon.ico" />

    link:touch

    <link rel="apple-touch-icon" href=https://www.cnblogs.com/ouyangkai/p/"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=https://www.cnblogs.com/ouyangkai/p/""></script>

    iframe

    <iframe src=https://www.cnblogs.com/ouyangkai/p/"" 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;

  /*背景透明*/
  background-color: hsla(0,0%,100%,.7);

    浮動 float

    float: left;

    字體 font

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

 /*字體加深*/
 text-shadow: 0 0 1px rgba(0,0,0,.3);

 /*起始段落空2格*/
 text-indent: 2em;

    盒子邊距 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 #868686;
/* 邊框邊角弧度 */
  border-radius: 5px;
/* 邊框下劃線 */
  border-bottom: 1px solid #edeef0;
/* 樣式 1px */
  border-style: ridge;
  border-width: 1px;

    背景3d邊框

     -webkit-box-sizing: border-box!important;
        box-sizing: border-box!important;
        overflow: hidden!important;
        border-radius: 2px!important;
        -webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)!important;
        box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)!important;

    2D影片

    影片效果

     /* 影片效果 */
  transition: all 5s;

    影片觸發

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

box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.3);

    transition

    顏色漸變

        父標簽
   -webkit-transition:background-color .5s ease-in;
	-moz-transition:background-color .5s ease-in;
	transition:background-color .5s ease-in;

    
    :hover{background-color:#bbb;}

    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;

    圖片模糊

            filter: blur(1px);
        -webkit-filter: blur(1px); /* chrome, opera */
        -ms-filter: blur(1px);
        -moz-filter: blur(1px);

    元素隱藏

    visibility: hidden; 這個屬性只是簡單的隱藏某個元素，但是元素占用的空間任然存在；
opacity: 0;``CSS3屬性，設定0可以使一個元素完全透明；
position: absolute; 設定一個很大的 left 負值定位，使元素定位在可見區域之外；
display: none; 元素會變得不可見，并且不會再占用檔案的空間；
transform: scale(0); 將一個元素設定為縮放無限小，元素將不可見，元素原來所在的位置將被保留；
<div hidden="hidden"> HTML5屬性,效果和display:none;相同，但這個屬性用于記錄一個元素的狀態；
height: 0; 將元素高度設為 0 ，并消除邊框；
filter: blur(0); CSS3屬性，將一個元素的模糊度設定為0，從而使這個元素“消失”在頁面中；

    回應式布局

    開發實作

    媒體查詢

    百分比布局

    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-container>
      <b-row cols="1" cols-sm="2" cols-md="3" cols-lg="5">
        <b-col>
          <div class="n-nav-1">
            <h6>福利導航</h6>
            <p>
              福利導航導航利導航福利導航福利導航福利導航
            </p>
          </div>
        </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

    cbbaa tfftt只是簡單地切換元素的 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=https://www.cnblogs.com/ouyangkai/p/"url">...

    動態系結

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

    attributeName 會被作為一個運算式進行動態求值，值將會作為最終的引數來使用，例如，如果你的 Vue 實體有一個 data property attributeName，其值為 "href"，那么這個系結將等價于 v-bind:href，

    縮寫

    <!-- 完整語法 -->
<a v-bind:href=https://www.cnblogs.com/ouyangkai/p/"url">...


...


 ...

    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=https://www.cnblogs.com/ouyangkai/p/"Jack" v-model="checkedNames">
  
  
  
  
  
  
    
  Checked names: {{ checkedNames }}

    new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

    單選按鈕

    <div id="example-4">
  <input type="radio" id="one" value=https://www.cnblogs.com/ouyangkai/p/"One" v-model="picked">
  
  
    
  
  
  
    
  Picked: {{ picked }}

    new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})
    選擇框

    單選時：

    <div id="example-5">
  <select v-model="selected">
    <option disabled value=https://www.cnblogs.com/ouyangkai/p/"">請選擇
    
    
    
  
  Selected: {{ selected }}


    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=https://www.cnblogs.com/ouyangkai/p/"option.value">
    {{ option.text }}
  

Selected: {{ selected }}

    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=https://www.cnblogs.com/ouyangkai/p/"a">

    v-text

    <!-- App.vue --> 
<h1>v-text</h1>
<div v-text="message"></div>

    組件基礎

    基本示例：
    // 定義一個名為 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.config.js

    const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}
const webpack = require("webpack");
module.exports = {
  // 基本路徑
  publicPath: "./",
  // 輸出檔案目錄
  outputDir: 'dist',
  // webpack-dev-server 相關配置
  devServer: {
    // port: 8888,
    // ...
  },

  lintOnSave: true,
  runtimeCompiler: true, //加入內容
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('lib', resolve('src/lib'))
  }

}

    transitiond過度影片

    <transition :name="transitionName" mode="out-in">
      <router-view class="home-router"></router-view>
    </transition>

    <script>
export default {
  name: 'App',
  data () {
    return {
      transitionName: 'slide-right'
    }
  },
  methods: {
  },
}
</script>

    <style>
  .home-router {
    transition: all 0.5s ease;
  }
   /*過度前*/
   .slide-left-enter,
  .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  /*后*/
  .slide-left-leave-active,
  .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100% 0);
  }
</style>

    vue-router

    安裝路由

    npm install vue-router

    import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

    路由封裝

    1.main.js

    import router from '@/router'
import request from '@/network/request'

new Vue({
  router,//注冊路由
  render: h => h(App),
}).$mount('#app')

    2.建檔案夾router

    index.js

    import Vue from 'vue'
import Router from 'vue-router'

const Index = () => import('@/components/Index') // 路由懶
Vue.use(Router)
const routes = [{ // 映射路由
    path: '/',
    redirect: '/Index' // 重定向默認值
  },
  {
    path: '/Index',
    component: Index,
    meta: {
      title: 'Index'
    }
  }
]
const router = new Router({ // 創建路由物件實體
  mode: 'history',
  routes

})
// 解決重復點擊鏈接出現錯誤
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
export default router // 將物件 傳遞到vue實體

    跳轉

    1.無參跳轉

    this.$router.push('/Index')

    2.帶引數跳轉

    this.$router.push({ path: '/Index-text', query: { id: cid } })

    2.1頁面獲取引數呼叫

    data () {
    return {
      id: this.$route.query.id,
    }
    
url: '/api/Contents/AsyGetTestID?id=' + this.id

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

    mavon-editor

    安裝參考

    $ npm install mavon-editor --save

    // 全域注冊
    // import with ES6
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)
    new Vue({
        'el': '#main',
        data() {
            return { value: '' }
        }
    })

    呼叫

    <div id="main">
    <mavon-editor v-model="value"/>
</div>

    獲取資料預覽

    <template>
  <div class="editor-text">
    <mavon-editor
      v-model="newinfo.text"
      :subfield="false"
      :boxShadow="false"
      defaultOpen="preview"
      :toolbarsFlag="false"
    />
  </div>
</template>

    字體圖示

    一.首先下載好的iconfont.js放到assets/icon

    二.引入css 檔案
    在同級目錄下創建一個icon.css檔案

    .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

    main.js匯入

    import './assets/icon/fonts/iconfont.js'

import './assets/icon/icon.css'

    參考

     <svg class="icon" aria-hidden="true">
   <use xlink:href=https://www.cnblogs.com/ouyangkai/p/"#icon-bingqilinqiu">

    時間線組件

    安裝

    yarn add vue-light-timeline
npm i vue-light-timeline

    匯入

    import Vue from 'vue';
import LightTimeline from 'vue-light-timeline';

Vue.use(LightTimeline);

    呼叫

    <template>
  <light-timeline :items='items'></light-timeline>
</template>
<script>
const theme = 'red';
export default {
  data () {
    return {
      items: [
        {
          tag: '2018-01-12',
          content: 'hallo'
        },
        {
          tag: '2018-01-13',
          color: '#dcdcdc',
          type: 'circle',
          content: 'world'
        },
        {
          type: 'star',
          tag: '2018-01-14',
          htmlMode: true,
          content: `<div style="color: ${theme};"> =v = </div>`
        }
      ]
    }
  }
}
</script>

    sass

    Ruby

    window下安裝SASS首先需要安裝Ruby，先從官網下載Ruby并安裝，

    檢測是否安裝成功

    ruby -v

    sass安裝

    //安裝如下(如mac安裝遇到權限問題需加 sudo gem install sass)
gem install sass
gem install compass

    安裝完成之后，你應該通過運行下面的命令來確認應用已經正確地安裝到了電腦中：

    sass -v
compass -v


//更新sass
gem update sass

//查看sass版本
sass -v

//查看sass幫助
sass -h

    vue安裝sass依賴

    npm install --save-dev sass-loader 

/ /sass-loader依賴于node-sass

npm install --save-dev node-sass

    轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/28053.html

    標籤：Html/Css

    上一篇：css：css3（圓角邊框、盒子陰影、文字陰影）

    下一篇：位元組、騰訊、滴滴前端面試經驗分享，裸辭過后，我終于又活過來了！

    標籤雲
    其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

    熱門瀏覽
    • IEEE1588PTP在數字化變電站時鐘同步方面的應用

      IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入，國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

      uj5u.com 2020-09-10 03:51:52 more
    • HTTP request smuggling CL.TE

      CL.TE 簡介 前端通過Content-Length處理請求，通過反向代理或者負載均衡將請求轉發到后端，后端Transfer-Encoding優先級較高，以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

      uj5u.com 2020-09-10 03:52:11 more
    • 網路滲透資料大全單——漏洞庫篇

      網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

      uj5u.com 2020-09-10 03:52:15 more
    • 京準講述NTP時鐘服務器應用及原理

      京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差，然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成：導航授時衛星、地面檢測校正維護系統和用戶 ......

      uj5u.com 2020-09-10 03:52:25 more
    • 利用北斗衛星系統設計NTP網路時間服務器

      利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議，高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計，高精度時鐘直接來源于北斗 ......

      uj5u.com 2020-09-10 03:52:35 more
    • 詳細解讀電力系統各種對時方式

      詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz，更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置，該裝置以M國全球定位系統（GLOBAL POSITIONING SYSTEM,縮寫為GPS）或者我國北 ......

      uj5u.com 2020-09-10 03:52:45 more
    • 如何保證外包團隊接入企業內網安全

      不管企業規模的大小，只要企業想省錢，那么企業的某些服務就一定會采用外包的形式，然而看似美好又經濟的策略，其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的，最常見的就是話務/客服這種需要大量重復性、無技術性的服務，或者是一些銷售外包、特殊的職能外包等 ......

      uj5u.com 2020-09-10 03:52:57 more
    • PHP漏洞之【整型數字型SQL注入】

      0x01 什么是SQL注入 SQL是一種注入攻擊，通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里，當然也會發生在其它地發，如登錄框等等也會存在注入，只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

      uj5u.com 2020-09-10 03:55:40 more
    • [GXYCTF2019]禁止套娃

      git泄露獲取原始碼 使用GET傳參，引數為exp 經過三層過濾執行 第一層過濾偽協議，第二層過濾帶引數的函式，第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式，相當于匹配函式里的引數 因此傳遞 ......

      uj5u.com 2020-09-10 03:56:07 more
    • 等保2.0實施流程

      流程 結論 ......

      uj5u.com 2020-09-10 03:56:16 more
    最新发布
    • 使用Django Rest framework搭建Blog

      在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

      uj5u.com 2023-04-20 08:17:54 more
    • 記錄-new Date() 我忍你很久了！

      這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過？就是它的諸多怪異的設定讓你每每用的時候，都可能不小心踩坑。造成程式意外出錯，卻一下子找不到問題出處，那叫一個煩透了…… 下面，我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

      uj5u.com 2023-04-20 08:17:47 more
    • 使用Vue.js實作文字跑馬燈效果

      實作文字跑馬燈效果，首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下： 實作代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

      uj5u.com 2023-04-20 08:12:31 more
    • JavaScript 運算子

      JavaScript 運算子/運算子 在 JavaScript 中，有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子： 1、可選鏈運算子（optional chaining operator） ?.是可選鏈運算子（optional chaining operator）。?. 可選鏈操 ......

      uj5u.com 2023-04-20 08:02:25 more
    • CSS—相對單位rem

      一、概述 rem是一個相對長度單位，它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思，中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px，即默認情況下： 1rem = 16px rem布局原理：根據CSS媒體查詢功能，更改根標簽的字體尺寸，實作rem單位隨螢屏尺寸的變化，如 ......

      uj5u.com 2023-04-20 08:02:21 more
    • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

      好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

      uj5u.com 2023-04-20 08:01:50 more
    • 如何在 vue3 中使用 jsx/tsx?

      我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

      uj5u.com 2023-04-20 08:01:37 more
    • 【Vue2.x原始碼系列06】計算屬性computed原理

      本章目標：計算屬性是如何實作的？計算屬性快取原理以及洋蔥模型的應用？在初始化Vue實體時，我們會給每個計算屬性都創建一個對應watcher，我們稱之為計算屬性watcher ......

      uj5u.com 2023-04-20 08:01:31 more
    • http1.1與http2.0

      一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

      uj5u.com 2023-04-20 08:01:10 more
    • http1.1與http2.0

      一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

      uj5u.com 2023-04-20 08:00:32 more

    Copyright © 2010-2020 有解無憂