如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

1.無(wú)序列表
無(wú)序列表是網(wǎng)頁(yè)中最常用的列表，之所以稱(chēng)為“無(wú)序列表”，是因?yàn)槠涓鱾€(gè)列表項(xiàng)之間為并列關(guān)系，沒(méi)有順序級(jí)別之分，列如：

<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>

2.有序列表
有序列表即為有順序的列表，其各個(gè)列表項(xiàng)會(huì)按照一定的順序排列，列如：

<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>


注：列表可以嵌套。

3.超鏈接標(biāo)記< a>
1.超鏈接
一個(gè)網(wǎng)站通常由多個(gè)頁(yè)面構(gòu)成，進(jìn)入網(wǎng)站時(shí)首先看到的是其首頁(yè)，如果想從首頁(yè)跳轉(zhuǎn)到其子頁(yè)面，就需要在首頁(yè)相應(yīng)的位置添加超鏈接。其基本語(yǔ)法格式為：

<a href="跳轉(zhuǎn)目標(biāo)" target=“目標(biāo)窗口的彈出方式”>文本或者圖像</a>
1
其中，target有兩種取值方式：

–blank （在新窗口中打開(kāi)）-self（默認(rèn)在本窗口打開(kāi)）

2.偽類(lèi)
超鏈接標(biāo)記< a >的偽類(lèi) 含義
a:link{ CSS樣式規(guī)則； } 未訪問(wèn)時(shí)超鏈接的狀態(tài)
a:visited{ CSS樣式規(guī)則；} 訪問(wèn)之后超鏈接的狀態(tài)
a:hover{ CSS樣式規(guī)則；} 鼠標(biāo)經(jīng)過(guò)，懸停時(shí)超鏈接的狀態(tài)
a:active{ CSS樣式規(guī)則；} 鼠標(biāo)單擊不動(dòng)時(shí)超鏈接的狀態(tài)
--------------------- 
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

Tab bar 設(shè)計(jì)中，有一個(gè)很重要但卻常常會(huì)被設(shè)計(jì)師們遺漏的關(guān)鍵點(diǎn)──tab 切換時(shí)的 「圖標(biāo)動(dòng)畫(huà)設(shè)計(jì)」。如這些 APP 的底部 tab 設(shè)計(jì)都使用了這一種方式（以下視頻）：

Tab bars圖標(biāo)動(dòng)畫(huà)的作用

精彩的圖標(biāo)動(dòng)畫(huà)，對(duì)整體的設(shè)計(jì)具有畫(huà)龍點(diǎn)睛的作用，降低 tab 切換時(shí)的枯燥感，提升操作的愉悅度和期待感。甚至可以通過(guò) tab 的動(dòng)畫(huà)設(shè)計(jì)給用戶(hù)傳達(dá)出整個(gè) APP 設(shè)計(jì)的品牌及理念。

1. 動(dòng)靜對(duì)比

動(dòng)態(tài)的設(shè)計(jì)豐富了圖標(biāo)更多可能性的表達(dá)，結(jié)合不同的動(dòng)態(tài)效果表達(dá)出不同的情緒或情感。而除了情感的表達(dá)之外，最基礎(chǔ)的作用在于動(dòng)態(tài)比靜態(tài)更加吸引眼球，增加視覺(jué)關(guān)注度，因此在切換 tab 時(shí)具有更強(qiáng)的視覺(jué)沖擊力。

2. 柔和與生硬

緩動(dòng)的動(dòng)效過(guò)渡，相比于無(wú)動(dòng)效的設(shè)計(jì)，在 tab 切換時(shí)整體的視覺(jué)感受會(huì)更加柔和、輕量。過(guò)渡直接的反饋，容易造成生硬而不具美感。

3. 趣味的表達(dá)

由于動(dòng)效的加入，我們?cè)谠O(shè)計(jì) tab 切換時(shí)會(huì)變得更加多元化，而不是單純的設(shè)計(jì)一個(gè)動(dòng)作的反饋。在過(guò)渡的時(shí)間差中，可以進(jìn)行很多趣味的表達(dá)。

3. 情緒代入

圖標(biāo)結(jié)合表情的設(shè)計(jì)，運(yùn)用動(dòng)效的設(shè)計(jì)，讓整體的情緒感受更加直觀。如下圖案例，默認(rèn)態(tài)與選中態(tài)通過(guò)前后的差異對(duì)比，點(diǎn)擊后出現(xiàn)的表情驚喜，具有不一樣的情緒變化。

