ホームページ > 記事 > ウェブフロントエンド > Vueを使って基本的なシステムを構築する方法
フロントエンド テクノロジの急速な発展により、Vue.js は業界で広く使用される Javascript フレームワークになりました。これを使用して、複雑な単一ページの Web アプリケーションを構築できます。この記事では、Vueを使って基本的なシステムを構築する方法を紹介します。
まず、Vue をローカルにインストールする必要があります。公式 Vue.js ライブラリを直接ダウンロードすることも、npm を使用して次のようにインストールすることもできます:
npm install vue
Vue.js ライブラリを HTML ページに導入します:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue を使用できますCLI(コマンドラインインターフェース) 早速、新しいプロジェクトを構築してみましょう。ここでは、Vue CLI 3 を使用して新しいプロジェクトを作成します。
npm install -g @vue/cli vue create my-project
入力する必要がある一連の構成オプションがあります。選択後、新しい Vue プロジェクトを作成できます。
Vue は MVVM モードを採用しており、ビュー層とデータ層が分離されています。 Vue.js を使用すると、コンポーネントをすばやく作成できます。コンポーネントはデータのコンテナーに相当します。
コンポーネントの作成は非常に簡単で、コンポーネントを Vue インスタンスに登録し、必要なデータとメソッドを宣言するだけです。以下は、コンポーネントを作成する簡単な例です。
<div id="app"> <my-component></my-component> </div>
Vue.component('my-component', { data: function () { return { message: 'Hello Vue!' } }, template: '<div>{{ message }}</div>' }) new Vue({ el: '#app' })
上記のコードでは、Vue.component
メソッドを使用して、「my-component」という名前のコンポーネントを Vue インスタンスに登録しました。そのデータは、data
メソッドの message
属性から取得されます。
最後に、my-component
コンポーネントを Vue インスタンス内の指定された HTML 要素にマウントします。
Vue ではコンポーネント間の通信は比較的一般的な要件であり、コンポーネント間の通信方法について説明します。
Props は、データを子コンポーネントに渡す方法です。これにより、親コンポーネントがプロパティ バインディングを通じて子コンポーネントにデータを渡すことができます。
親コンポーネント テンプレート内:
<template> <child-component :message="messageFromParent"></child-component> </template> <script> export default { data() { return { messageFromParent: 'parent message' } } } </script>
子コンポーネント テンプレート内:
<template> <div>{{ message }}</div> </template> <script> export default { props: { message: String } } </script>
上記のコードでは、親コンポーネントを template## に作成しました。 # tag 「child-component」という名前の子コンポーネントで、
:message 属性を使用して messageFromParent という名前の文字列を渡します。
props は、現在のコンポーネントが受け取ることができるプロパティと型を定義するために使用されるオブジェクトです。この例では、子コンポーネントは
message 属性を 1 つだけ使用し、その型は
String です。
<template> <div @click="onChildClick">click me</div> </template> <script> export default { methods: { onChildClick() { this.$emit('child-click') } } } </script>親コンポーネント テンプレート内:
<template> <child-component @child-click="onChildClick"></child-component> </template> <script> export default { methods: { onChildClick() { console.log('child clicked') } } } </script>上記のコードでは、子コンポーネントの
@click は次のとおりです。監視対象のクリック イベントと「child-click」という名前のイベントが、
$emit メソッドを通じて親コンポーネントに発行されます。親コンポーネントの
は、
@child-click を使用してイベントをリッスンし、「onChildClick」メソッドがトリガーされると、制御を実行します。ステーションは「child clicked」を出力します。
npm install vue-router --saverouter.js ファイルにルーティング コンポーネントを作成します:
import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] })Use
Vue.use Vue Router をインストールし、ホームページと概要ページという 2 つのルートを定義し、
component 属性で各ルートに対応するコンポーネントを指定します。
import Vue from 'vue' import router from './router' import App from './App.vue' new Vue({ el: '#app', router, render: h => h(App) })5. まとめこの記事では、Vue を使用してルーティング コンポーネントを構築する方法を簡単に紹介しました。基本的なシステム。開始からコンポーネントの通信とルーティングまで、Vue のほんの一部に触れただけです。 Vue には強力な機能がたくさんありますので、この記事が初心者の方のお役に立てれば幸いです。
以上がVueを使って基本的なシステムを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。