整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，我是 Echa。
Vue 3.0 已經發布兩年多的時間，今年 2 月 Vue 3.0 也正式成為新的默認版本。今天就來分享 7 個適用于 Vue 3 的高顏值 UI 組件庫！
全文大綱：
Element Plus 是一套由餓了么開源出品的為開發者、設計師和產品經理準備的基于 Vue 3.0 的組件庫。Element Plus 使用 TypeScript + Composition API 進行了重構，提供完整的類型定義文件，使用 Vue 3.0 Composition API 降低耦合、簡化邏輯，使用 Lerna 維護和管理項目，完善了 52 種國際化語言支持，支持了黑暗模式。
由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 瀏覽器，其環境支持情況如下：
Ant Design of Vue 是 Ant Design 的 Vue 實現，開發和服務于企業級后臺產品。其具有以下特性：
Ant Design Vue 支持服務端渲染，支持在 Electron 中文使用，其環境支持情況如下：
Naive UI 是一款由圖森未來開源，基于 Vue 3.0/TypeScript 技棧開發的 UI 組件庫。其具有以下特點：
Varlet 是一個基于 Vue3 開發的 Material 風格移動端組件庫，全面擁抱 Vue3 生態，由社區團隊維護。其支持 Typescript、按需引入、暗黑模式、主題定制、國際化，并提供 VS Code 插件保障良好的開發體驗。
NutUI 是一套由京東出品的移動端 Vue2、Vue3 組件庫，支持一套代碼生成 H5 和小程序。其具有以下特點：
Vant 是一套由有贊出品的輕量、可靠的移動端組件庫。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。其具有以下特點：
Arco Design 是一套由字節跳動出品的基于 Arco Design 的 Vue UI 組件庫。提供了 60 多個開箱即用的高質量組件, 可以覆蓋絕大部分業務場景。
LitElement是一個簡單的JAVASCRIPT基類，用于創建快速，輕量級的Web組件，可以在任何支持web components技術的Web頁面中使用。
LitElement使用lit-html渲染shadow DOM，并添加API來管理屬性。 默認情況下會觀察屬性變化，并且元素在其屬性更改時異步更新。
您需要npm和Node.js才能使用LitElement。 要安裝npm和Node.js
LitElement使用JavaScript模塊通過其npm包名稱導入依賴項。 由于Web瀏覽器需要知道文件的完整URL才能導入，因此本地開發服務器需要為Web瀏覽器提供完整的轉換URL路徑。
要部署適用于目標瀏覽器的優化構建，您還需要一個可以處理此轉換的構建工具集以及任何捆綁。
一個選項是Polymer CLI，它包括一個開發服務器，可以將模塊名稱動態轉換為路徑; 以及一個可配置的構建工具，用于打包代碼以進行部署。
要使用npm安裝Polymer CLI：
npm install -g polymer-cli
本地運行LitElement項目：
polymer serve
要基于LitElement創建新類：
在項目文件夾中，從npm安裝lit-element包：
npm install lit-element
寫下你的新元素：
導入LitElement基類和html幫助函數。
創建一個擴展LitElement基類的新類。
實現渲染以定義Web組件的模板。
使用瀏覽器注冊組件的HTML標記。
示例代碼：
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組件中使用：
我們在前面的章節中已經了解了如何在屏幕上以文本內容的形式獲得輸出。在本文中我們將學習如何在屏幕上以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啟動項目得到如下結果
因為我們使用了插值，也就是雙括號，我們在瀏覽器中就真實的顯示了html內容，這顯然和我們想要渲染html是不同的，我們希望它在瀏覽器能顯示html渲染的內容。
為了解決上面的問題，我們不得不適用v-html指令，只要我們將v-html屬性分配給html元素，vue就會知道將其作為html內容輸出，我們嘗試下：
<div id="vue_det">
<h1>姓名 : {{ name }}</h1>
<div v-html="htmlcontent"></div>
</div>
得到了如下結果
從瀏覽器調試可以看出
與app.js中填寫的html字符串表現得相同
我們已經了解了如何將HTML模板添加到DOM。現在，我們將實現如何向現有的HTML元素添加屬性。想象一下，我們在HTML文件中有一個圖像標記，我們想要分配src屬性，舉例，直接看代碼
<div id="vue_det">
<h1>姓名 : {{ name }}</h1>
<div v-html="htmlcontent"></div>
<img src="" width="300" height="250" />
</div>
img標簽的src是空的，我們將src放到js的數據對象中
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" />
結果如下
好像哪里不對，其實不是，在vue中，我們綁定屬性用v-bind指令
<img v-bind:src="imgsrc" width="300" height="250" />
可以看到我們瀏覽器中渲染的html
Vue組件是VueJS的重要功能之一，可以創建自定義元素，可以在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="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'
});
我們創建了兩個div，id分別是component_test和component_test1，在app.js中我們創建了兩個Vue實例，外加一個Vue組件，要想創建組件，它的語法是
Vue.component('nameofthecomponent',{ // options});
創建組件后，組件的名稱將成為自定義元素，并且可以在創建的Vue實例元素中使用相同的名稱，在app.js文件中創建的組件中，我們添加了一個模板，我們已為其分配了HTML代碼。這是一種注冊全局組件的方法，可以將其作為任何vue實例的一部分，我們發現這時候瀏覽器變成了
組件被賦予自定義元素標記，即<testcomponent> </ testcomponent>。但是，當我們在瀏覽器中檢查相同內容時，我們發現結果沒有自定義的元素，如以下屏幕截圖所示。
我們也可以將組件作為vue實例的一部分
var vm=new Vue({
el: '#component_test',
components:{
'testcomponent': {
template : '<div><h1>This is coming from component</h1></div>'
}
}
});
這是本地注冊組件，組件只是vue實例的一部分。到目前為止我們已經基本組件的實現。現在我們來繼續擴展。
// 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文件中，我們添加了一個函數，它返回一個對象。該對象具有name屬性，該屬性被賦值為'tom'。盡管這里data是函數，我們也可以像直接在Vue實例中使用其屬性，此外這里還添加了兩個函數，在changename中，我們更改name屬性，在originalname中我們將其重置為原始名稱，有關事件我們后面在討論，這段代碼的結果是：
因為分配了mouseover和mouseout事件，當鼠標懸停在tom上時，會將tom改成bob
使用關鍵字<component> </ component>創建動態組件，并使用屬性綁定，如下
<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>'
}
}
});
瀏覽器已顯示值：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
