整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
家好，我是 Echa。
Vue 3.0 已經(jīng)發(fā)布兩年多的時(shí)間，今年 2 月 Vue 3.0 也正式成為新的默認(rèn)版本。今天就來分享 7 個(gè)適用于 Vue 3 的高顏值 UI 組件庫(kù)！
全文大綱：
Element Plus 是一套由餓了么開源出品的為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 3.0 的組件庫(kù)。Element Plus 使用 TypeScript + Composition API 進(jìn)行了重構(gòu)，提供完整的類型定義文件，使用 Vue 3.0 Composition API 降低耦合、簡(jiǎn)化邏輯，使用 Lerna 維護(hù)和管理項(xiàng)目，完善了 52 種國(guó)際化語(yǔ)言支持，支持了黑暗模式。
由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 瀏覽器，其環(huán)境支持情況如下：
Ant Design of Vue 是 Ant Design 的 Vue 實(shí)現(xiàn)，開發(fā)和服務(wù)于企業(yè)級(jí)后臺(tái)產(chǎn)品。其具有以下特性：
Ant Design Vue 支持服務(wù)端渲染，支持在 Electron 中文使用，其環(huán)境支持情況如下：
Naive UI 是一款由圖森未來開源，基于 Vue 3.0/TypeScript 技棧開發(fā)的 UI 組件庫(kù)。其具有以下特點(diǎn)：
Varlet 是一個(gè)基于 Vue3 開發(fā)的 Material 風(fēng)格移動(dòng)端組件庫(kù)，全面擁抱 Vue3 生態(tài)，由社區(qū)團(tuán)隊(duì)維護(hù)。其支持 Typescript、按需引入、暗黑模式、主題定制、國(guó)際化，并提供 VS Code 插件保障良好的開發(fā)體驗(yàn)。
NutUI 是一套由京東出品的移動(dòng)端 Vue2、Vue3 組件庫(kù)，支持一套代碼生成 H5 和小程序。其具有以下特點(diǎn)：
Vant 是一套由有贊出品的輕量、可靠的移動(dòng)端組件庫(kù)。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。其具有以下特點(diǎn)：
Arco Design 是一套由字節(jié)跳動(dòng)出品的基于 Arco Design 的 Vue UI 組件庫(kù)。提供了 60 多個(gè)開箱即用的高質(zhì)量組件, 可以覆蓋絕大部分業(yè)務(wù)場(chǎng)景。
LitElement是一個(gè)簡(jiǎn)單的JAVASCRIPT基類，用于創(chuàng)建快速，輕量級(jí)的Web組件，可以在任何支持web components技術(shù)的Web頁(yè)面中使用。
LitElement使用lit-html渲染shadow DOM，并添加API來管理屬性。 默認(rèn)情況下會(huì)觀察屬性變化，并且元素在其屬性更改時(shí)異步更新。
您需要npm和Node.js才能使用LitElement。 要安裝npm和Node.js
LitElement使用JavaScript模塊通過其npm包名稱導(dǎo)入依賴項(xiàng)。 由于Web瀏覽器需要知道文件的完整URL才能導(dǎo)入，因此本地開發(fā)服務(wù)器需要為Web瀏覽器提供完整的轉(zhuǎn)換URL路徑。
要部署適用于目標(biāo)瀏覽器的優(yōu)化構(gòu)建，您還需要一個(gè)可以處理此轉(zhuǎn)換的構(gòu)建工具集以及任何捆綁。
一個(gè)選項(xiàng)是Polymer CLI，它包括一個(gè)開發(fā)服務(wù)器，可以將模塊名稱動(dòng)態(tài)轉(zhuǎn)換為路徑; 以及一個(gè)可配置的構(gòu)建工具，用于打包代碼以進(jìn)行部署。
要使用npm安裝Polymer CLI：
npm install -g polymer-cli
本地運(yùn)行LitElement項(xiàng)目：
polymer serve
要基于LitElement創(chuàng)建新類：
在項(xiàng)目文件夾中，從npm安裝lit-element包：
npm install lit-element
寫下你的新元素：
導(dǎo)入LitElement基類和html幫助函數(shù)。
創(chuàng)建一個(gè)擴(kuò)展LitElement基類的新類。
實(shí)現(xiàn)渲染以定義Web組件的模板。
使用瀏覽器注冊(cè)組件的HTML標(biāo)記。
示例代碼：
my-element.js
// Import the LitElement base class and html helper function
import { LitElement, html } from 'lit-element';
// Extend the LitElement base class
class MyElement extends LitElement {
/**
* Implement `render` to define a template for your element.
*
* You must provide an implementation of `render` for any element
* that uses LitElement as a base class.
*/
render(){
/**
* `render` must return a lit-html `TemplateResult`.
*
* To create a `TemplateResult`, tag a JavaScript template literal
* with the `html` helper function:
*/
return html`
<!-- template content -->
<p>A paragraph</p>
`;
}
}
// Register the new element with the browser.
customElements.define('my-element', MyElement);
HTML中使用
<head> <script type="module" src="/path/to/my-element.js"></script> </head> <body> <my-element></my-element> </body>
在其它ES6組件中使用：
我們?cè)谇懊娴恼鹿?jié)中已經(jīng)了解了如何在屏幕上以文本內(nèi)容的形式獲得輸出。在本文中我們將學(xué)習(xí)如何在屏幕上以HTML模板的形式獲得輸出。我們先看一段代碼好來幫助我們理解。
//index.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>vue模板和組件</title>
</head>
<body>
<div id="vue_det">
<h1>姓名 : {{ name }}</h1>
<div>{{ htmlcontent }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
//js/app.js+
var vm=new Vue({
el: '#vue_det',
data: {
name: "孫悟空",
htmlcontent: "<div><h1>Vue Js Template</h1></div>"
}
})
使用live-server啟動(dòng)項(xiàng)目得到如下結(jié)果
因?yàn)槲覀兪褂昧瞬逯担簿褪请p括號(hào)，我們?cè)跒g覽器中就真實(shí)的顯示了html內(nèi)容，這顯然和我們想要渲染html是不同的，我們希望它在瀏覽器能顯示html渲染的內(nèi)容。
為了解決上面的問題，我們不得不適用v-html指令，只要我們將v-html屬性分配給html元素，vue就會(huì)知道將其作為html內(nèi)容輸出，我們嘗試下：
<div id="vue_det">
<h1>姓名 : {{ name }}</h1>
<div v-html="htmlcontent"></div>
</div>
得到了如下結(jié)果
從瀏覽器調(diào)試可以看出
與app.js中填寫的html字符串表現(xiàn)得相同
我們已經(jīng)了解了如何將HTML模板添加到DOM。現(xiàn)在，我們將實(shí)現(xiàn)如何向現(xiàn)有的HTML元素添加屬性。想象一下，我們?cè)贖TML文件中有一個(gè)圖像標(biāo)記，我們想要分配src屬性，舉例，直接看代碼
<div id="vue_det">
<h1>姓名 : {{ name }}</h1>
<div v-html="htmlcontent"></div>
<img src="" width="300" height="250" />
</div>
img標(biāo)簽的src是空的，我們將src放到j(luò)s的數(shù)據(jù)對(duì)象中
var vm=new Vue({
el: '#vue_det',
data: {
name: "孫悟空",
htmlcontent: "<div><h1>Vue Js Template</h1></div>",
imgsrc: './img/img.jpg'
}
})
然后我們修改index.html
<img src="{{ imgsrc }}" width="300" height="250" />
結(jié)果如下
好像哪里不對(duì)，其實(shí)不是，在vue中，我們綁定屬性用v-bind指令
<img v-bind:src="imgsrc" width="300" height="250" />
可以看到我們?yōu)g覽器中渲染的html
Vue組件是VueJS的重要功能之一，可以創(chuàng)建自定義元素，可以在HTML中重復(fù)使用。讓我們使用一個(gè)示例并創(chuàng)建一個(gè)組件。
//index.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>vue模板和組件</title> </head> <body> <div id="component_test"> <testcomponent></testcomponent> </div> <div id="component_test1"> <testcomponent></testcomponent> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script type="text/javascript" src="js/app.js"></script> </body> </html>
//js/app.js
Vue.component('testcomponent', {
template: '<div><h1>This is coming from component</h1></div>'
});
var vm=new Vue({
el: '#component_test'
});
var vm1=new Vue({
el: '#component_test1'
});
我們創(chuàng)建了兩個(gè)div，id分別是component_test和component_test1，在app.js中我們創(chuàng)建了兩個(gè)Vue實(shí)例，外加一個(gè)Vue組件，要想創(chuàng)建組件，它的語(yǔ)法是
Vue.component('nameofthecomponent',{ // options});
創(chuàng)建組件后，組件的名稱將成為自定義元素，并且可以在創(chuàng)建的Vue實(shí)例元素中使用相同的名稱，在app.js文件中創(chuàng)建的組件中，我們添加了一個(gè)模板，我們已為其分配了HTML代碼。這是一種注冊(cè)全局組件的方法，可以將其作為任何vue實(shí)例的一部分，我們發(fā)現(xiàn)這時(shí)候?yàn)g覽器變成了
組件被賦予自定義元素標(biāo)記，即<testcomponent> </ testcomponent>。但是，當(dāng)我們?cè)跒g覽器中檢查相同內(nèi)容時(shí)，我們發(fā)現(xiàn)結(jié)果沒有自定義的元素，如以下屏幕截圖所示。
我們也可以將組件作為vue實(shí)例的一部分
var vm=new Vue({
el: '#component_test',
components:{
'testcomponent': {
template : '<div><h1>This is coming from component</h1></div>'
}
}
});
這是本地注冊(cè)組件，組件只是vue實(shí)例的一部分。到目前為止我們已經(jīng)基本組件的實(shí)現(xiàn)。現(xiàn)在我們來繼續(xù)擴(kuò)展。
// js/app.js
Vue.component('testcomponent', {
template: '<div v-on:mouseover="changename()" v-on:mouseout="originalname();"><h1>Custom Component created by <span id="name">{{name}}</span></h1></div>',
data: function () {
return {
name: "tom"
}
},
methods: {
changename: function () {
this.name="bob";
},
originalname: function () {
this.name="tom";
}
}
});
var vm=new Vue({
el: '#component_test'
});
var vm1=new Vue({
el: '#component_test1'
});
在上面的app.js文件中，我們添加了一個(gè)函數(shù)，它返回一個(gè)對(duì)象。該對(duì)象具有name屬性，該屬性被賦值為'tom'。盡管這里data是函數(shù)，我們也可以像直接在Vue實(shí)例中使用其屬性，此外這里還添加了兩個(gè)函數(shù)，在changename中，我們更改name屬性，在originalname中我們將其重置為原始名稱，有關(guān)事件我們后面在討論，這段代碼的結(jié)果是：
因?yàn)榉峙淞薽ouseover和mouseout事件，當(dāng)鼠標(biāo)懸停在tom上時(shí)，會(huì)將tom改成bob
使用關(guān)鍵字<component> </ component>創(chuàng)建動(dòng)態(tài)組件，并使用屬性綁定，如下
<component v-bind:is="view"></component>
//index.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>vue模板和組件</title> </head> <body> <div id="databinding"> <component v-bind:is="view"></component> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script type="text/javascript" src="js/app.js"></script> </body> </html>
//app.js
var vm=new Vue({
el: "#databinding",
data: {
view: "component1"
},
components: {
component1: {
template:
'<div><span style="font-size:25;color:red;">Dynamic Component</span></div>'
}
}
});
瀏覽器已顯示值：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
