Comment utiliser ele dans vue

Tutoriel sur l'utilisation du framework Element UI dans Vue

Vue est l'un des frameworks front-end les plus populaires du moment, et Element UI est une bibliothèque de composants basée sur Vue.js, qui est une bibliothèque de composants très populaire dans Vue Un cadre de bienvenue. Cet article explique comment utiliser le framework Element UI dans Vue.

1. Installation d'Element UI

Avant d'installer Element UI, vous devez d'abord installer Vue.js. Il est recommandé d'utiliser l'échafaudage Vue.js vue-cli. Vous pouvez exécuter la commande suivante dans la ligne de commande :

npm install -g vue-cli

Une fois l'installation terminée, vous pouvez créer un projet Vue via la commande suivante. :

vue init webpack my-project

#🎜🎜 #Une fois la création terminée, entrez dans le répertoire du projet et installez le framework Element UI :

npm install element-ui --save

Une fois l'installation terminée, le framework Eleme UI peut être introduit dans le projet.

2. Utiliser Element UI dans Vue

L'introduction du framework Element UI dans le projet doit être introduite dans main.js et utiliser la méthode 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')

Il convient de noter que le fichier CSS d'Element UI doit être introduit avant d'introduire Element UI. Dans le code ci-dessus, import 'element-ui/lib/theme-chalk/index.css' est utilisé pour introduire le fichier CSS. Vous devez également utiliser les composants fournis par Element UI dans le modèle, par exemple :

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

Le composant Button dans Element UI est utilisé ici. D'autres composants peuvent être utilisés selon les besoins. Tous les composants peuvent être trouvés dans la documentation officielle d'Element UI.

3. Utilisation des composants Element UI

Composant Button

Utilisez le composant Button dans Vue comme suit : # 🎜🎜#

<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>

Parmi eux, l'attribut type est le type de bouton.

Composant d'entrée

2. L'utilisation du composant d'entrée dans Vue est la suivante :

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

Parmi eux, v- Le modèle est utilisé. Données de liaison bidirectionnelle, un espace réservé est utilisé pour définir le texte d'espace réservé de l'entrée.

Composant Radio

3. L'utilisation du composant Radio dans Vue est la suivante :

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

Parmi eux, v- Le modèle est utilisé. Données de liaison bidirectionnelle, l'étiquette est utilisée pour enregistrer la valeur actuellement sélectionnée.

Composant Checkbox

4. Utilisez le composant Checkbox dans Vue comme suit :

<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>

Parmi eux, el-checkbox -group Il est utilisé pour combiner plusieurs cases à cocher et le modèle v est utilisé pour lier les données dans deux directions. Chaque composant Checkbox doit définir l'attribut label pour enregistrer la valeur actuellement sélectionnée.

Composant Select

5. L'utilisation du composant Select dans Vue est la suivante :

<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>

Parmi eux, v- Le modèle est utilisé Données de liaison bidirectionnelle, le composant el-option est utilisé pour représenter chaque option et sa valeur correspondante.

Ce qui précède est le contenu de base du framework Element UI utilisé dans Vue. Vous pouvez utiliser plus de composants et de méthodes en fonction de vos besoins spécifiques. Dans le même temps, vous pouvez également consulter davantage de didacticiels et de documents sur le site officiel d'Element UI.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!