プロジェクトによるWebアプリの作成手順をまとめました。

・Vue 2.6.14

前回

1. プロジェクトによるWebアプリの作成

プロジェクトによるWebアプリの作成手順は、次のとおりです。

(1) 「Vue.js 入門 (3) - プロジェクトの作成」と同様にプロジェクトの作成を行う。
(2) 「src/components/HelloWorld.vue」を次のように編集。

<!-- テンプレート -->
<template>
  <div>
    {{message}}
  </div>
</template>

<!-- スクリプト -->
<script>
export default {
  name: "HelloWorld",
  props: {
    message: String
  }
}
</script>

<!-- スタイル -->
<style>
div {
  color: #ff0000
}
</style>

◎ テンプレートの定義
テンプレートの定義は、<template></template>で囲みます。今回の中身は、message変数の表示のみです。

◎ スクリプトの定義
スクリプトの定義は、<script></script>で囲みます。以下の書式で、コンポーネントの名前とプロパティを定義します。

export default {
  name: コンポーネント名,
  props: {
    プロパティ名: 型,
        :
  },
}

◎ スタイルの定義
スタイルを指定します。今回はdivを赤くしてます。

(3) 「src/App.vue」を次のように編集。

<!-- テンプレート -->
<template>
  <div>
    <HelloWorld message="Hello Vue!"></HelloWorld>
  </div>
</template>

<!-- スクリプト -->
<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: "App",
  components: {
    HelloWorld
  }
}
</script>

<!-- スタイル -->
<style>
</style>

◎ テンプレートの定義
HelloWorldコンポーネントを1つ配置しています。属性messageに「Hello Vue!」を指定しています。

◎ スクリプトの定義
名前にApp、利用するコンポーネントにHelloWorldを指定しています。

◎ スタイルの定義
スタイルを指定します。今回は未指定です。

(4) プロジェクトフォルダ(hello_app)に移動し、以下のコマンドでプロジェクトを実行。

$ yarn serve

 ​(5) ブラウザで「http://localhost:8080/」を開く。
以下の画面が表示されます。

2. 親コンポーネントから子コンポーネントへの値渡し

親コンポーネントから子コンポーネントへの値渡しの例は、次のとおりです。

・HelloWorld.vue

<!-- テンプレート -->
<template>
  <div>
    {{message}}
  </div>
</template>

<!-- スクリプト -->
<script>
export default {
  name: "HelloWorld",
  props: {
    message: String
  }
}
</script>

<!-- スタイル -->
<style>
</style>

・App.vue

<!-- テンプレート -->
<template>
  <div>
    <HelloWorld v-bind:message="message"></HelloWorld>
    <button v-on:click="onClick">メッセージ入力</button>
  </div>
</template>

<!-- スクリプト -->
<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: "App",
  components: {
    HelloWorld
  },
  data: function() {
    return {
        message: "Hello Vue!"
    }
  },
  methods: {
    onClick: function() {
      this.message = prompt("メッセージ:")
    }
  },  
}
</script>

<!-- スタイル -->
<style>
</style>

◎ 親コンポーネントから子コンポーネントへの値渡し
親コンポーネントの処理での、子コンポーネントの属性の更新で、値を渡します。​

実行結果は、次のとおりです。

3. 子コンポーネントから親コンポーネントへの値渡し

子コンポーネントから親コンポーネントへの値渡しの例は、次のとおりです。

・HelloWorld.vue

<!-- テンプレート -->
<template>
  <div>
    <button v-on:click="onClick">メッセージ入力</button>
  </div>
</template>

<!-- スクリプト -->
<script>
export default {
  name: "HelloWorld",
  methods: {
    onClick: function() {
      var message = prompt("メッセージ:")
      this.$emit("result-event", message)
    }
  }
}
</script>

<!-- スタイル -->
<style>
</style>

・App.vue

<!-- テンプレート -->
<template>
  <div>
    <div>{{result}}</div>  
    <HelloWorld v-on:result-event="onResult"></HelloWorld>
  </div>
</template>

<!-- スクリプト -->
<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: "App",
  components: {
    HelloWorld
  },
  data: function() {
    return {
        result: "Hello Vue!"
    }
  },
  methods: {
    onResult: function(message) {
      this.result = message
    }
  },  
}
</script>

<!-- スタイル -->
<style>
</style>

◎ 子コンポーネントから親コンポーネントへの値渡し
子コンポーネントの処理での、$emit()の呼びだしで、値渡しを行います。$emit()は、そのコンポーネント自身のタグイベントを発生させます。

this.$emit(イベント, 引数,...)

<コンポーネント名 v-on:イベント=メソッド>​

実行結果は、次のとおりです。

次回