So verwenden Sie Ele in Vue

Tutorial zur Verwendung des Element UI-Frameworks in Vue

Vue ist derzeit eines der beliebtesten Front-End-Frameworks, und Element UI ist eine Komponentenbibliothek, die auf Vue.js basiert und ein sehr beliebtes Framework in Vue ist. In diesem Artikel wird die Verwendung des Element UI-Frameworks in Vue vorgestellt.

1. Installation von Element UI

Bevor Sie Element UI installieren, müssen Sie zuerst Vue.js installieren. Es wird empfohlen, das Vue.js-Gerüst vue-cli zu verwenden. Sie können den folgenden Befehl in der Befehlszeile ausführen:

npm install -g vue-cli

Nach Abschluss der Installation können Sie mit dem folgenden Befehl ein Vue-Projekt erstellen:

vue init webpack my-project

Nach dem Wenn die Erstellung abgeschlossen ist, geben Sie das Projektverzeichnis ein und installieren Sie das Element UI-Framework:

npm install element-ui --save

Nach Abschluss der Installation kann das Eleme UI-Framework in das Projekt eingeführt werden.

2. Verwendung von Element UI in Vue

Die Einführung des Element UI-Frameworks in das Projekt muss in main.js eingeführt und mit der Vue.use()-Methode verwendet werden:

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Es sollte beachtet werden, dass vor der Einführung von Element UI Sie müssen zuerst die CSS-Datei von Element UI einführen. Im obigen Code wird import „element-ui/lib/theme-chalk/index.css“ verwendet, um CSS-Dateien einzuführen. Sie müssen auch die von Element UI bereitgestellten Komponenten in der Vorlage verwenden, zum Beispiel:

<template>
  <div>
    <el-button type="primary">按钮</el-button>
  </div>
</template>

Die Button-Komponente in Element UI wird hier verwendet. Bei Bedarf können weitere Komponenten verwendet werden. Alle Komponenten finden Sie in der offiziellen Dokumentation von Element UI.

3. Verwendung von Element-UI-Komponenten

1. Button-Komponente

Die Verwendung der Button-Komponente in Vue ist wie folgt:

<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="info">信息按钮</el-button>

Dabei ist das Typattribut der Typ der Schaltfläche.

2. Eingabekomponente

Verwenden Sie die Eingabekomponente in Vue wie folgt:

<el-input v-model="inputValue" placeholder="请输入内容" style="width: 200px;"></el-input>

Unter diesen wird das V-Modell verwendet, um Daten in zwei Richtungen zu binden, und ein Platzhalter wird verwendet, um den Platzhaltertext der Eingabe festzulegen.

3. Radio-Komponente

Verwenden Sie die Radio-Komponente in Vue wie folgt:

<el-radio v-model="radio" label="1">备选项1</el-radio>
<el-radio v-model="radio" label="2">备选项2</el-radio>

Dabei wird das V-Modell verwendet, um Daten in zwei Richtungen zu binden, und die Bezeichnung wird verwendet, um den aktuell ausgewählten Wert aufzuzeichnen.

4. Checkbox-Komponente

Verwenden Sie die Checkbox-Komponente in Vue wie folgt:

<el-checkbox-group v-model="checkbox">
  <el-checkbox label="复选框 A"></el-checkbox>
  <el-checkbox label="复选框 B"></el-checkbox>
  <el-checkbox label="复选框 C"></el-checkbox>
  <el-checkbox label="禁用" disabled></el-checkbox>
  <el-checkbox label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>

Unter diesen wird el-checkbox-group zum Kombinieren mehrerer Checkboxen verwendet, und v-model wird zum Binden von Daten in zwei Richtungen verwendet. Jede Checkbox-Komponente muss das Label-Attribut festlegen, um den aktuell ausgewählten Wert aufzuzeichnen.

5. Select-Komponente

Verwenden Sie die Select-Komponente in Vue wie folgt:

<el-select v-model="value" placeholder="请选择">
  <el-option label="北京" value="Beijing"></el-option>
  <el-option label="上海" value="Shanghai"></el-option>
  <el-option label="广州" value="Guangzhou"></el-option>
  <el-option label="深圳" value="Shenzhen"></el-option>
</el-select>

Unter diesen wird das V-Modell verwendet, um Daten in zwei Richtungen zu binden, und die el-Option-Komponente wird verwendet, um jede Option und ihre Entsprechung darzustellen Wert.

Das Obige ist der grundlegende Inhalt des in Vue verwendeten Element-UI-Frameworks. Sie können je nach Ihren spezifischen Anforderungen weitere Komponenten und Methoden verwenden. Gleichzeitig können Sie sich weitere Tutorials und Dokumente auf der offiziellen Website von Element UI ansehen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Ele in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!