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

npm install element-ui --save

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

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

Composant Button

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

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.

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.

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.

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!