目錄
（1）HTML,CSS,JS都是單獨的語言；
（2）HTML,CSS,JS構成前端技術基礎；
（1）HTML：負責網頁的架構；
（2）CSS：負責網頁的樣式，美化；
（3）JavaScript（JS）：負責網頁的行為；
我們通常需要代碼提示我們輔助編寫，這個時候就涉及到VSCODE提供的一系列的插件插件安裝在 Extension 中，點擊即可看到一個搜索按鈕，可以輸入關鍵字搜索自己想要的插件。如圖：
前端開發推薦安裝的幾個插件：
HTML是超文本標記語言（Hyper Text Markup Language）是用來描述網頁的一種語言。
注意：HTML不是一種編程語言，而是一種標記語言。
簡單來說，HTML文件也可以直接稱為網頁，瀏覽器的作用就是讀取HTML文件，并且以網頁的形式去展示它們。
HTML標簽是由尖括號包圍起來的關鍵詞，如<html></html>。
單標簽與雙標簽
（1）雙標簽書寫規則：<雙標簽名稱>內容</雙標簽名稱>，例如<html>內容</html>；
（2）單標簽書寫規則：<單標簽名稱/>，例如<br/>;
HTML屬性指的是標簽屬性，HTML標簽可以擁有屬性，給相關的HTML元素提供更多的信息。
注意：
（1）一個HTML標簽可有多個屬性；
（2）屬性寫在HTML元素的開始標簽；
（3）屬性總是以名稱/鍵值對的形式出現，比如：class="method";
https://blog.csdn.net/qq_52914337/article/details/123771663?spm=1001.2014.3001.5501
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
<meta name="viewport" content="width=device-width, initialscale=1.0">
-
<title>Document</title>
-
</head>
-
<body>
-
</body>
-
</html>
HTML的文章標題標簽，如：<h1></h1>~<h6></h6>分六個級別，效果一次減少，并且每個標題都是獨占一行空間。
如：
-
<h1>?號標題</h1>
-
<h2>?號標題</h2>
-
<h3>三號標題</h3>
-
<h4>四號標題</h4>
-
<h5>五號標題</h5>
-
<h6>六號標題</h6>
注意：沒有<h7></h7>標簽；
2.1空格問題
；表示一個空格；
如：
hello world2.2換行問題
<br/>表示換行；
如：
-
hello
-
<br/>
-
world
擴展：對于HTML語言，沒有嚴格的語義，即<br>與<br/>或者<br >瀏覽器都可以識別出來。
html1.0~5.0 xhtml(嚴格) 五大瀏覽器聯合更新自己的版本HTML5(不嚴格)
3.1段落標簽介紹
HTML段落是通過<p></p>標簽進行定義的。
如：
-
<h2>今?學習內容：</h2>
-
<p>學了標題標簽</p>
作用：（1）雖然p標簽的文字顯示外觀來看，和普通文字沒有區別，但是它獨占一行；
（2）標簽語義化，便于定位；
3.2標簽語義化
在合適的地方顯示合理的標簽，搜索引擎也偏好于標簽語義化做的更好的頁面。
4.1加粗標簽
（1）<b></b>為加粗標簽；
（2）<strong></strong>為加粗標簽；
如：
-
普通?字
-
<b>我是加粗?字1</b>
-
<strong>我是加粗?字2</strong>
區別：b標簽為簡單加粗；strong為加粗效果+特別強調效果；
4.2傾斜
（1）<i></i> 為傾斜標簽；
（2）<em></em>也可實現傾斜；
如：
-
普通?字
-
<i>我是i</i>
-
<em>我是em</em>
區別：em標簽的語義更強一些。i為傾斜了，em為又傾斜了。
4.3刪除
<s></s> 刪除效果；
<del></del> 刪除效果；
如：
-
原價:<s>998</s>
-
現值:9.98
-
<br>
-
原價:<del>999</del>
-
現價:9.98
注意：這兩個標簽沒有任何語義區別，而w3c則說明s標簽要被del標簽替代；
<img scr="" alt="" width="" height="" title="">
如：
<img src="Logo2.png" alt="加載中" width="500" height="500" title="?標懸停在圖?上的提示?字">6.1超鏈接使用
超鏈接：點擊頁面發生跳轉；
使用標簽為：<a href=""></a>
其中href為：跳轉的網址；
如：
<a href="https://www.baidu.com">點擊我可以打開百度</a>target=”_blank"：在其它窗口打開新連接；
<a href="https://www.baidu.com" target="_blank">點擊我可以打開百度,并且打開新 的窗?</a>6.2空鏈接
空鏈接：在href中指定為#號即可；
作用：（1）暫時不知道點擊之后跳轉到哪里，使用空鏈接占位；
（2）刷新界面；
<a href="#"></a>列表標簽可分為：無序列表和有序列表。
7.1無序列表
使用標簽：<ul><li></li><li></li><li></li></ul>
注意：
（1）ul標簽可以嵌套若干個li標簽；
（2）每一個li標簽代表著每一條數據；
（3）每個li標簽之間沒有順序；
如：
-
<ul>
-
<li>python</li>
-
<li>java</li>
-
<li>go</li>
-
</ul>
7.2有序列表
使用標簽：<ol><li></li><li></li><li></li></ol>
注意：
（1）有序；
（2）且是ol開始的；
如：
-
<ol>
-
<li>基礎班級</li>
-
<li>測試</li>
-
<li>python</li>
-
</ol>
8.1布局標簽的介紹
布局標簽沒有任何的語義，也沒有所謂的應用場景。
作用：劃分頁面區域，輔助頁面布局；
布局標簽為：
div標簽：<div></div> 大盒子，獨占一行；
span標簽：<span></span>小盒子，一行可以放多個；
-
<div>我是div</div>
-
<div>我是div</div>
-
<div>我是div</div>
-
<div>我是div</div>
-
<span>我是span</span>
-
<span>我是span</span>
-
<span>我是span</span>
-
<span>我是span</span>
9.1表格標簽介紹
作用：展示數據非常整齊；
基本語法：
-
<table>
-
<tr>
-
<td></td>
-
</tr>
-
</table>
（1）table標簽：定義表格標簽；
（2）tr標簽：定義表格中的行；
th標簽：表格單元格；
td標簽：定義表格中的單元格，必須嵌套其中；
9.2表格標簽的其他屬性
（1）align：表格對齊方式。如：left，center，right；
（2）border：表格邊框。如：1；
（3）cellpadding：單元邊沿與其內容之間的空白，默認為1像素；
（4）cellspacing：單元格與單元格之間的空白，默認為2像素；
（5）width：設置表格寬度；
注意：需要寫在table標簽里；
9.3表格結構標簽
表格結構標簽：表格頭部和表格主體兩大部分；
（1）表格頭部區域：<thead>標簽；
（2）表格主體區域：<tbody>標簽；
作用：結構就更加清晰，讓表格有更好的語義；
9.4合并單元格
（1）合并單元格方式
跨行合并：rowspan="合并單元格的個數"；
跨列合并：colspan="合并單元格的個數"；
（2）目標單元格
跨行：最上冊單元格為目標單元格，寫合并代碼；
跨列：最左側單元格為目標單元格，寫合并代碼；
（3）合并單元格步驟
1.先確定是跨行還是跨列合并；
2.找到目標單元格；
3.刪除多余單元格；
10.1表單標簽介紹
表單標簽我們可以直接稱為 form 標簽，標簽書寫如下：
（1）表單標簽：<form action=""></form>。form表單標簽里面就是所有用戶填寫的表單數據；
（2）屬性 action：把表單數據交給指定后臺程序去處理；
（3）屬性 method：傳遞數據時方式方法。
1.默認為post請求（隱式提交數據）；
2.get明文傳送數據；
如：
-
<form action="***.py" method="POST">
-
</form>
10.2輸入框與單選多選框
輸入框標簽（input標簽）：<input type="text">
（1）type：屬性指定輸入框內容；
（2）type="text"：則是最普通的文本輸入框。為單行；
（3）type="password"：則為密碼輸入框。為單行；
placeholder：給用戶提示（提升用戶體驗感的屬性），并且在為本域中都可以使用；
（4）type="radio"：單選框；
（5）type="checkbox"：為多選框；
如：
-
<!-- 填寫用戶名及密碼 -->
-
<span>用戶名：</span>
-
<input type="text" placeholder="請輸入用戶名">
-
<br>
-
<span>密碼：</span>
-
<input type="password" placeholder="請輸入密碼">
-
<br>
-
<!-- 選擇信息：選擇 性別 愛好 -->
-
<!-- 單選按鈕 -->
-
<!-- 一組按鈕：他們倆都是來控制性別的,添加name屬性 -->
-
<span>性別：</span>
-
<input type="radio" name="gender">
-
<span>男</span>
-
-
<input type="radio" name="gender">
-
<span>女</span>
-
<br>
-
<!-- 多選按鈕 -->
-
<span>興趣愛好：</span>
-
<!-- <input type="checkbox"> 睡覺
-
<input type="checkbox"> 打游戲
-
<input type="checkbox"> 女
-
<input type="checkbox"> 羽毛球 -->
-
<!-- 優化:點擊文字也可以選中多選框 -->
-
<input type="checkbox" id="sleep">
-
<label for="sleep">睡覺</label>
-
<input type="checkbox" id="playgame">
-
<label for="playgame">打游戲</label>
-
<input type="checkbox" id="liangnv">
-
<label for="liangnv">女</label>
-
<input type="checkbox" id="yumaoqiu">
-
<label for="yumaoqiu">羽毛球</label>
-
<br>
10.3下拉框
使用標簽：select為下拉框的標簽，嵌套若干個option標簽。其中每一個option為下拉框中的一個選項。
selected="selected"。表示默認選中狀態；
-
<select name="" id="">
-
<option value=""></option>
-
</select> 123
如：
-
<select name="" id="">
-
<option value="">北京</option>
-
<option value="">上海</option>
-
<option value="">?州</option>
-
<option value="" selected="selected">深圳</option>
-
</select> <br>
10.4文本域
使用標簽：<textarea name="", cols="30" rows="10"></textarea>
（1）cols：列；
（2）rows：行；
-
建議：
-
<textarea name="" id="" cols="30" rows="10"></textarea>
-
<br>
10.5按鈕標簽
（1）普通按鈕：
標簽：input指定type="button"；
通過value屬性，指定按鈕的文字；
如：
-
普通按鈕：
-
<input type="button" value="按鈕">
-
<br>
（2）重置按鈕：點擊重置按鈕就會將數據恢復到默認狀態；
標簽：input指定type="reset";
注意：重置按鈕自動會有重置的文字；
如果指定為value屬性，則顯示什么；
如：
-
重置按鈕：
-
<input type="reset" value="重置按鈕">
-
<br>
（3）提交按鈕：點擊提交按鈕可以讓表單提交給指定后臺處理；
標簽：input指定type="submit";
注意：提交按鈕自動會有提交的文字；
如：
-
提交按鈕：
-
<input type="submit" value="我是提交">
上一篇總結了在實操過程中如果遇到了nodejs版本的問題，我們該如何去解決的，還有就是總結了vue2和vue3生命周期的區別，如果感興趣的可以去看看上一篇的內容vue生命周期基礎知識了解一下。
那知道了vue的生命周期知識點，接下就開始vue模板語法吧，在Vue中，Vue模板對應的就是Vue中的View（視圖）部分，也是Vue重中之一，而在Vue中要了解Vue模板我們就需要從兩個方面來著手，其一是Vue的模板語法，其二就是模板渲染。模板語法較簡單一點，但對于模板的渲染（模板編譯）就會更為復雜一些，如果需要了解模板渲染就需要對Vue的渲染函數，響應式原理之類的要有所了解。
<!-- App.vue --> <template> <div id="app"> {{ message }} </div> </template>
上面的代碼演示的僅僅Vue模板中的一種方式，也是最簡單和最常見的一種模板方式。
在Vue中，模板語法是邏輯和視圖之間的溝通橋梁，使用模板語法編寫的HTML會響應Vue實例中的各種變化，簡單地說，Vue實例中的邏輯可以隨心所欲的渲染在頁面上。
Vue模板中插值常見的使用方法主要有：文本、原始HTML、屬性、JavaScript表達式、指令和修飾符**等。
使用了v-once指令的話，那么該插值就是一次性地插值。也就是說，當數據改變時，插值處的內容不會更新。其使用如下所示：
<!-- App.vue --> <template> <div id="app"> <span v-once>{{ message }}</span> </div> </template>
不能使用v-html來復合局部模板，因為Vue不是基于字符串的模板引擎。另外動態渲染任意的HTML會有一定的危險，因為它很容易導致XSS攻擊。
插值語法中（也就是{{}}）會將數據解釋為普通文本，而非HTML代碼，為了輸出真正的HTML，需要使用v-html指令，比如下面這個示例：
<!-- App.vue --> <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <div>{{rawHTML}}</div> <div v-html="rawHTML"></div> </div> </template> <script> export default { name: 'app', data () { return { rawHTML: '<span style="color:red;">原始HTML</span>' } } } </script>
在布爾特性的情況下，它們的存在即暗示為true， v-bind 工作起來略有不同，比如：
<button v-bind:disabled="isButDisabled">Button</button>
現在有很多項目vue項目都有很好用的vue模板，這里就總結一些常用的末班集合。
BootstrapVue 擁有85個以上的組件，45個以上的可用插件，多個指令和670+個圖標， 它提供了可用于Vue.js v2.6的Bootstrap v4.5組件和網格系統的最全面的實現之一 ，并具有廣泛的功能和自動 WAI-ARIA 可訪問性標記。
采用 BootstrapVue 構建響應式、移動優先、ARIA項目（Accessible Rich Internet Application，可訪問的富媒體應用，即無障礙友好應用)，基于 Vue.js 和世界全球最受歡迎的 CSS 前端框架 — Bootstrap v4
GitHub地址：BootstrapVue直接進入
element-ui應該常用了，使用 Element需要先引入整個 Element-ui
在 main.js 中寫入以下內容：
import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app',
render: h => h(App) });
點擊跳轉跳轉地址：Element-ui地址
還有一些開源的項目比如：
renren-fast-vue基于vue、element-ui構建開發，實現renren-fast后臺管理前端功能，提供一套更優的前端解決方案
前后端分離，通過token進行數據交互，可獨立部署* 主題定制，通過scss變量統一一站式定制* 動態菜單，通過菜單管理統一管理訪問路由* 數據切換，通過mock配置對接口數據／mock模擬數據進行切換* 發布時，可動態配置CDN靜態資源／切換新舊版本.
以下是一個使用React開發的左側三級菜單的基本示例：
import React, { useState } from 'react';
const Menu = () => {
const [menuItems, setMenuItems] = useState([
{
id: 1,
name: 'Menu Item 1',
subMenuItems: [
{ id: 1, name: 'Sub-menu Item 1' },
{ id: 2, name: 'Sub-menu Item 2' }
]
},
{
id: 2,
name: 'Menu Item 2',
subMenuItems: [
{ id: 3, name: 'Sub-menu Item 3' },
{ id: 4, name: 'Sub-menu Item 4' }
]
}
]);
const [selectedMenuItem, setSelectedMenuItem] = useState(null);
const [selectedSubMenu, setSelectedSubMenu] = useState(null);
const handleMenuItemClick = (menuItem) => {
setSelectedMenuItem(menuItem.id);
setSelectedSubMenu(null);
};
const handleSubMenuClick = (subMenuItem) => {
setSelectedSubMenu(subMenuItem.id);
};
return (
<div className="menu">
{menuItems.map((menuItem) => (
<div key={menuItem.id}>
<button onClick={() => handleMenuItemClick(menuItem)}>
{menuItem.name}
</button>
{selectedMenuItem === menuItem.id && (
<ul>
{menuItem.subMenuItems.map((subMenuItem) => (
<li key={subMenuItem.id}>
<button onClick={() => handleSubMenuClick(subMenuItem)}>
{subMenuItem.name}
</button>
{selectedSubMenu === subMenuItem.id && (
<ul>
<li>Sub-menu item details</li>
</ul>
)}
</li>
))}
</ul>
)}
</div>
))}
</div>
);
};
export default Menu;
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
HTML代碼：
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item">
<a href="javascript:;">菜單1</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">子菜單1-1</a></dd>
<dd><a href="javascript:;">子菜單1-2</a></dd>
<dd><a href="javascript:;">子菜單1-3</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">菜單2</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">子菜單2-1</a></dd>
<dd><a href="javascript:;">子菜單2-2</a></dd>
<dd>
<a href="javascript:;">子菜單2-3</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">子菜單2-3-1</a></dd>
<dd><a href="javascript:;">子菜單2-3-2</a></dd>
<dd><a href="javascript:;">子菜單2-3-3</a></dd>
</dl>
</dd>
</dl>
</li>
</ul>
</div>
</div>
JavaScript代碼：
//JavaScript代碼需要引入layui.js文件
layui.use('element', function(){
var element = layui.element;
});
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
Label Studio是一種基于Web的開源注釋工具，旨在幫助數據科學家和機器學習工程師更輕松地創建高質量的標簽數據集。它支持多種類型的注釋任務，如文本分類、實體識別、圖像分類等，并且可以集成到現有的機器學習流程中。Label Studio還具有可擴展性和靈活性，可以適應不同的數據類型和注釋需求。
Label Studio的使用一般分為三個階段：部署、標注和導出數據。
部署：可以通過下載源代碼進行本地安裝，也可以使用Docker容器快速部署。此外，Label Studio還提供了在云端使用的選項，如Amazon Web Services（AWS）和Google Cloud Platform（GCP）。
標注：通過創建項目、上傳數據、定義任務類型和注釋模式等步驟，可以開始進行標注。Label Studio支持多種注釋任務，如文本分類、實體識別、圖像分類等。標注人員可以在網頁上直接進行標注，也可以使用API或CLI工具進行標注。
導出數據：標注完成后，可以將標注結果導出為不同格式的數據集，如JSON、CSV、TSV、YAML等，以供機器學習算法使用。
對于開發者而言，可以通過自定義插件和擴展來定制化和豐富Label Studio的功能。Label Studio提供了完備的文檔和API參考，使得開發者可以更加便捷地進行開發和調試工作。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
import React, { useState } from 'react';
function BasicForm() {
const [formData, setFormData] = useState({
name: '',
email: '',
message: ''
});
const handleChange = (event) => {
const { name, value } = event.target;
setFormData({ ...formData, [name]: value });
};
const handleSubmit = (event) => {
event.preventDefault();
console.log(formData);
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" name="name" value={formData.name} onChange={handleChange} />
</label>
<label>
Email:
<input type="email" name="email" value={formData.email} onChange={handleChange} />
</label>
<label>
Message:
<textarea name="message" value={formData.message} onChange={handleChange} />
</label>
<button type="submit">Submit</button>
</form>
);
}
export default BasicForm;
此表單組件具有三個輸入字段：名稱、電子郵件和消息。useState Hook 用于存儲表單數據，并且 handleChange 函數處理輸入字段值的更改。handleSubmit 函數在提交表單時被調用并打印出表單數據至控制臺。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
React 是由 Facebook 開發的一個用于構建用戶界面的 JavaScript 庫。以下是 React 快速入門的步驟：
安裝 React：可以通過命令行工具使用 npm 或者 yarn 安裝 React。
創建 React 應用程序：可以使用腳手架工具（如 create-react-app）快速創建基本的 React 應用程序。
編寫組件：React 的核心是組件，您需要編寫組件來構建應用程序。組件是一個可重復使用的代碼塊，它包含了 HTML 和 JavaScript 代碼。
渲染組件：使用 ReactDOM.render() 方法將組件渲染到頁面上。
處理事件：React 使用類似 HTML 的語法來處理事件。在組件中定義事件處理程序，例如 onClick 或者 onSubmit，并將其綁定到相應的元素上。
狀態管理：React 允許您使用狀態來管理數據。您可以使用 setState() 方法更新組件的狀態，并在組件中讀取狀態以顯示不同的內容。
生命周期：React 組件有生命周期方法，這些方法允許您在組件生命周期內執行操作。例如，componentDidMount() 方法在組件被掛載后執行一次，用于初始化數據。
這些是 React 快速入門的基本步驟。要深入了解 React，請查閱相關文檔和教程。
React 生命周期指的是React組件在掛載（mounting）、更新（updating）和卸載（unmounting）等不同階段所經歷的生命周期方法，包括：
其中，constructor()是組件實例化時第一個被調用的方法；static getDerivedStateFromProps()將props映射為state的方法；render()渲染組件的虛擬DOM；componentDidMount()在組件掛載后執行；shouldComponentUpdate()控制組件是否需要重新渲染；getSnapshotBeforeUpdate()捕獲更新前的DOM狀態；componentDidUpdate()在組件更新后執行；componentWillUnmount()在組件卸載前執行清理操作。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
Vue組件實例在創建、更新和銷毀過程中，會依次觸發一些鉤子函數，這些鉤子函數稱為Vue生命周期函數。Vue的生命周期分為四個階段：創建階段、掛載階段、更新階段和銷毀階段。
在創建階段，Vue實例正在被創建，這個階段中包含了實例化、數據觀測、事件/鉤子初始化等過程。具體包括以下鉤子函數：
在這個階段，Vue實例將模板渲染成真實的DOM并進行掛載到頁面上。具體包括以下鉤子函數：
在這個階段，當Vue實例的數據變化時，它會重新渲染虛擬DOM并更新到頁面上。具體包括以下鉤子函數：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
使用layui實現前端換膚功能可以通過以下幾個步驟完成：
安裝layui：我們需要從官方網站下載安裝layui。你可以在https://www.layui.com/下載最新版本。
引入樣式文件：在HTML頁面中引入需要的樣式文件。我們可以使用layuicss提供的樣式表來實現各種外觀效果。如果您需要自定義樣式，請創建自己的CSS文件，并在HTML中引入。
創建主題顏色列表：我們需要創建一個包含所有可用主題顏色的列表。您可以使用數組或JSON對象來創建此列表。例如：
javascript復制代碼
var themeColors = [
{name: '默認', color: '#009688'},
{name: '橙色', color: '#FFB800'},
{name: '墨綠', color: '#393D49'},
{name: '紫色', color: '#800080'},
{name: '深藍', color: '#285FD3'}
];
javascript復制代碼
layui.use('colorpicker', function(){ var colorpicker = layui.colorpicker; // 初始化顏色選擇器 colorpicker.render({ elem: '#theme-color-picker',
colors
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
Vue.js是一款非常流行的JavaScript框架，用于構建單頁Web應用程序（SPA）。它的設計目標是簡單、靈活和易于使用。Vue.js提供了許多有用的功能，可以幫助開發人員更輕松地構建響應式、動態的用戶界面。在本文中，我們將介紹Vue.js的基礎知識，以及如何使用Vue.js來創建一個簡單的Web應用程序。
首先，讓我們來看一下Vue.js的核心思想。Vue.js采用了MVVM（Model-View-ViewModel）的架構模式。這種模式將應用程序分為三個部分：模型（Model）、視圖（View）和視圖模型（ViewModel）。模型表示應用程序的數據，視圖表示UI，而視圖模型則是將兩者鏈接起來的橋梁。Vue.js的核心就是它的響應式系統。當模型的狀態發生改變時，視圖會自動更新，反之亦然。這使得開發人員可以更加專注于業務邏輯的實現，而不需要手動處理DOM操作。
接下來，讓我們看一下Vue.js的基礎語法。Vue.js通過指令（Directive）來擴展HTML。指令以v-開頭，并且在表達式中使用。例如，v-bind指令用于將一個屬性綁定到表達式上，v-model指令用于雙向綁定表單元素和應用程序狀態之間的數據。Vue.js還提供了許多其他指令，
一、核心概念
模板語法：Vue.js使用了一種類似于HTML的模板語法來聲明渲染和組合DOM元素。模板語法被稱為Vue指令，可以通過{{ }}和v-前綴在模板中使用。其中{{ }}用于文本插值，而v-則用于Vue.js提供的各種指令。
數據綁定：Vue.js的核心是響應式數據綁定系統，它能夠自動跟蹤并響應數據對象和視圖之間的變化。當數據發生變化時，Vue會立即更新視圖以反映這些變化。
組件化：Vue.js允許我們將UI分解為可重用和獨立的組件。每個組件都有自己的狀態和行為，并且可以與其他組件組合使用。這種組件化方法使得代碼更容易維護、測試和復用。
生命周期鉤子函數：Vue.js提供了一組生命周期鉤子函數，在不同階段執行自定義邏輯。這些鉤子函數包
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
藍藍設計的小編 http://www.syprn.cn