Vueを使って基本的なシステムを構築する方法

フロントエンド テクノロジの急速な発展により、Vue.js は業界で広く使用される Javascript フレームワークになりました。これを使用して、複雑な単一ページの Web アプリケーションを構築できます。この記事では、Vueを使って基本的なシステムを構築する方法を紹介します。

1. はじめに

まず、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 プロジェクトを作成できます。

2. コンポーネントの作成

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 要素にマウントします。

3. コンポーネント間の通信

Vue ではコンポーネント間の通信は比較的一般的な要件であり、コンポーネント間の通信方法について説明します。

3.1 Props

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 です。

3.2 イベント

イベントは、子コンポーネントが親コンポーネントと通信できるようにする方法です。これにより、子コンポーネントは、イベントを通じて何かが起こったことを親コンポーネントに通知できます。

子コンポーネント テンプレート内:

<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」を出力します。

4. ルーティング

Vue では、ルーティングは重要な概念です。これにより、異なる URL に基づいて異なるページにジャンプできるようになります。 Vue フレームワークは、Vue Router を使用してルーティング機能を実装します。

まず、プロジェクトに Vue Router をインストールする必要があります:

npm install vue-router --save

router.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 属性で各ルートに対応するコンポーネントを指定します。

最後に、ルーティング コンポーネントを Vue インスタンスに導入する必要があります:

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 サイトの他の関連記事を参照してください。