超便利！Vue.jsのコア関数

関数とは

関数とは特定のデータを受け取り、定められた処理を実行し、その結果を反す命令のことです。

Vue.js ではコンポーネントに記載して、より大きな再利用可能機能を作成する際に重宝するはずです。

関数定義

前回、 Vue.js の標準出力で HelloWorld の出力してみましたが、今回は関数を使って HelloWorld を出力してみます。
百聞は一見にしかず、以下にコードを記載します。

<html>
  <head>
    <title>関数</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <div id="app">
    <body>
      <div id="vue\_det" style="text-align: center">
        <h1>{{ greeting() }}</h1>
      </div>
    </body>
  </div>
</html>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        message: "Hello World",
      };
    },
    methods: {
      greeting: function () {
        return this.message;
      },
    },
  }).mount("#app");
</script>

以上のコードを HTML ファイルで保存して、プラウザで確認してみましょう。
以下が表示されたら成功です。

少しずつ解説します。

<h1>{{ greeting() }}</h1>

前回 Vue.js で定義したデータを以下のようなコードで出力していたと思います。

<h1>{{ message }}</h1>

今回のコードは Vue.js を定義した関数を実行するコードです。
関数名+()でその関数を実行し、結果を受け取ることができます。
次に以下のコードを見てみましょう。

methods: {
　 greeting: function () {
　　 return this.message
   }
}

Vue.js は関数を使用する際に methods オブジェクトに作成します。
今回は挨拶をする関数を作成するため、greeting という名前で関数を作成しています。
その後 return 文で Vue.js に定義している変数 message を返しています。
Vue.js で定義している変数を参照するには、this キーワードを付けなければいけません。
図解すると以下のような感じです。

methods: {
　関数名: function () {
　　 return 返したいデータ
  }
}

終わりに

少し難しいかと思いますが、少しずつ覚えていきましょう。
コードは以下からダウンロードできます
https://github.com/wiblok/Vue.js

超便利！Vue.jsのコア関数

関数とは #

関数定義 #

終わりに #

関数とは

関数定義

終わりに