Tab bar圖標(biāo)動(dòng)畫(huà)的基礎(chǔ)類(lèi)型

動(dòng)畫(huà)的設(shè)計(jì)是多樣化的，Tab bar 圖標(biāo)動(dòng)畫(huà)的類(lèi)型實(shí)際上并沒(méi)有明確的劃分，這里主要列舉的是自己在日常瀏覽設(shè)計(jì)網(wǎng)站時(shí)的收集，以及個(gè)人認(rèn)為比較常見(jiàn)的一些類(lèi)型。我們可以基于這些常見(jiàn)類(lèi)型的設(shè)計(jì)，對(duì)我們的設(shè)計(jì)進(jìn)行再升華，從而提高整體設(shè)計(jì)的質(zhì)感和趣味。

1. 縮放動(dòng)畫(huà)

點(diǎn)擊后通過(guò)一定的比例 「縮放」 反饋，突出 tab 之前的變化，從而強(qiáng)化了 tab 操作的感知，提升對(duì)于操作區(qū)域的視覺(jué)聚焦。結(jié)合不同的縮放效果，可以呈現(xiàn)出不同的視覺(jué)感知，縮放動(dòng)畫(huà)大致分為線性和彈性?xún)煞N類(lèi)型。

線性縮放

圖標(biāo)在放大或縮小的過(guò)程中，使用了勻速的動(dòng)畫(huà)效果，整體動(dòng)畫(huà)一步到位、干凈利落。整體視覺(jué)感知較為柔和。

彈性縮放

帶有彈性縮放的 tab 反饋，讓整體的設(shè)計(jì)更加具有趣味性，相比線性縮放也更有視覺(jué)沖擊力。圖標(biāo)的運(yùn)動(dòng)規(guī)則：先從 0 放大到最大（數(shù)值根據(jù)實(shí)際情況設(shè)定），然后再回彈至正常大小。

2. 透明度自然過(guò)渡

讓 tab 切換之間的過(guò)渡更加自然、柔和。相比于純靜態(tài)切換只多了一層透明度變化，但卻具有完全不一樣的視覺(jué)感受。

3. 位移

位移出現(xiàn)的圖標(biāo)會(huì)產(chǎn)生一定的速度感，但需要控制位移的速度，過(guò)快容易忽略中間的運(yùn)動(dòng)軌跡，而影響自然過(guò)渡的效果。

4. 抖動(dòng)

通過(guò)圖標(biāo)的左右、上下快速位移或旋轉(zhuǎn)形成，整體的動(dòng)畫(huà)效果節(jié)奏較快，具有一定的速度感。情緒表達(dá)上較為俏皮。

左右抖動(dòng)

點(diǎn)擊后，圖標(biāo)反饋進(jìn)行上下快速位移。建議來(lái)回位移次數(shù)不宜太多，控制在 1-2 次左右，次數(shù)太多容易顯得拖沓。

跳動(dòng)的圖標(biāo)

點(diǎn)擊切換后，圖標(biāo)從底部彈起再回到初始位置，整體視覺(jué)感受具有跳動(dòng)的韻律感。

晃動(dòng)的圖標(biāo)

旋轉(zhuǎn)抖動(dòng)的圖標(biāo)比上下或左右會(huì)更加具有趣味感。設(shè)定圖標(biāo)的中心點(diǎn)或角點(diǎn)為旋轉(zhuǎn)軸，通過(guò)來(lái)回晃動(dòng)而形成的效果。

5. 填充

切換時(shí)，默認(rèn) tab 由線性向面性的轉(zhuǎn)變。填充類(lèi)型的動(dòng)畫(huà)效果整體簡(jiǎn)單、直接，直觀地表達(dá)出圖標(biāo)切換前后的對(duì)應(yīng)關(guān)系。關(guān)鍵點(diǎn)在于處理好線性與面性圖標(biāo)的細(xì)節(jié)轉(zhuǎn)換。

中心填充

使用某種幾何圖形（可以是圓形或其他）通過(guò)發(fā)散放大的設(shè)計(jì)方式，結(jié)合一定的節(jié)奏韻律擴(kuò)展至填滿整個(gè)圖標(biāo)。

