在學(xué)習(xí)應(yīng)用css之前我們要先了解一下什么是css。CSS是Cascading Style Sheets(層疊樣式表)的簡稱.
為了提高網(wǎng)頁的維護(hù)更新效率，我們可以使用樣式表，來僅僅改變一個文件，就能達(dá)到同時改變幾百個網(wǎng)頁的外觀。為了能充分用好樣式表的強(qiáng)大性和靈活性，筆者就怎樣有效使用樣式表，來談?wù)勛约旱囊恍┬牡皿w會
隨著互聯(lián)網(wǎng)經(jīng)濟(jì)的不斷發(fā)展，互聯(lián)網(wǎng)上的專業(yè)網(wǎng)站、公眾服務(wù)網(wǎng)站以及企業(yè)門戶的數(shù)量都在飛速的增長，各網(wǎng)站的信息量也呈爆炸性增長的趨勢。面對這些龐大的信 息量，我們對網(wǎng)頁中每一個欄目的增刪，都會是一個很復(fù)雜的過程。為了提高網(wǎng)頁的維護(hù)更新效率，我們可以使用樣式表，來僅僅改變一個文件，就能達(dá)到同時改變 幾百個網(wǎng)頁的外觀，而其個性化的表現(xiàn)未受任何損失。為了能充分用好樣式表的強(qiáng)大性和靈活性，筆者就怎樣有效使用樣式表，來談?wù)勛约旱囊恍┬牡皿w會。 新建一個前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準(zhǔn)備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來一起交流。
1、在一個網(wǎng)頁中同時調(diào)用CSS的多種引入方式
在 HTML中引入CSS的方式很多，例如直接插入式，使用 鏈接外部樣式表，使用CSS"@import"導(dǎo)入樣式表以及在內(nèi)部元素中使用"STYLE"標(biāo)記來定義樣式表等。有網(wǎng)友詢問，這些引入方式能不能同時在 一個網(wǎng)頁中被調(diào)用，它們之間會不會產(chǎn)生混亂？其實(shí)，我們大可不必這么擔(dān)心，這就是它為什么稱之為“層疊樣式表”的原因，瀏覽器在處理網(wǎng)頁中的樣式表是按照 一定的順序來處理的，首先檢查頁面中是否有直接插入式CSS，如果存在就先執(zhí)行它，針對本句的其它CSS就不去管它了；接著檢查網(wǎng)頁源代碼中 的"STYLE"標(biāo)記，有就執(zhí)行了；接下來再依次檢查執(zhí)行"@import"導(dǎo)入的內(nèi)部樣式表和 鏈接的外部樣式表。因此，我們完全可以在一個網(wǎng)頁中同時調(diào)用CSS的多種引入方式。
2、快速創(chuàng)建CSS外連式文件
對 于一個初接觸CSS的網(wǎng)頁設(shè)計(jì)人員來講，要用寫字板之類的編輯器，去創(chuàng)建一個CSS外連式文件是相當(dāng)困難的。由于Dreamweaver對CSS支持的很 好，用它來幫助就輕松多了。具體可以這樣操作：首先在紙上寫好在網(wǎng)站的網(wǎng)頁中可能要用到的格名稱，然后在Dreamweaver的編輯窗中調(diào)出CSS面 板，一個一個地定義，并在一個空白頁上適當(dāng)?shù)貙懸稽c(diǎn)相關(guān)內(nèi)容，邊定義邊試用，效果不滿意，立即修改；全部定義好后，再用記事本創(chuàng)建一個空的CSS外連式文 件，把在〈head〉與〈/head〉之間的那段定義好的CSS復(fù)制到CSS文件中去，就大功告成了。
3、讓背景圖案靜止不動
當(dāng) 網(wǎng)頁不能在一屏全部顯示時，我們往往借助于水平滾動條和豎直滾動條來瀏覽屏幕以外的內(nèi)容，移動滾動條時一般圖象和文字是一起移動的，那么我們有沒有辦法使 背景圖象不隨文字一起“滾動”呢？利用CSS就可以實(shí)現(xiàn)這樣的目的，我們只要把下面這段源代碼直接放在網(wǎng)頁的與標(biāo)簽之間就可以了，其中bg.jpg就是網(wǎng) 頁中的背景圖象，大家可以把它換成自己需要的背景圖象：
復(fù)制代碼
代碼如下:
〈style type="text/css"〉
〈!--
BODY { background: purple url(bg.jpg);
background-repeat:repeat-y;
background-attachment:fixed
}
--〉
〈/style〉
4、讓網(wǎng)頁自動進(jìn)行“首行縮進(jìn)”
用 DreamWeaver來設(shè)計(jì)網(wǎng)頁的用戶知道，在DreamWeaver中輸入空格不是那么的方便，我們可以利用css來設(shè)計(jì)“首行縮進(jìn)”功能來彌補(bǔ)這個 缺憾。打開DreamWeaver的設(shè)計(jì)界面，在該界面中找到CSS的屬性定義對話框（Style Definition for .style1)，在該對話框的“Block”標(biāo)簽下的“text-indent”屬性定義設(shè)置項(xiàng)中來設(shè)置“首行縮進(jìn)”功能，在這里要注意的是，所謂“首 行”是指每段內(nèi)容的第一行，也就是直接按回車鍵就形成了一個新的段落?？s進(jìn)最好以“em”（字符）為單位，比如：漢字編排要求每段開始縮進(jìn)兩個漢字，設(shè)置 好的CSS如下所示：
復(fù)制代碼
代碼如下:
〈style type="text/css"〉
〈!--
.style1 { text-indent: 2em}
--〉
〈/style〉
5、巧用css來設(shè)定文字的背景
在 DreamWeaver中，如果我們需要給文字加上不同的背景顏色時，操作上很簡單，只要用鼠標(biāo)單擊屬性面板上的文字顏色按鈕，從彈出的顏色設(shè)置欄中選擇 需要的顏色就可以了。但如果我們要給部分文字加不同的背景色，該怎么操作呢？由于DreamWeaver3中沒有這方面的功能，但我們可以巧妙利用css 來實(shí)現(xiàn)這樣的目的。具體操作過程是，首先我們可以先做一個定義背景色的CSS，例如給這個css命名為bjstyle，接著在網(wǎng)頁中選中需要設(shè)置顏色的文 字，然后在工具欄中單擊一下“bjstyle”就行了。下面就是一個定義顏色背景的CSS的源代碼：
復(fù)制代碼
代碼如下:
〈style type="text/css"〉
〈!--
.bjstyle { background: #cc00bb}
--〉
〈/style〉
6、給指定內(nèi)容加邊框
在 DreamWeaver中，我們可以利用CSS強(qiáng)大的定義功能來給某部分內(nèi)容加邊框，定義時首先打開DreamWeaver的設(shè)計(jì)界面，在該界面中找到 CSS的屬性定義對話框（Style Definition for .style1)，該對話框的“Border”設(shè)置項(xiàng)就是用來定義指定內(nèi)容邊框線的，其中“top”、“bottom”、“l(fā)eft”、“right”設(shè) 置欄是分別用來定義指定內(nèi)容四周邊框線的粗細(xì)和顏色的，這些設(shè)置項(xiàng)設(shè)置好后還需要在下面的“Style”中定義線型，否則我們將看不到定義的邊框線，因?yàn)?css默認(rèn)的線型是“none”。下面是一個定義了上邊框?yàn)椋核{(lán)色細(xì)線；左邊框?yàn)椋壕G色中粗線的CSS源代碼：
復(fù)制代碼
代碼如下:
〈style type="text/css"〉
〈!--
.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
--〉
〈/style〉
7、用樣式表來控制超級鏈接的顏色
如 果你仔細(xì)研究一下超級鏈接，你就會發(fā)現(xiàn)，瀏覽器處理超級鏈接的默認(rèn)方式是，對于目前還沒有訪問過的超級鏈接是用藍(lán)色且?guī)в邢聞澗€的文字來顯示的，對于已經(jīng) 訪問過的超級鏈接則是用深紫色且?guī)в猩钭仙南聞澗€的文字來顯示的。這些默認(rèn)的設(shè)置顏色看得時間，可能就產(chǎn)生厭倦之感，并且很有可能與自己網(wǎng)頁的背景顏色 不協(xié)調(diào)。因此我們完全可以按照自己的視覺要求，來自由更改超級鏈接的顯示顏色，讓它更能體現(xiàn)自己的風(fēng)格。下面筆者就來介紹一段修改超級鏈接顯示顏色的源代 碼，代碼如下：
我們可以把這段源代碼添加在HTML文件的……之間，它可以對對本網(wǎng)頁中的任何一個超級鏈接都起作用，其中這段代碼中的：
A:link {text－decoration: none; color:blue}是說明了超級鏈接還沒有被訪問，它沒有下劃線，顏色為藍(lán)色。
A:visited { color:red; text－decoration:line－through }說明了超級鏈接被訪問后，它的顏色變成了紅色，有了一根刪除線。
A:active { color:white; text－decoration:underline }說明超級鏈接處于活動狀態(tài)的時候，它的顏色變成了白色，有了下劃線。
A:hover {text－decoration:none;color:＃FF0000;background－color:black}說明鼠標(biāo)移動到超級鏈接后，它沒有下劃線，文字顏色變成了黃色，背景顏色是黑色。
新建一個前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準(zhǔn)備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來一起交流。
根據(jù)上面的解釋，我們可以把超級鏈接在各種狀態(tài)下的顯示顏色修改成自己喜歡的那種，以便能更好地展示自己的個性。
8、給選中文字加背景圖像
在 DreamWeaver中，我們同樣可以給指定文字加上背景圖象，其操作過程與給指定文字加背景色操作類似，只不過是把選擇背景顏色換成選擇加載的背景圖 象就是了。其具體操作過程是，首先我們可以先做一個定義背景色的CSS，例如給這個css命名為txstyle，接著在網(wǎng)頁中選中需要設(shè)置顏色的文字，然 后在工具欄中單擊一下“txstyle”就行了。下面就是一個定義背景圖象的CSS的源代碼（其中test.gif就是所加載的背景圖象）：
復(fù)制代碼
代碼如下:
〈style type="text/css"〉
〈!--
.txbgstyle { background-image: url(test.gif)}
--〉
〈/style〉
————————————————
版權(quán)聲明：本文為CSDN博主「html基礎(chǔ)教程」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/html168/article/details/104525011
2019下半年，阿里巴巴旗下B2B業(yè)務(wù)平臺1688官宣了全新的戰(zhàn)略升級目標(biāo)：針對工業(yè)領(lǐng)域進(jìn)行全面升級支撐，堅(jiān)持“品牌正品、品質(zhì)服務(wù)”，聚焦在內(nèi)容、服務(wù)和用戶上，致力于打造需求驅(qū)動的C2M新模式。重塑市場格局，加速制造業(yè)流通數(shù)字化升級。
伴隨著業(yè)務(wù)的整體升級，工業(yè)品牌PC首頁作為買賣家感知業(yè)務(wù)價(jià)值的門面和流量承接的關(guān)鍵場景，需要同步升級才能更好的滿足買家需求，提升買家體驗(yàn)。
三大升級目標(biāo)
1、 提升內(nèi)容與買家匹配精準(zhǔn)度：從舊版的數(shù)據(jù)分析來看，搜索和導(dǎo)航欄UV占比超過70%，其他區(qū)塊尤其二屏及以下點(diǎn)擊率很低，說明市場大部分的內(nèi)容對用戶沒有吸引力，需要為用戶推薦更豐富、更精準(zhǔn)的內(nèi)容才能把用戶留下。
2、 提升內(nèi)容框架合理性：舊版場景框架結(jié)構(gòu)較為混亂，內(nèi)容組合自由度過高，采購鏈路不清晰導(dǎo)致用戶體驗(yàn)不佳。且隨著內(nèi)容的更新，舊的框架和新的內(nèi)容也無法匹配，需要升級框架使采購鏈路清晰化，提升用戶體驗(yàn)。
3、 提升工業(yè)品牌業(yè)務(wù)認(rèn)知：隨著業(yè)務(wù)打法的升級，工業(yè)品牌的核心理念也進(jìn)行了升級，新版的工業(yè)品牌市場需要提升用戶對平臺價(jià)值的認(rèn)知，樹立品牌正品的心智。
升級策略
一、 圍繞買家分層升級內(nèi)容，提升內(nèi)容與買家匹配精準(zhǔn)度
定義用戶感興趣的內(nèi)容，從買家分層做起。我們沿著圍繞買家身份進(jìn)行個性化導(dǎo)購場景推薦的思路，以用研提供的買家核身數(shù)據(jù)資料為基礎(chǔ)，再結(jié)合運(yùn)營提供的經(jīng)驗(yàn)，提煉出不同身份的用戶畫像，抽象出他們的采購特性。
然后新增了一個專門的個性化身份場景模塊，進(jìn)行有針對性的商品、商家、工具推薦，實(shí)現(xiàn)人、貨、場的個性化匹配。
除了新增的個性化身份場景外，首屏新增了三個固定營銷位，聚焦在典型買家的普遍訴求上：新人活動、金融活動和服務(wù)(物流/發(fā)票)專場，打造以貿(mào)易商/電商為核心，門店/企業(yè)自用為輔助客群的營銷+工具一體化流量圈。同時新增了低價(jià)場景，以日為單位，折扣幅度更大的“每日特惠”，用低價(jià)的硬通貨提升用戶粘性促進(jìn)轉(zhuǎn)化，強(qiáng)化用戶對工業(yè)品牌的認(rèn)知。
二、 打造營銷+工具扁平陣地，從內(nèi)容框架升級提升體驗(yàn)
1、 采購鏈路清晰化
定義每一屏用戶的核心訴求，提供有效的、符合用戶預(yù)期的對應(yīng)內(nèi)容
2、 簡化容器形式：突出內(nèi)容降低閱讀成本
以首屏設(shè)計(jì)為例，以不同底色分隔區(qū)塊，省略所有不必要的間距分隔，使首屏的整體性更強(qiáng)，形式更緊湊聚焦。
三、 營造「數(shù)字工業(yè)」氛圍，提升用戶對市場感知，塑造品牌正品心智
導(dǎo)購場景里的品牌打造，核心價(jià)值在于強(qiáng)化市場形象，讓用戶感知到平臺價(jià)值，認(rèn)知平臺特性。工業(yè)品的電商網(wǎng)站那么多，除了內(nèi)容層，表現(xiàn)層我們也需要和其他網(wǎng)站有顯著區(qū)分，具有自己的“個性”，給用戶不一樣的體感。
所謂“個性”即是品牌定位。我們從工業(yè)品牌的平臺定位出發(fā)，聚焦業(yè)務(wù)本質(zhì)的核心理念和價(jià)值優(yōu)勢上，再結(jié)合用戶視角的感知傾向，最后推導(dǎo)出數(shù)字化、工業(yè)感兩個核心關(guān)鍵詞。然后順著關(guān)鍵詞進(jìn)行具像化發(fā)散，再從具象元素中篩選出典型的，抽象的融入到頁面中落地，從而打造「數(shù)字工業(yè)」的品牌形象。
標(biāo)準(zhǔn)色&ICON
工業(yè)品牌從1.0版本開始就一直采用的是黑黃配色，黑灰色取自金屬，黃色則是機(jī)械設(shè)備、工業(yè)產(chǎn)品(如安全帽)上的常用漆色，這兩種顏色是工業(yè)場景中最具代表性、通用性的常見色，容易讓用戶感到熟悉而引起情感共鳴。為了品牌的延續(xù)性，3.0仍然保持了黑黃的主配色，并在此基礎(chǔ)上新增了四種從工業(yè)品行業(yè)場景中提取的重色調(diào)冷色，增加配色上的豐富度和拓展性。ICON設(shè)計(jì)上運(yùn)用粗重的線條，硬朗的方角，塑造沉穩(wěn)、嚴(yán)謹(jǐn)?shù)捏w感。
圖形&動效
為了營造具有科技感的數(shù)字化氛圍，在設(shè)計(jì)中融入了一些從HUD風(fēng)格中抽取出的元素。如每日特惠模塊中的動態(tài)表盤和標(biāo)注數(shù)據(jù)變化，會呼吸的閃爍button和hover狀態(tài)下出現(xiàn)的定位框。前者表達(dá)了數(shù)字化的概念的同時強(qiáng)調(diào)了折扣幅度、板塊特性，后者則算是操作時出現(xiàn)的小彩蛋。
立體組貨場景導(dǎo)購：3D化的場景還原導(dǎo)購，直觀的體現(xiàn)線下生產(chǎn)場景的線上“數(shù)字化”的概念，不僅易讓用戶產(chǎn)生代入感，也增加了頁面導(dǎo)購專業(yè)度與視覺豐富度。
升級后整體數(shù)據(jù)提升明顯
結(jié)語
此次PC整體升級，根據(jù)買家分層新增了更精準(zhǔn)匹配的場景推薦，優(yōu)化了內(nèi)容框架，營造了數(shù)字工業(yè)的氛圍來塑造具有平臺特性的市場形象。當(dāng)然在項(xiàng)目的過程中，也因?yàn)轫?xiàng)目周期內(nèi)的一些局限性，讓產(chǎn)品還有很多優(yōu)化完善的空間，后續(xù)仍需繼續(xù)挖掘買家訴求，通過不斷的探索和創(chuàng)新，提升買家體驗(yàn)。
文章來源：站酷 作者：CBU設(shè)計(jì) 龍奕柯
本文要介紹的「Palettable」是一個線上配色工具，Palettable 通過互動方式協(xié)助使用者找出最合適的色彩組合，開啟網(wǎng)站后會先隨機(jī)顯示顏色，使用者可點(diǎn)選喜歡、不喜歡（或是使用快捷鍵）重新顯示顏色或?qū)㈩伾潭ㄔ陧撁嬷?，最后就能得出五個搭配好的顏色組合。
依照說明，Palettable 收錄數(shù)百萬設(shè)計(jì)師的知識結(jié)晶，這些顏色可以協(xié)助我們產(chǎn)生漂亮的調(diào)色盤，利用控制選項(xiàng)亦可個別調(diào)整每個顏色，最后匯出帶有色碼的PNG 圖片或固定網(wǎng)址。
網(wǎng)站鏈接：https://www.palettable.io/
使用教學(xué)
開啟Palettable 后會隨機(jī)顯示一個顏色，可點(diǎn)選下方的喜歡或不喜歡（快捷鍵為L 和D），喜歡會將顏色固定并開始選擇下一個顏色，不喜歡就會繼續(xù)演算其他顏色。
每個顏色中間會有HEX 色碼，點(diǎn)選下方的設(shè)定選項(xiàng)會出現(xiàn)調(diào)色盤，可以更直覺選擇你要的顏色。
點(diǎn)選喜歡后前一個顏色會被固定，接著就繼續(xù)選下一個顏色。
在我十分鐘的使用經(jīng)驗(yàn)，重復(fù)幾次不同的配色組合，發(fā)現(xiàn)Palettable 會隨著使用者喜歡的顏色而選擇更為貼近、可互相搭配且不重復(fù)的色彩，這部份相較于其他只能隨機(jī)選色的服務(wù)來說應(yīng)該更有優(yōu)勢。
持續(xù)重復(fù)到第五個顏色，Palettable會跳出最多只有5個顏色的提示訊息，點(diǎn)選「Export」匯出結(jié)果。
Palettable 支援匯出為固定網(wǎng)址（會帶有你剛才選定的五個顏色組合）或是輸出為PNG 格式，如果你想把顏色組合保存下來，儲存為圖片會更易于整理和使用。
下圖就是我透過Palettable 建立的配色組合，每個顏色會有預(yù)覽，下方帶有HEX 色碼。
值得一試的三個理由：
文章來源：優(yōu)設(shè) 作者：Pseric
新擬態(tài)設(shè)計(jì)（Neumorphism UI）是 2020 年 UI 設(shè)計(jì)的主要趨勢之一，你可以在 dribbble 上看到很多作品，新擬態(tài)是基于New+Skeuomorphism 英文單詞的拼寫。它是一種使用對象陰影的模糊、角度和強(qiáng)度來突顯出對象的樣式。由于其柔和的陰影和整體的外觀，使該設(shè)計(jì)看起來更加的逼真、未來、現(xiàn)代、真實(shí)、有吸引力。
但是老實(shí)說，這不是最實(shí)用的設(shè)計(jì)。嘗試設(shè)計(jì)和上線以「新擬態(tài)」為整體調(diào)性的產(chǎn)品，很有可能讓所有人失望，包括你們的同事、用戶和可訪問性用戶（目前有 5700 萬美國人患有某種程度的殘疾。在上網(wǎng)的用戶中，有 54% 的成年人是殘障人士，來源于：W3.org）。
根據(jù) W3 的說法，web 和移動端的可訪問性包括影響訪問的所有障礙，包含：
僅新擬態(tài)而言并不支持：視覺、認(rèn)知、物理方面設(shè)計(jì)。
讓我們深入地討論為什么新擬態(tài) UI 和 可訪問性是無法共存的。
免責(zé)聲明：我不是可訪問性和新擬態(tài)方面的設(shè)計(jì)專家，本文旨在分享一些有關(guān)新擬態(tài)的一些想法。下面使用的 dribbble 作品僅供參考，以突出我在此問題上的觀點(diǎn)。沒有一絲評價(jià)、嘲笑、不尊重以下設(shè)計(jì)師的意思，如果你的設(shè)計(jì)在下面展示了，并且你希望我盡快刪除，請及時聯(lián)系我。
新擬態(tài)對視力低下、失明、色盲的用戶來說，可辨識性較差。
△ https://dribbble.com/shots/10006635-Neumorphic-Rebound-of-Nomad-iOS-UI-Kit
當(dāng)設(shè)計(jì)中帶有重要 CTA 按鈕時，你經(jīng)?？紤]并注意使它重點(diǎn)突出，并且在頁面上容易被識別閱讀。但是，當(dāng)使用新擬態(tài)的設(shè)計(jì)風(fēng)格時，沒有諸如對比度之類的東西，因?yàn)榘粹o的材質(zhì)與背景是相同的，唯一將它們分開的是角度和各種柔和的陰影。
△ https://dribbble.com/shots/9393020-Mi-Remote-Control-Mobile-app
根據(jù) W3.org 關(guān)于移動端可訪問性的描述：
與臺式機(jī)/筆記本電腦設(shè)備相比，移動設(shè)備更可能用于各種環(huán)境中，包括戶外。在戶外，陽光或其他強(qiáng)光源下更可能產(chǎn)生眩光，這種情況提高了對所有用戶使用良好對比度的重要性，并可能加劇視力低下的用戶在移動設(shè)備上訪問對比度差的內(nèi)容的挑戰(zhàn)性。
與對比度問題相關(guān)的 WCAG 2.0 成功標(biāo)準(zhǔn)是（原文地址：https://w3c.github.io/WCAG21-zh/#contrast-minimum）：
新擬態(tài)讓用戶思考。
△ https://dribbble.com/shots/9592062-Neumorphism-Smart-Home
一般來說，帶有陰影的元素通常比沒有陰影的視覺上更加突出。但是，使用新擬態(tài)設(shè)計(jì)時，大多數(shù)元素都會漂浮并脫穎而出，在一個屏幕上互相競爭，用戶很難輕易理解頁面中的視覺層次和信息層級關(guān)系，這會導(dǎo)致界面缺少適當(dāng)?shù)慕裹c(diǎn)，從而在眼動追蹤中造成混亂。
界面上缺少信息層級關(guān)系的結(jié)果，會對用戶的決策過程以及他們的思考過程產(chǎn)生重大的影響。因此，如存在多個可操作的內(nèi)容，但是信息層級，重點(diǎn)不突出，這會讓用戶在當(dāng)前的流程或頁面上產(chǎn)生困惑，很難理解正在發(fā)生的事情。從而可能導(dǎo)致錯誤的判斷和誤操作，好的 UI/UX 不需要讓用戶思考。
認(rèn)知和學(xué)習(xí)障礙影響人們處理信息的方式。例如，它們可以影響人們的感知、記憶、語言、注意力、解決問題和理解力。類別和條件的術(shù)語各不相同，包括智力殘疾、發(fā)育障礙、注意缺陷多動障礙（ADHD）、自閉癥、癡呆癥、誦讀障礙等。
△ https://dribbble.com/shots/9916835-Neumorphism-Smart-Home-app
新擬態(tài)會造成混亂：
- 我可以點(diǎn)擊嗎？
- 選擇了什么？
- 不是什么？
- 這是可點(diǎn)擊的嗎？
- 還是不是？
對象的階段由內(nèi)部/外部陰影決定和標(biāo)識。由于新擬態(tài)圍繞著各種陰影色調(diào)和角度變化，因此用戶不禁要問，可點(diǎn)擊與不可點(diǎn)擊之間的界限在哪里。
△ https://dribbble.com/shots/9938821-Smart-home-app
每個使用新擬態(tài)的產(chǎn)品都可以根據(jù)其功能和要求有自己的 UI 設(shè)計(jì)規(guī)范，但是由于陰影、角度和浮動水平的不同，由于缺乏一致性，迷失了方向的可操作項(xiàng)，「新擬態(tài)」可能會給用戶帶來麻煩，最終為殘疾用戶造成身體障礙。
觸發(fā)可操作性的元素應(yīng)該足夠清晰，以便與不可操作的元素（內(nèi)容、狀態(tài)信息等）明確區(qū)分。提供元素可操作的明確指示與具有可操作元素（如按鈕或鏈接）的 web 和本機(jī)移動應(yīng)用程序相關(guān)，尤其是在交互模式中，可操作元素通常以視覺方式檢測（觸摸和鼠標(biāo)使用）。交互元素還必須由依賴于編程確定的可訪問名稱的用戶（例如屏幕閱讀器用戶）檢測到。
△ https://dribbble.com/shots/9838619-Music-Player-Neumorphism-Rebound-shot
從 dribbble 開始的新擬態(tài)的設(shè)計(jì)趨勢，應(yīng)該要在追隨前認(rèn)真地思考，是否適用？這是一個問題。
設(shè)計(jì)師可以自由地實(shí)踐和探索他們傾向于哪種趨勢或風(fēng)格……我只是在這里展示和解釋為什么「新擬態(tài)」和「可訪問性」不能并存。我也不是來阻止你練習(xí)你的設(shè)計(jì)技巧（如果有的話，我鼓勵每個人練習(xí)他們的技巧和探索他們的想法，但希望，考慮它可能對殘疾用戶的影響以及特殊場景下的實(shí)用性的思考）。
不過，我之前在另一篇文章中說過，我會再說一次：現(xiàn)在是 2020 年，作為一個設(shè)計(jì)師，我認(rèn)為我們必須重新評估我們在設(shè)計(jì)實(shí)際產(chǎn)品時的設(shè)計(jì)方式。我們不能為所有人設(shè)計(jì)，但要排除殘疾用戶。在可訪問性和使所有數(shù)字產(chǎn)品都可訪問方面，我們還有很長的路要走，但是它必須要在某一個地方開始。例如，它可以從我們把新擬態(tài)拋在腦后開始，而從那時起專注于開發(fā)一種在美學(xué)上令人愉悅但又實(shí)用、現(xiàn)實(shí)的設(shè)計(jì)。謝謝。
文字來源：優(yōu)設(shè) 作者：UX Talk
這篇文章來自于 Invision 出品的書籍，圍繞規(guī)劃、設(shè)計(jì)、構(gòu)建和實(shí)現(xiàn)設(shè)計(jì)系統(tǒng)的實(shí)踐經(jīng)歷來指導(dǎo)讀者，其中包含了經(jīng)驗(yàn)豐富專家的真知灼見和一手經(jīng)驗(yàn)。我很喜歡，也分享給大家，推薦閱讀。這是一個系列，一共有 7 章，感興趣的話，持續(xù)關(guān)注吧。
20 世紀(jì) 60 年代，計(jì)算機(jī)硬件技術(shù)的升級開始超越軟件發(fā)展的速度。計(jì)算機(jī)的處理速度變得越來越快，價(jià)格也越來越便宜，但計(jì)算機(jī)軟件開發(fā)仍然處于緩慢、難以維護(hù)的境地，并且還很容易出錯。兩者之間的差距以及解決這個問題的困境被稱之為「軟件危機(jī)」。
在 1968 年的北約軟件工程會議上，道格拉斯·麥克羅伊（Douglas McIlroy）提出了基于組件開發(fā)有可能是解決「軟件危機(jī)」的方法之一?；诮M件開發(fā)是一種通過復(fù)用代碼來提高編程潛力的方法，該方法能幫助編程工作更、更易于擴(kuò)展。這樣做既能減少編程工作量又能提升軟件開發(fā)的速度，讓軟件更好地運(yùn)用現(xiàn)代計(jì)算機(jī)的力量。
在 50 年后的今天，我們又面臨著類似的挑戰(zhàn)，只不過這一次是在設(shè)計(jì)領(lǐng)域。在 UI 設(shè)計(jì)中，設(shè)計(jì)的角色是在為特定需求量身定做解決方案，所以很難去基于整個應(yīng)用進(jìn)行擴(kuò)展。
你有沒有走查過你輸出的界面，發(fā)現(xiàn)自己使用了幾十種類似的藍(lán)色，或者同一個按鈕不同的用法，將這些樣式組合對應(yīng)到你設(shè)計(jì)的每一個 UI 界面，就會意識到一套不成體系的設(shè)計(jì)是多么的難以維護(hù)。
△ 一份 UI 樣式走查收集的成果，里面羅列的十幾種類似的按鈕樣式說明之前團(tuán)隊(duì)挖的坑有多深。
在這種狀態(tài)下，設(shè)計(jì)要跟上開發(fā)的速度，公司可以選擇做以下三件事：
通過復(fù)用設(shè)計(jì)，設(shè)計(jì)系統(tǒng)能夠幫助團(tuán)隊(duì)更好、更快地構(gòu)建產(chǎn)品——復(fù)用性使規(guī)范成為可能。這是設(shè)計(jì)系統(tǒng)的核心和價(jià)值。一個設(shè)計(jì)系統(tǒng)是一個可復(fù)用組件的合集，由清晰的規(guī)范作為指導(dǎo)，組合在一起構(gòu)建成各種的應(yīng)用程序。
50 多年來，工程師們一直在遵循著這個理念執(zhí)行工作?，F(xiàn)在是時候讓設(shè)計(jì)充分發(fā)揮其潛力加入他們了。
你可能已經(jīng)清楚地意識到，設(shè)計(jì)系統(tǒng)已經(jīng)成為當(dāng)今軟件行業(yè)的一個熱門話題，并且理由也很充分。很多企業(yè)投資設(shè)計(jì)系統(tǒng)，因?yàn)樗麄冋J(rèn)識到產(chǎn)品體驗(yàn)?zāi)軌驇砀偁巸?yōu)勢，不僅能吸引和留住客戶，更降低產(chǎn)品學(xué)習(xí)成本。
在重視設(shè)計(jì)系統(tǒng)的公司內(nèi)部，通常能看見這種情況：
如果你是設(shè)計(jì)師，那么前面所說對設(shè)計(jì)的投資聽起來可能會令你很興奮，但其實(shí)也帶來很多挑戰(zhàn)。當(dāng)一個應(yīng)用由不同的團(tuán)隊(duì)負(fù)責(zé)迭代各自模塊的時候，你將如何跨平臺設(shè)計(jì)一致的 UI？又如何使所有團(tuán)隊(duì)能夠進(jìn)行快速迭代？當(dāng)團(tuán)隊(duì)的設(shè)計(jì)師設(shè)計(jì)出新的獨(dú)立樣式時，你又將如何處理這種不可避免的設(shè)計(jì)需求？
要了解如何應(yīng)對上述的挑戰(zhàn)，我們要先了解什么是設(shè)計(jì)系統(tǒng)。設(shè)計(jì)系統(tǒng)將個體和整體兩個概念各自的優(yōu)點(diǎn)結(jié)合在一起。
1. 標(biāo)準(zhǔn)
擁有 MAC 用戶界面的技術(shù)知識是產(chǎn)品設(shè)計(jì)的關(guān)鍵因素，但了解用戶界面背后的理論，才能夠幫助你創(chuàng)造出色的產(chǎn)品?！O果人機(jī)交互指南
為了設(shè)計(jì)卓越的用戶體驗(yàn)，不僅要了解設(shè)計(jì)系統(tǒng)背后的內(nèi)容，還要了解其設(shè)計(jì)的原因。我們一般會通過建立和遵守標(biāo)準(zhǔn)來達(dá)成共識，這樣做能消除主觀性和歧義性，保證產(chǎn)品團(tuán)隊(duì)內(nèi)部不會出現(xiàn)摩擦和混亂。
這套標(biāo)準(zhǔn)的內(nèi)容涵蓋了設(shè)計(jì)和開發(fā)。例如對命名約定、無障礙標(biāo)準(zhǔn)和文件結(jié)構(gòu)等等，幫助團(tuán)隊(duì)達(dá)成共識，減少出錯。
視覺語言是設(shè)計(jì)標(biāo)準(zhǔn)的核心部分。定義顏色、形狀、類型、圖標(biāo)、布局和動效的樣式和用法對于創(chuàng)建品牌一致的用戶體驗(yàn)至關(guān)重要。系統(tǒng)中的每個組件都包含這些元素，它們在表達(dá)品牌特性中扮演著不可或缺的角色。
沒有標(biāo)準(zhǔn)，決策時就會無據(jù)可依。這不僅不能擴(kuò)展設(shè)計(jì)，還會造成復(fù)雜、差勁的用戶體驗(yàn)。
超越平臺
視覺語言可以不局限于單一平臺，可以在 Web，iOS，Android 和其他平臺上延續(xù)。將規(guī)范文檔展示在設(shè)計(jì)系統(tǒng)網(wǎng)站的醒目位置，能夠幫助系統(tǒng)開發(fā)者了解組件的樣式和交互模式。例如，Google 的 Material Design 就深入到其產(chǎn)品視覺語言的各個層面。
2. 組件
組件是系統(tǒng)中復(fù)用代碼的一部分，它們充當(dāng)應(yīng)用程序界面的基礎(chǔ)。組件的復(fù)雜性各不相同。將組件簡化為單個功能（如按鈕或下拉菜單）可以增加其靈活性，使其更易于復(fù)用。復(fù)雜的組件，如特定類型數(shù)據(jù)的圖表，可以很好地滿足其應(yīng)用場景，但是這種復(fù)雜性限制它的使用場景數(shù)量。組件的復(fù)用性越高，需要維護(hù)的次數(shù)就越少，規(guī)模也就越簡單。
基于組件的開發(fā)通過復(fù)用代碼來減少技術(shù)開銷。建立標(biāo)準(zhǔn)規(guī)范了這些組件的用途、樣式和用法。兩者結(jié)合在一起，就相當(dāng)于為你的產(chǎn)品團(tuán)隊(duì)配備了一個清晰的系統(tǒng)，讓他們了解到為什么和怎么做。
讓我們詳細(xì)看看設(shè)計(jì)系統(tǒng)如何幫助你解決一直以來的痛苦。
1. 擴(kuò)展式設(shè)計(jì)
隨著團(tuán)隊(duì)的成長，設(shè)計(jì)師通常會將注意力集中在應(yīng)用程序的獨(dú)立功能區(qū)域，如搜索和發(fā)現(xiàn)、帳戶管理等。這就會導(dǎo)致設(shè)計(jì)碎片化，就像是一座設(shè)計(jì)的巴別塔，每個設(shè)計(jì)師都將他們的設(shè)計(jì)語言往上添。當(dāng)設(shè)計(jì)師單獨(dú)而不是系統(tǒng)地去解決問題時，就會發(fā)生這種情況。
沒有通用設(shè)計(jì)語言統(tǒng)一產(chǎn)品和設(shè)計(jì)，用戶體驗(yàn)就會開始崩潰。當(dāng)缺乏設(shè)計(jì)規(guī)范時，設(shè)計(jì)討論就變得毫無用處。為了使團(tuán)隊(duì)內(nèi)部保持一致，必須要有一個共享的來源——可供參考的官方樣式庫。
大多數(shù)情況下的樣式庫都是靜態(tài)的內(nèi)容，例如設(shè)計(jì)模版。但是靜態(tài)的參考幾乎立刻就會過時。這就是為什么有的團(tuán)隊(duì)會建造像 Shopify’s Polaris 站點(diǎn)這樣的網(wǎng)站——一個設(shè)計(jì)系統(tǒng)站點(diǎn)，用該設(shè)計(jì)系統(tǒng)構(gòu)建而成，記錄系統(tǒng)的所有方面，包括組件、指南和交互最佳使用場景。因?yàn)樗桥c系統(tǒng)一起構(gòu)建的，所以它能夠保持其永遠(yuǎn)是的。
對于產(chǎn)品團(tuán)隊(duì)而言，內(nèi)部設(shè)計(jì)系統(tǒng)站點(diǎn)是最佳、最易訪問的共享來源。它提供了一個引力，使團(tuán)隊(duì)成員保持一致和同步。
2. 管理你的債務(wù)
隨著應(yīng)用程序和團(tuán)隊(duì)的時間積累，會慢慢形成債務(wù)。這種債務(wù)不是金融債務(wù)，而是技術(shù)和設(shè)計(jì)債務(wù)。這些債務(wù)是因?yàn)榻鉀Q獨(dú)立問題獲得的。設(shè)計(jì)債務(wù)由大量不可復(fù)用和不一致的樣式和慣例組成，而維護(hù)它們是不可能完成的任務(wù)。隨著時間的推移，這些債務(wù)的累積會成為減緩增長的巨大負(fù)擔(dān)。
創(chuàng)造行為本身并不會產(chǎn)生債務(wù)——就像花錢本身并不會產(chǎn)生金融債務(wù)一樣。但使用設(shè)計(jì)系統(tǒng)將使你的設(shè)計(jì)和代碼保持足夠簡潔，同時仍然允許你進(jìn)行升級和迭代。
3. 一致的設(shè)計(jì)
一致且重復(fù)使用的標(biāo)準(zhǔn)化組件，使你應(yīng)用程序的易用性大大提升。標(biāo)準(zhǔn)化的組件還能讓設(shè)計(jì)師花更少的時間關(guān)注樣式，花更多的時間專注于提升用戶體驗(yàn)。
4. 更快的原型
在設(shè)計(jì)系統(tǒng)下工作，你可以像玩樂高一樣快速拼湊流程和交互，構(gòu)建無數(shù)的原型和方案進(jìn)行快速驗(yàn)證，從而幫助團(tuán)隊(duì)快速獲得數(shù)據(jù)和結(jié)論。
5. 提高可用性
頁面樣式的不一致會影響產(chǎn)品的可用性，當(dāng) CSS 因?yàn)閿?shù)不清的不一致樣式元素和交互增加時，頁面加載時間也會加長，這會導(dǎo)致很糟糕的用戶體驗(yàn)。它還可能產(chǎn)生沖突的 CSS 和 JavaScript，從而可能破壞你的應(yīng)用程序。通過使用設(shè)計(jì)程序，通過構(gòu)建一個整體的組件庫（而不是每頁）來避免這些沖突，從而花費(fèi)更少的時間來保證產(chǎn)品質(zhì)量。
6. 建立可訪問性程序
可訪問性在組件級別就可以實(shí)現(xiàn)，針對殘疾人士、網(wǎng)速較慢和老舊的計(jì)算機(jī)上進(jìn)行優(yōu)化。這是一個建立易用性程序很好的方法， 在第 3 章「構(gòu)建設(shè)計(jì)系統(tǒng)」中，Katie Sylor-Miller 解釋了設(shè)計(jì)系統(tǒng)如何幫助你改善產(chǎn)品的可用性，并保證遵守你所在國家/地區(qū)的法律。
（譯者注：美國殘疾人法案于 1990 年 7 月通過并簽署，其中有規(guī)定網(wǎng)站的可用性必須遵守《美國殘疾人法》（ADA）的相關(guān)內(nèi)容。）
即使有上述說的這些好處，在團(tuán)隊(duì)內(nèi)部推行一個設(shè)計(jì)系統(tǒng)的時候，仍然很難說服團(tuán)隊(duì)成員。設(shè)計(jì)師可能會感到局限或束縛，但通常這些被感知到的弱點(diǎn)正是設(shè)計(jì)系統(tǒng)的最大優(yōu)勢。
讓我們來揭穿那些你在推行設(shè)計(jì)系統(tǒng)時經(jīng)常會遇到的誤區(qū)吧。
誤區(qū)1：過于局限
誤區(qū)：負(fù)責(zé)深入獨(dú)立業(yè)務(wù)的設(shè)計(jì)師看到的設(shè)計(jì)標(biāo)準(zhǔn)可能會與其他需求的不一樣，因此，他們會認(rèn)為通用的設(shè)計(jì)系統(tǒng)過于局限，可能無法滿足某些特定業(yè)務(wù)的需求。
現(xiàn)實(shí)：設(shè)計(jì)師通常會設(shè)計(jì)出自定義的解決方案以滿足應(yīng)用中的獨(dú)立的業(yè)務(wù)，從而增加了設(shè)計(jì)和技術(shù)的負(fù)擔(dān)。而使用設(shè)計(jì)系統(tǒng)，這些被設(shè)計(jì)的新解決方案可以被反饋到設(shè)計(jì)系統(tǒng)里面，使每個人都可以使用這些改進(jìn)方案。
誤區(qū)2：缺乏創(chuàng)造力
誤區(qū)：如果設(shè)計(jì)師被限制在一個設(shè)計(jì)系統(tǒng)下做設(shè)計(jì)，那么他將不能去自由地探索設(shè)計(jì)風(fēng)格。前端的工作通常包含著各種樣式風(fēng)格的更新。對應(yīng)用程序的風(fēng)格進(jìn)行改版通常不是一個小任務(wù)。這也可能是一個很大的風(fēng)險(xiǎn)，因?yàn)閺氖逻@項(xiàng)工作會移除一部分的舊資源，可能會對可用性產(chǎn)生負(fù)面影響。
現(xiàn)實(shí)：設(shè)計(jì)系統(tǒng)的組成部分是相互關(guān)聯(lián)的，這意味著當(dāng)一個位置進(jìn)行更改時，這項(xiàng)更改會在整個系統(tǒng)中同步，這使得系統(tǒng)內(nèi)的樣式更新工作變得輕而易舉，但影響卻大得多。以前是幾周甚至幾月的工作量，現(xiàn)在可以在一個下午就能完成。
誤區(qū)3：一勞永逸
誤區(qū)：設(shè)計(jì)和構(gòu)建完設(shè)計(jì)系統(tǒng)后，工作就完成了。
現(xiàn)實(shí)：設(shè)計(jì)系統(tǒng)是有生命的，這意味著需要不斷對其進(jìn)行維護(hù)和改進(jìn)。但是由于應(yīng)用是由設(shè)計(jì)系統(tǒng)的復(fù)用性組件提供支持的，因此該應(yīng)用會自動同步設(shè)計(jì)系統(tǒng)的改進(jìn)內(nèi)容，從而減少維護(hù)應(yīng)用程序的工作量。這就是設(shè)計(jì)系統(tǒng)提供的擴(kuò)展能力。
設(shè)計(jì)系統(tǒng)不是一時流行的方法，也不是未經(jīng)檢驗(yàn)的假設(shè)。為了讓設(shè)計(jì)找到與技術(shù)的快速發(fā)展相匹配的同等方案，基于組件的設(shè)計(jì)和開發(fā)是一種行之有效的可靠解決方案。
現(xiàn)在你已經(jīng)了解了創(chuàng)建設(shè)計(jì)系統(tǒng)的真正價(jià)值，讓我們在下一章中深入探討實(shí)際的設(shè)計(jì)過程吧。
文章來源：優(yōu)設(shè) 作者：彩云譯設(shè)計(jì)
1.v-on ：可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運(yùn)行一些 JavaScript 代碼
（1）v-on:click綁定點(diǎn)擊事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:click</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
<button v-on:click="fun1('test')">vue的onclick</button>
</div>
</body>
<script>
//view model
new Vue({
el:'#app',
data:{
message:'hello vue'
},
methods:{
fun1:function (msg) {
this.message=msg;
}
}
});
</script>
</html>
(2)v-on:keydown事件會在用戶按下一個鍵盤按鍵時發(fā)生
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:keydown</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
Vue:<input type="text" v-on:keydown="fun($event)">
<hr/>
傳統(tǒng)JS：<input type="text" οnkeydοwn="showKeyCode()"/>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
/ $event 它是vue中的事件對象 和我們傳統(tǒng)js的event對象是一樣的 /
fun:function(event){
var keyCode = event.keyCode;
if(keyCode < 48 || keyCode > 57){
//不讓鍵盤的按鍵起作用
event.preventDefault();
}
}
}
});
//傳統(tǒng)js的鍵盤按下事件
function showKeyCode(){
//event對象和我們的document對象以及window對象是一樣的，可以不用定義直接使用
var keyCode = event.keyCode;
if(keyCode < 48 || keyCode > 57){
//不讓鍵盤的按鍵起作用
event.preventDefault();
}
// alert(keyCode);
// if(event.keyCode == 13){
// alert("你按的是回車");
// }
}
</script>
</html>
（3）v-on:mouseover 當(dāng)鼠標(biāo)指針位于元素上方時,會發(fā)生 mouseover 事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:mouseover</title>
<style>
#div {
background-color: red;
width:300px;
height:300px;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div @mouseover="fun1" id="div">
<textarea @mouseover="fun2($event)">這是一個文件域</textarea>
</div>
<!--<div οnmοuseοver="divmouseover()" id="div">
<textarea οnmοuseοver="textareamouseover()">這是一個文件域</textarea>
</div>-->
</div>
</body>
<script>
//view model
/*
@事件名稱 就是 v-on:事件名稱的簡寫方式
@mouseover它就等同于v-on:mouseover
/
new Vue({
el:"#app",
methods:{
fun1:function(){
alert("鼠標(biāo)懸停在div上了");
},
fun2:function(event){
alert("鼠標(biāo)懸停在textarea上了");
event.stopPropagation();
}
}
});
//傳統(tǒng)的js方式
function divmouseover(){
alert("鼠標(biāo)移動到了div上了");
}
function textareamouseover(){
alert("鼠標(biāo)移動到了textarea上了");
event.stopPropagation();
}
</script>
</html>
(4).Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細(xì)節(jié)，如：event.preventDefault() 或 event.stopPropagation()。注意:該方法將通知 Web 瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動作(如果存在這樣的動作)
Vue.js通過由點(diǎn)(.)表示的指令后綴來調(diào)用修飾符。
.stop
.prevent
.capture
.self
.once
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:事件修飾符</title>
<style>
#div {
background-color: red;
width:300px;
height:300px;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent action="http://www.itheima.com" method="post" >
<input type="submit" value="提交">
</form>
<!--<form action="http://www.itheima.com" method="post" οnsubmit="return checkForm()">
<input type="submit" value="提交">
</form>-->
<hr/>
<div @mouseover="fun1" id="div">
<textarea @mouseover.stop="fun2($event)">這是一個文件域</textarea>
</div>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun1:function(){
alert("鼠標(biāo)懸停在div上了");
},
fun2:function(event){
alert("鼠標(biāo)懸停在textarea上了");
}
}
});
//傳統(tǒng)js方式
function checkForm(){
alert(1);
//表單驗(yàn)證必須有一個明確的boolean類型返回值
//在應(yīng)用驗(yàn)證方法時必須加上 return 方法名稱
return false;
}
</script>
</html>
2.v-text與v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-text與v-html</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
<!--<div id="div1"></div>
<div id="div2"></div>-->
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"<h1>Hello Vue</h1>"
}
});
//傳統(tǒng)js的innerText和innerHTML
window.onload = function(){
document.getElementById("div1").innerHTML="<h1>Hello</h1>";
document.getElementById("div2").innerText="<h1>Hello</h1>";
}
</script>
</html>
（2）v-bind 插值語法不能作用在 HTML 特性上，遇到這種情況應(yīng)該使用 v-bind指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind的使用</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<font size="5" v-bind:color="ys1">傳智播客</font>
<font size="5" :color="ys2">黑馬程序員</font>
</div>
</body>
<script>
//view model
//插值表達(dá)式不能用于html標(biāo)簽的屬性取值
//要想給html標(biāo)簽的屬性設(shè)置變量的值，需要使用v-bind
//v-bind也可以簡化寫法 直接使用:
new Vue({
el:"#app",
data:{
ys1:"red",
ys2:"green"
}
})
</script>
</html>
（3）v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form action="" method="post">
用戶名：<input type="text" name="username" v-model="user.username"><br/>
密碼：<input type="text" name="password" v-model="user.password"><br/>
<!-- v-model替換原來的value屬性的值，用value獲取不到-->
</form>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
user:{
username:"test",
password:"1234"
}
}
})
</script>
</html>
（4）v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍歷數(shù)組</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr ">{{item}}={{index}} </li>
<!--index是索引的意思，用插值表達(dá)式輸出 -->
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5]
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍歷對象</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(key,value) in product ">{{value}}===={{key}} </li>
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
product:{
id:1,
name:"筆記本電腦",
price:5000
}
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍歷對象</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>序號</td>
<td>編號</td>
<td>名稱</td>
<td>價(jià)格</td>
</tr>
<tr v-for="(product,index) in products ">
<td>{{index}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
products:[
{ id:1,name:"筆記本電腦",price:5000 },
{ id:2,name:"手機(jī)",price:3000 },
{ id:3,name:"電視",price:4000 }
]
}
})
</script>
</html>
3.v-if與v-show
v-if是根據(jù)表達(dá)式的值來決定是否渲染元素
v-show是根據(jù)表達(dá)式的值來切換元素的display css屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-if與v-show</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<span v-if="flag">傳智播客</span>
<span v-show="flag">itcast</span>
<button @click="toggle">切換</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
flag:false
},
methods:{
toggle:function(){
this.flag = !this.flag;
}
}
})
</script>
</html>
引言
現(xiàn)在市場很多前端開發(fā)的招聘崗位都或多或少的要求你要掌握vue，可以說vue在國內(nèi)是非常的火爆的，下面我給大家介紹一下vue框架吧！
vue是漸進(jìn)式框架
vue的核心是一個視圖模板引擎，但是這并不能說明vue不是一個框架，如上圖所示在聲明式渲染（視圖模板）基礎(chǔ)上，vue可以添加組件系統(tǒng)component，vue-router客戶端路由，vuex的狀態(tài)管理，vue-cli構(gòu)建工具來構(gòu)建一個完整的框架，更重要的是這些功能相互獨(dú)立，你可以任意選用你項(xiàng)目需要的部件，不一定非要全部整合在一起（就像是vuex它是一個很好的可以管理組件之間共享狀態(tài)的部件，但非必須在你的每一個項(xiàng)目中使用它，如果說你的項(xiàng)目相對簡單，組件之間的通信相對簡單你完全可以不使用它），可以看到漸進(jìn)式，其實(shí)就是vue的使用方式，同時也能看到vue的設(shè)計(jì)理念
vue是mvvm模式
為什么說vue是mvvm模式呢？這個大家首先要知道m(xù)vvm是什么。mvvm是Model-View-ViewModel的簡寫，即模型視圖視圖模型。模型是指后端傳過來的數(shù)據(jù)，視圖是指我們看到的頁面，視圖模型是mvvm框架的核心，他是連接view和model的橋梁，它有兩個方向，第一將后端傳來的數(shù)據(jù)轉(zhuǎn)換成頁面可以看到的視圖，第二，將用戶在頁面上的交互轉(zhuǎn)化成為后端數(shù)據(jù)，我們稱之為雙向綁定。
總結(jié)mvvm模式的視圖和模型是不能直接通信的，它們通過ViewModel來通信，ViewModel通常要實(shí)現(xiàn)一個observer觀察者，當(dāng)數(shù)據(jù)發(fā)生變化，ViewModel能夠監(jiān)聽到數(shù)據(jù)的這種變化，然后通知到對應(yīng)的視圖做自動更新，而當(dāng)用戶操作視圖，ViewModel也能監(jiān)聽到視圖的變化，然后通知數(shù)據(jù)做改動，這實(shí)際上就實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定。并且MVVM中的View 和 ViewModel可以互相通信
vue框架可以理解為是ViewModel，它可以實(shí)現(xiàn)dom監(jiān)聽和數(shù)據(jù)綁定
vue的數(shù)據(jù)綁定原理
當(dāng)你把JavaScript對象傳入vue實(shí)例作為data選項(xiàng)，vue會遍歷此對象的所以屬性，并使用Object.defineProperty把這些屬性轉(zhuǎn)換為getter和setter，每一個組件都有一個watcher實(shí)例，它會在組件渲染過程中，把接觸過的數(shù)據(jù)記錄為依賴，當(dāng)依賴的setter被觸發(fā)是，他會通知watcher，重而使關(guān)聯(lián)的數(shù)據(jù)重新渲染，以下是代碼展示。
<div id = "box"></div>
var obox = document.getElementById('box')
var obj = {}
object.defineProperty(obj,'myname',{
get () {
// obj設(shè)置了一個myname屬性，當(dāng)訪問obj.myname屬性會執(zhí)行g(shù)et方法
},
set (data) {
// 當(dāng)修改myname屬性會執(zhí)行set方法
// data會得到你修改的值
obox.innerHTML = data
}
})
object.definePeoperty有一下缺點(diǎn)： {
1：無法監(jiān)聽es6的set，map變化
2：無法監(jiān)聽class類型的數(shù)據(jù)
3：屬性的新增和刪除也無法監(jiān)聽
4：數(shù)組元素的新整和刪除也無法監(jiān)聽
}
所謂循環(huán)，就是重復(fù)執(zhí)行一段代碼，計(jì)算機(jī)的判斷能力和人相比差的很遠(yuǎn)，計(jì)算機(jī)更擅長一件事情——不停的重復(fù)。而我們在JavaScript中把這叫做循環(huán)。下面讓我們來了解了解JavaScript里的循環(huán)。
js循環(huán)結(jié)構(gòu)有哪些
js循環(huán)結(jié)構(gòu)有三種
for循環(huán) ==> 用來多次遍歷代碼塊
while循環(huán) ==> 當(dāng)指定條件為true時，循環(huán)代碼塊
do while ==> 當(dāng)指定條件偽true時，循環(huán)代碼塊
1、for循環(huán)
for是由兩個部分組成，條件控制和循環(huán)體
語法：
for(初始化表達(dá)式;循環(huán)條件表達(dá)式;循環(huán)后的操作表達(dá)式){
需要重復(fù)的代碼塊;
}
for語句結(jié)構(gòu)如圖：
for循環(huán)的執(zhí)行順序
1.初始化表達(dá)式
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn
