Cara menggunakan ele in vue-Soal Jawab bahagian hadapan-php.cn

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

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.

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.

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.

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.

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!