掃描填充

動(dòng)畫(huà)效果從圖標(biāo)的一側(cè)，通過(guò)劃動(dòng)變化至填滿。

6. 畫(huà)線-線性軌跡

以線性圖標(biāo)或線面圖標(biāo)中的線運(yùn)動(dòng)為主，在設(shè)計(jì)整套圖標(biāo)時(shí)，運(yùn)動(dòng)軌跡需要保持統(tǒng)一（線的初始與結(jié)束的位置/方向等）。軌跡不一致，容易導(dǎo)致圖標(biāo)的一致性被破壞。

局部細(xì)節(jié)畫(huà)線

選擇圖標(biāo)的關(guān)鍵細(xì)節(jié)或圖標(biāo)的特征進(jìn)行畫(huà)線設(shè)計(jì)，增強(qiáng)圖標(biāo)的特征細(xì)節(jié)，提高圖標(biāo)的記憶點(diǎn)。

整體畫(huà)線

與局部細(xì)節(jié)畫(huà)線基本一致，差別的點(diǎn)在于表達(dá)了不同的視覺(jué)感受。整體畫(huà)線從視覺(jué)感受上會(huì)相對(duì)更加飽滿。但需要根據(jù)圖標(biāo)的復(fù)雜程度而定，圖標(biāo)過(guò)渡復(fù)雜，可能容易造成拖沓的動(dòng)畫(huà)效果。

7. 結(jié)合容器

結(jié)合不同的幾何形作為選中圖標(biāo)的當(dāng)前態(tài)的背景，在背景上設(shè)計(jì)出現(xiàn)的動(dòng)畫(huà)效果。既強(qiáng)化了選中當(dāng)前態(tài)，整體的 tab 切換的一致性也較高。

8. 元素介質(zhì)

設(shè)計(jì)上結(jié)合某種圖形元素作為當(dāng)前選中態(tài)，在切換時(shí)通過(guò)元素的位移、跳動(dòng)等方式來(lái)達(dá)到 tab 切換的動(dòng)畫(huà)效果。

Tab圖標(biāo)動(dòng)畫(huà)的組合形

除了以上單種類(lèi)型的動(dòng)畫(huà)方式外，還可以嘗試多種方式結(jié)合。通過(guò)不同的方式結(jié)合可以產(chǎn)生出更多的可能性，讓你的設(shè)計(jì)更加具有創(chuàng)意和打破常規(guī)。

1. 填充+畫(huà)線

2. 填充+抖動(dòng)

3. 彈性縮放+填充

4. 元素介質(zhì)+抖動(dòng)

5. 位移+透明度

更多案例（來(lái)自dribbble）

總結(jié)

tab bar 的圖標(biāo)動(dòng)畫(huà)最大的作用在于解決切換時(shí)的枯燥與單調(diào)，我們?cè)谠O(shè)計(jì)時(shí)除了單純追求動(dòng)畫(huà)的變化及多樣性之外，更多需要思考的是什么樣的動(dòng)畫(huà)更符合我們的設(shè)計(jì)。

本文的主旨是分享自己日?？吹降囊恍﹦?dòng)畫(huà)效果，以及對(duì)收集的內(nèi)容進(jìn)行的分析。實(shí)際的動(dòng)畫(huà)樣式或者效果肯定遠(yuǎn)遠(yuǎn)不只這些，我們可以通過(guò)基礎(chǔ)的方法再結(jié)合自己的創(chuàng)意發(fā)揮出更多滿足自我設(shè)計(jì)的表達(dá)方式。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

HTML 中的div定義：

可定義文檔中的分區(qū)或節(jié)（division/section）。

標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。

如果用 id 或 class 來(lái)標(biāo)記 div，那么該標(biāo)簽的作用會(huì)變得更加有效。
用法

div是一個(gè)塊級(jí)元素。這意味著它的內(nèi)容自動(dòng)地開(kāi)始一個(gè)新行。實(shí)際上，換行是

固有的唯一格式表現(xiàn)?？梢酝ㄟ^(guò) div的 class 或 id 應(yīng)用額外的樣式。
不必為每一個(gè) div都加上類(lèi)或 id，雖然這樣做也有一定的好處。

