Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Cara menggunakan ele in vue

Cara menggunakan ele in vue

WBOY
Lepaskan: 2023-05-08 10:11:07
asal
635 orang telah melayarinya

Tutorial menggunakan rangka kerja UI Elemen dalam Vue

Vue ialah salah satu rangka kerja bahagian hadapan paling popular pada masa ini dan UI Elemen ialah satu set perpustakaan komponen berdasarkan Vue.js, iaitu yang sangat popular dalam bingkai Vue. Artikel ini akan memperkenalkan cara menggunakan rangka kerja UI Elemen dalam Vue.

1. Pemasangan UI Elemen

Sebelum memasang UI Elemen, anda perlu memasang Vue.js terlebih dahulu. Adalah disyorkan untuk menggunakan scaffolding Vue.js vue-cli Anda boleh menjalankan arahan berikut dalam baris arahan:

npm install -g vue-cli
Salin selepas log masuk

Selepas pemasangan selesai, anda boleh mencipta projek Vue melalui arahan berikut: <.>

vue init webpack my-project
Salin selepas log masuk

Selepas penciptaan selesai Selepas itu, masukkan direktori projek dan pasang rangka kerja UI Elemen:

npm install element-ui --save
Salin selepas log masuk
Selepas pemasangan selesai, rangka kerja UI Eleme boleh diperkenalkan ke dalam projek.

2. Menggunakan UI Elemen dalam Vue

Memperkenalkan rangka kerja UI Elemen ke dalam projek perlu diperkenalkan dalam main.js dan digunakan menggunakan kaedah Vue.use():

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')
Salin selepas log masuk
Perlu diambil perhatian bahawa fail CSS UI Unsur perlu diperkenalkan sebelum memperkenalkan UI Unsur. Dalam kod di atas, import 'element-ui/lib/theme-chalk/index.css' digunakan untuk memperkenalkan fail CSS. Anda juga perlu menggunakan komponen yang disediakan oleh UI Elemen dalam templat, contohnya:

<template>
  <div>
    <el-button type="primary">按钮</el-button>
  </div>
</template>
Salin selepas log masuk
Komponen Butang dalam UI Elemen digunakan di sini. Lebih banyak komponen boleh digunakan mengikut keperluan. Semua komponen boleh didapati dalam dokumentasi rasmi UI Elemen.

3. Penggunaan komponen UI Elemen

    Komponen butang
Gunakan komponen Button dalam Vue seperti berikut:

<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>
Salin selepas log masuk
Antaranya , Atribut jenis ialah jenis butang.

    Komponen input
Gunakan komponen Input dalam Vue seperti berikut:

<el-input v-model="inputValue" placeholder="请输入内容" style="width: 200px;"></el-input>
Salin selepas log masuk
Antaranya, model v digunakan untuk pengikatan dua hala bagi data, dan pemegang tempat digunakan untuk Tetapkan teks pemegang tempat untuk Input.

    Komponen radio
Menggunakan komponen Radio dalam Vue adalah seperti berikut:

<el-radio v-model="radio" label="1">备选项1</el-radio>
<el-radio v-model="radio" label="2">备选项2</el-radio>
Salin selepas log masuk
Antaranya, model v digunakan untuk pengikatan dua hala data, dan label digunakan untuk Merekod nilai yang dipilih pada masa ini.

    Komponen kotak semak
Gunakan komponen Kotak Semak dalam Vue seperti berikut:

<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>
Salin selepas log masuk
Antaranya, el-checkbox-group digunakan untuk menggabungkan berbilang Kotak Semak Gunakannya bersama-sama, dan gunakan v-model untuk mengikat data dalam dua arah. Setiap komponen Kotak Semak perlu menetapkan atribut label untuk merekodkan nilai yang dipilih pada masa ini.

    Pilih komponen
Gunakan komponen Pilih dalam Vue seperti berikut:

<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>
Salin selepas log masuk
Antaranya, model v digunakan untuk data pengikatan dua hala , Komponen el-option digunakan untuk mewakili setiap pilihan dan nilai yang sepadan.

Di atas ialah kandungan asas rangka kerja UI Elemen yang digunakan dalam Vue Anda boleh menggunakan lebih banyak komponen dan kaedah mengikut keperluan khusus anda. Pada masa yang sama, anda juga boleh melihat lebih banyak tutorial dan dokumen di tapak web rasmi UI Elemen.

Atas ialah kandungan terperinci Cara menggunakan ele in vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan