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

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

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
    }
  ]
})

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

以上がVueを使って基本的なシステムを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。