可以對(duì)同一個(gè) div 元素應(yīng)用 class 或 id 屬性，但是更常見(jiàn)的情況是只應(yīng)用其中一種。這兩者的主要差異是，class 用于元素組（類(lèi)似的元素，或者可以理解為某一類(lèi)元素），而 id 用于標(biāo)識(shí)單獨(dú)的唯一的元素。

實(shí)例
<div id = " text"><div> <div class = " text1"><div> <div class = " text1"><div>
//div 中可以設(shè)置id屬性，通過(guò)引用id屬性來(lái)為div設(shè)置一些樣式

//在style標(biāo)簽中，可以對(duì)你寫(xiě)的代碼進(jìn)行樣式的設(shè)計(jì)，樣式設(shè)計(jì)可以通過(guò)以下幾種方法來(lái)寫(xiě)
1.通過(guò)引用id來(lái)設(shè)置樣式，在id名稱(chēng)前加上# 格式： #id名稱(chēng){ }
#text{ }
2.通過(guò)class來(lái)設(shè)置樣式，class后面的名字可以是一樣的，而id取名唯一，因此在需要設(shè)置同類(lèi)型的樣式時(shí)可以使用class來(lái)設(shè)置 格式： .class名稱(chēng){ }
.text1{ }
3.通過(guò)標(biāo)簽名稱(chēng)來(lái)設(shè)置樣式 格式： div{ }
div{ }

樣式：
1.width :50px; // 寬度
2.height :50px;//高度
3.border : 1px solid red; //邊框,border可以設(shè)置三個(gè)屬性，分別是邊框?qū)挾?，邊框樣式（?shí)線，虛線等），邊框顏色
4.margin:屬性定義及使用說(shuō)明

margin簡(jiǎn)寫(xiě)屬性在一個(gè)聲明中設(shè)置所有外邊距屬性。該屬性可以有1到4個(gè)值。

實(shí)例:

margin:10px 5px 15px 20px;
    上邊距是 10px
    右邊距是 5px
    下邊距是 15px
    左邊距是 20px

margin:10px 5px 15px;
    上邊距是 10px
    右邊距和左邊距是 5px
    下邊距是 15px

margin:10px 5px;
    上邊距和下邊距是 10px
    右邊距和左邊距是 5px

margin:10px;
    所有四個(gè)邊距都是 10px
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

文章來(lái)源：站酷

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

1 狀態(tài)共享

隨著組件的細(xì)化，就會(huì)遇到多組件狀態(tài)共享的情況，Vuex當(dāng)然可以解決這類(lèi)問(wèn)題，不過(guò)就像Vuex官方文檔所說(shuō)的，如果應(yīng)用不夠大，為避免代碼繁瑣冗余，最好不要使用它，今天我們介紹的是vue.js 2.6新增加的Observable API ，通過(guò)使用這個(gè)api我們可以應(yīng)對(duì)一些簡(jiǎn)單的跨組件數(shù)據(jù)狀態(tài)共享的情況。

如下這個(gè)例子，我們將在組件外創(chuàng)建一個(gè)store，然后在App.vue組件里面使用store.js提供的store和mutation方法，同理其它組件也可以這樣使用，從而實(shí)現(xiàn)多個(gè)組件共享數(shù)據(jù)狀態(tài)。

首先創(chuàng)建一個(gè)store.js，包含一個(gè)store和一個(gè)mutations，分別用來(lái)指向數(shù)據(jù)和處理方法。

import Vue from "vue";

export const store = Vue.observable({ count: 0 });

export const mutations = {

setCount(count) {

store.count = count;

}

};

復(fù)制代碼

然后在App.vue里面引入這個(gè)store.js，在組件里面使用引入的數(shù)據(jù)和方法

<template>

<div id="app">

<img width="25%" src="./assets/logo.png">

<p>count:{{count}}</p>

<button @click="setCount(count+1)">+1</button>

<button @click="setCount(count-1)">-1</button>

</div>

</template>

<script>

import { store, mutations } from "./store";

export default {

name: "App",

computed: {

count() {

return store.count;

}

},

methods: {

setCount: mutations.setCount

}

};

</script>

<style>

復(fù)制代碼

你可以點(diǎn)擊在線DEMO查看最終效果

2 長(zhǎng)列表性能優(yōu)化

