Vueでのeleの使い方

Vue での Element UI フレームワークの使用に関するチュートリアル

Vue は現在最も人気のあるフロントエンド フレームワークの 1 つであり、Element UI は Vue.js に基づくコンポーネント ライブラリのセットです。 Vue フレームで非常に人気のあるフレームです。この記事では、Vue で Element UI フレームワークを使用する方法を紹介します。

1. Element UI のインストール

Element UI をインストールする前に、まず Vue.js をインストールする必要があります。 Vue.js スキャフォールディング vue-cli を使用することをお勧めします。コマンド ラインで次のコマンドを実行できます:

npm install -g vue-cli

インストールが完了したら、次のコマンドを使用して Vue プロジェクトを作成できます。 ##

vue init webpack my-project

作成完了後 その後、プロジェクトディレクトリに移動し、Element UI フレームワークをインストールします。

npm install element-ui --save

インストールが完了すると、Eleme UI フレームワークをプロジェクトに導入できます。

2. Vue での Element UI の使用

プロジェクトに Element UI フレームワークを導入するには、main.js に導入し、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')

Element UIを導入する前に、Element UIのCSSファイルを導入する必要があるので注意してください。上記のコードでは、import 'element-ui/lib/theme-chalk/index.css' を使用して CSS ファイルを導入しています。また、テンプレートで Element UI によって提供されるコンポーネントを使用する必要もあります。例:

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

ここでは、Element UI の Button コンポーネントが使用されます。必要に応じて、さらに多くのコンポーネントを使用できます。すべてのコンポーネントは、Element UI の公式ドキュメントに記載されています。

3. 要素 UI コンポーネントの使用

Button コンポーネント

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

Among type 属性はボタンのタイプです。

入力コンポーネント

Vue で入力コンポーネントを次のように使用します:

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

このうち、v-model は双方向バインディング データに使用されます。 、プレースホルダーは入力のプレースホルダー テキストを設定するために使用されます。

Radio コンポーネント

Vue で Radio コンポーネントを次のように使用します:

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

このうち、v-model は双方向バインディング データに使用されます。 、ラベルは現在選択されている値を記録するために使用されます。

Checkbox コンポーネント

Vue で Checkbox コンポーネントを使用するには、次のようにします。

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

その中で、el-checkbox-group は、複数のチェックボックスを結合するために使用されます。これを併用し、v-model を使用してデータを双方向にバインドします。各チェックボックス コンポーネントは、現在選択されている値を記録するためにラベル属性を設定する必要があります。

Select コンポーネント

Vue で Select コンポーネントを次のように使用します:

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

このうち、v-model は双方向バインディング データに使用されます。 、el-option コンポーネントは、各オプションとそれに対応する値を表すために使用されます。

上記は、Vue で使用される Element UI フレームワークの基本的な内容です。特定のニーズに応じて、さらに多くのコンポーネントやメソッドを使用できます。同時に、Element UI の公式 Web サイトでさらに多くのチュートリアルやドキュメントを参照することもできます。

以上がVueでのeleの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。