ホームページ >ウェブフロントエンド >フロントエンドQ&A >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 コンポーネントの使用
<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 属性はボタンのタイプです。
<el-input v-model="inputValue" placeholder="请输入内容" style="width: 200px;"></el-input>このうち、v-model は双方向バインディング データに使用されます。 、プレースホルダーは入力のプレースホルダー テキストを設定するために使用されます。
<el-radio v-model="radio" label="1">备选项1</el-radio> <el-radio v-model="radio" label="2">备选项2</el-radio>このうち、v-model は双方向バインディング データに使用されます。 、ラベルは現在選択されている値を記録するために使用されます。
<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 を使用してデータを双方向にバインドします。各チェックボックス コンポーネントは、現在選択されている値を記録するためにラベル属性を設定する必要があります。
<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 サイトの他の関連記事を参照してください。