我們應(yīng)該都知道vue會(huì)通過(guò)object.defineProperty對(duì)數(shù)據(jù)進(jìn)行劫持，來(lái)實(shí)現(xiàn)視圖響應(yīng)數(shù)據(jù)的變化，然而有些時(shí)候我們的組件就是純粹的數(shù)據(jù)展示，不會(huì)有任何改變，我們就不需要vue來(lái)劫持我們的數(shù)據(jù)，在大量數(shù)據(jù)展示的情況下，這能夠很明顯的減少組件初始化的時(shí)間，那如何禁止vue劫持我們的數(shù)據(jù)呢？可以通過(guò)object.freeze方法來(lái)凍結(jié)一個(gè)對(duì)象，一旦被凍結(jié)的對(duì)象就再也不能被修改了。

export default {

data: () => ({

users: {}

}),

async created() {

const users = await axios.get("/api/users");

this.users = Object.freeze(users);

}

};

復(fù)制代碼

另外需要說(shuō)明的是，這里只是凍結(jié)了users的值，引用不會(huì)被凍結(jié)，當(dāng)我們需要reactive數(shù)據(jù)的時(shí)候，我們可以重新給users賦值。

export default {

data: () => ({

users: []

}),

async created() {

const users = await axios.get("/api/users");

this.users = Object.freeze(users);

},

methods:{

// 改變值不會(huì)觸發(fā)視圖響應(yīng)

this.users[0] = newValue

// 改變引用依然會(huì)觸發(fā)視圖響應(yīng)

this.users = newArray

}

};

復(fù)制代碼

3 去除多余的樣式

隨著項(xiàng)目越來(lái)越大，書(shū)寫(xiě)的不注意，不自然的就會(huì)產(chǎn)生一些多余的css，小項(xiàng)目還好，一旦項(xiàng)目大了以后，多余的css會(huì)越來(lái)越多，導(dǎo)致包越來(lái)越大，從而影響項(xiàng)目運(yùn)行性能，所以有必要在正式環(huán)境去除掉這些多余的css，這里推薦一個(gè)庫(kù)purgecss，支持CLI、JavascriptApi、Webpack等多種方式使用，通過(guò)這個(gè)庫(kù)，我們可以很容易的去除掉多余的css。

我做了一個(gè)測(cè)試，在線DEMO

<h1>Hello Vanilla!</h1>

<div>

We use Parcel to bundle this sandbox, you can find more info about Parcel

<a target="_blank" rel="noopener noreferrer">here</a>.

</div>

復(fù)制代碼

body {

font-family: sans-serif;

}

a {

color: red;

}

ul {

li {

list-style: none;

}

} import Purgecss from "purgecss";

const purgecss = new Purgecss({

content: ["**/*.html"],

css: ["**/*.css"]

});

const purgecssResult = purgecss.purge();

終產(chǎn)生的purgecssResult結(jié)果如下，可以看到多余的a和ul標(biāo)簽的樣式都沒(méi)了

4 作用域插槽

利用好作用域插槽可以做一些很有意思的事情，比如定義一個(gè)基礎(chǔ)布局組件A，只負(fù)責(zé)布局，不管數(shù)據(jù)邏輯，然后另外定義一個(gè)組件B負(fù)責(zé)數(shù)據(jù)處理，布局組件A需要數(shù)據(jù)的時(shí)候就去B里面去取。假設(shè)，某一天我們的布局變了，我們只需要去修改組件A就行，而不用去修改組件B，從而就能充分復(fù)用組件B的數(shù)據(jù)處理邏輯，關(guān)于這塊我之前寫(xiě)過(guò)一篇實(shí)際案例，可以點(diǎn)擊這里查看。

這里涉及到的一個(gè)最重要的點(diǎn)就是父組件要去獲取子組件里面的數(shù)據(jù)，之前是利用slot-scope，自vue 2.6.0起，提供了更好的支持 slot和 slot-scope 特性的 API 替代方案。

比如，我們定一個(gè)名為current-user的組件：

<span>

<slot>{{ user.lastName }}</slot>

</span>

復(fù)制代碼

父組件引用current-user的組件，但想用名替代姓（老外名字第一個(gè)單詞是名，后一個(gè)單詞是姓）：

<current-user>

{{ user.firstName }}

</current-user>

復(fù)制代碼

這種方式不會(huì)生效，因?yàn)閡ser對(duì)象是子組件的數(shù)據(jù)，在父組件里面我們獲取不到，這個(gè)時(shí)候我們就可以通過(guò)v-slot 來(lái)實(shí)現(xiàn)。

首先在子組件里面，將user作為一個(gè)<slot>元素的特性綁定上去：

<span>

<slot v-bind:user="user">

{{ user.lastName }}

</slot>

</span>

復(fù)制代碼

之后，我們就可以在父組件引用的時(shí)候，給v-slot帶一個(gè)值來(lái)定義我們提供的插槽 prop 的名字：

<current-user>

<template v-slot:default="slotProps">

{{ slotProps.user.firstName }}

</template>

</current-user>

復(fù)制代碼

這種方式還有縮寫(xiě)語(yǔ)法，可以查看獨(dú)占默認(rèn)插槽的縮寫(xiě)語(yǔ)法，最終我們引用的方式如下：

<current-user v-slot="slotProps">

{{ slotProps.user.firstName }}

</current-user>

復(fù)制代碼

相比之前slot-scope代碼更清晰，更好理解。

5 屬性事件傳遞

寫(xiě)過(guò)高階組件的童鞋可能都會(huì)碰到過(guò)將加工過(guò)的屬性向下傳遞的情況，如果碰到屬性較多時(shí)，需要一個(gè)個(gè)去傳遞，非常不友好并且費(fèi)時(shí)，有沒(méi)有一次性傳遞的呢（比如react里面的{...this.props}）？答案就是v-bind和v-on。

舉個(gè)例子，假如有一個(gè)基礎(chǔ)組件BaseList，只有基礎(chǔ)的列表展示功能，現(xiàn)在我們想在這基礎(chǔ)上增加排序功能，這個(gè)時(shí)候我們就可以創(chuàng)建一個(gè)高階組件SortList。

<!-- SortList  -->

<template>

<BaseList v-bind="$props" v-on="$listeners"> <!-- ... --> </BaseList>

</template>

<script>

import BaseList from "./BaseList";

// 包含了基礎(chǔ)的屬性定義

import BaseListMixin from "./BaseListMixin";

// 封裝了排序的邏輯

import sort from "./sort.js";

export default {

props: BaseListMixin.props,

components: {

BaseList

}

};

</script>

復(fù)制代碼

可以看到傳遞屬性和事件的方便性，而不用一個(gè)個(gè)去傳遞

6 函數(shù)式組件

函數(shù)式組件，即無(wú)狀態(tài)，無(wú)法實(shí)例化，內(nèi)部沒(méi)有任何生命周期處理方法，非常輕量，因而渲染性能高，特別適合用來(lái)只依賴(lài)外部數(shù)據(jù)傳遞而變化的組件。

寫(xiě)法如下：

在template標(biāo)簽里面標(biāo)明functional

只接受props值

不需要script標(biāo)簽

<!-- App.vue -->

<template>

<div id="app">

<List

:items="['Wonderwoman', 'Ironman']"

:item-click="item => (clicked = item)"

/>

<p>Clicked hero: {{ clicked }}</p>

</div>

</template>

<script>

import List from "./List";

export default {

name: "App",

data: () => ({ clicked: "" }),

components: { List }

};

</script>

復(fù)制代碼

<!-- List.vue 函數(shù)式組件 -->

<template functional>

<div>

<p v-for="item in props.items" @click="props.itemClick(item);">

{{ item }}

</p>

</div>

</template>

復(fù)制代碼

7 監(jiān)聽(tīng)組件的生命周期

比如有父組件Parent和子組件Child，如果父組件監(jiān)聽(tīng)到子組件掛載mounted就做一些邏輯處理，常規(guī)的寫(xiě)法可能如下：

// Parent.vue

<Child @mounted="doSomething"/>

// Child.vue

mounted() {

this.$emit("mounted");

}

復(fù)制代碼

這里提供一種特別簡(jiǎn)單的方式，子組件不需要任何處理，只需要在父組件引用的時(shí)候通過(guò)@hook來(lái)監(jiān)聽(tīng)即可，代碼重寫(xiě)如下：

<Child @hook:mounted="doSomething"/>

復(fù)制代碼

當(dāng)然這里不僅僅是可以監(jiān)聽(tīng)mounted，其它的生命周期事件，例如：created，updated等都可以，是不是特別方便~

參考鏈接：

vueTips

vuePost

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。