【触れて覚えるVueJS超入門】はじめの1歩!VueJSの基礎構文をマスターする!!【第2回】

今回は「テンプレート構文」と「Vue インスタンス」とは何かを紹介します!
この2つは、VueJSを使うための土台となる知識になります。

前半戦では、テンプレート構文をやっていきます。
後半戦では、 Vue インスタンスをやっていきます。

よく分からなくても「こういう決まりなんだな」くらいに思ってもらえればOKです。
まずは、触ってみることが大事(*゚▽゚)ノ

【触れて覚えるVueJS超入門】をすべて終えるころには、
・vue.js
・vuex
・vue loader
・vue cli

これらすべての基本をマスターして、あなたオリジナルのVueJSアプリが作れるようになります!

【触れて覚えるVueJS超入門】第2回の目標

  • VueJS の基本的な構文をマスターする
  • VueJS で自由自在にテキストを出力をする
  • VueJS には色んな処理が用意されているんだなと思いを馳せる

必要な知識

この記事を進めるために必要な知識です。

あとは、【触れて覚えるVueJS超入門】を第1回からやってると流れがつかみやすいです!
コードとかは結構使いまわしてるからね(・ω・`)

VueJS のテンプレート構文を理解する!【前半戦】

まずは、テンプレート構文とは何かを理解しましょう。

テンプレート構文は簡単に言うと HTML です。
正確には、通常の HTML に VueJS 専用の記述方法が追加されたものです。

下のコードは、テンプレート構文込みのHTMLです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XXXXX</title>
  </head>
  <body>

    <!-- ここがテンプレート構文 -->
    <div id="app">{{ message }}</div>

    <!-- Vue.jsの読み込み -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- Vueを記述したJSファイル -->
    <script src="./index.js"></script>

  </body>
</html>

二重中括弧 {{ }} でテキスト出力

先ほどの HTML で注目してほしいのが、

<div id="app">{{ message }}</div>

です。

VueJSでは、二重中波括弧{{ }}に変数を入れると変数の値が出力されます!

例えば、変数messageの値が、Hello!!! VueJS!!!!だとします。
これに VueJS の処理が加わると、

<div id="app">{{ message }}</div>

<div id="app">Hello!!! VueJS!!!!</div>

に変化します。

色んな構文を見てみる

二重中波括弧{{ }}以外にもたくさんの構文が用意されています。
その中でもよく使う構文を一部紹介しますね!

チラ見せレベルなので、
いろいろあるな~
くらいに思ってもらえれば!

<div id="app">

  <!-- テキスト出力 -->
  <p>{{ message }}</p>
  <p v-text="message"></p>

  <!-- HTML出力 -->
  <div v-html="`<p>HTML出力</p>`"></div>

  <!-- 分岐構文 -->
  <div v-if="条件式">trueの場合</div>
  <div v-else="">falseの場合</div>

  <!-- 繰り返し構文 -->
  <div v-for="item in items" :key="item"></div>

  <!-- クリックイベント -->
  <button type="button" @click="someMethod()"></button>

</div>

Vue インスタンスを理解する!【後半戦】

↓↓ が VueJS での最小限の記述。
※前回と同じコードです

new Vue({
  el: '#app',
  data() {
    return {
      message: 'ハロー!VueJS!'
    }
  },
});

これが参考書などでよく見かける Vue インスタンスと呼ばれているものです!
まぁ、普通にインスタンス化しているだけですねw
コンストラクタに実行したい処理をオブジェクト形式で書いていけばOKです。

VueJSを動かすには、Vue インスタンスを記述する必要があります。
この記述は「VueJSを使うよ~」とお知らせしていると考えると理解しやすいかも!


ちなみに、インスタンス化やコンストラクタと聞いてピンと来ない方は、Class構文について勉強しておくと理解しやすいと思います!
※一応、Class構文が分からなくてもVueJSを習得できるので安心してください^^ノ
class構文の使い方・書き方が分かるようになる方法!

コードの意味を読み解く

それでは、コードの意味を読み解きます。

new Vue(…);

上でも話しましたが、ここで「VueJSを使うよ!」と宣言をしています。
引数に処理を書いたオブジェクトを渡すことでVueJSを使うことが出来ます。

ちなみに、VueJSを読み込んでいない状態で、このコードを書くと
「Vue()が見つからないよ!」とブラウザに怒られるので注意してくださいね!
{
  el: '#app',
  data() {
    return {
      message: 'ハロー!VueJS!'
    }
  },
}

Vue インスタンスで渡している引数を1つずつ見ていきます。

{
  el: '#app',
}

elValue 値には、HTML要素の ID を書いてあげます。
指定した ID の配下にあるHTML要素がテンプレート構文として読み込まれます。

つまり、今回のコードだと ID がappの HTML 要素をテンプレート構文として扱います。

<div id="app">{{ message }}</div>
IDはどんな名前でもOK!
実装する場所によって分かりやすい名前を付けてね!
{
  data() {
    return {
      message: 'ハロー!VueJS!'
    }
  },
}

data()を書くと VueJS 内で使える変数を定義できます。
ここでは、messageハロー!VueJS!という文字列を格納しています。

イメージとしては、↓↓ と同じことをしています。

let message = 'ハロー!VueJS!'
すこし特殊な書き方に見えるけど、関数 data() の返り値をオブジェクトにしてるだけだね!

色んな機能を見てみる

Vue インスタンスには色んな機能が用意されています。
その中でも、よく使う機能をお見せしますね!

今後やっていく機能をチラ見せしているだけなので、
こんなのあるんだ~(棒
くらいに思っておけばOKです!

new Vue({
    // このコンポーネントの名前
    name: 'myComponent',
    props: {
      // 親コンポーネントからの変数を取得
      xxxxx: {
        type: Object,
        require: true
      }
    },
    data() {
      return {
        // 変数をオブジェクト形式で記述
        key: value,
      }
    },
    mounted() {
      // マウント後の処理
    },
    computed: {
      someCompute() {
        // 算出プロパティ
      }
    },
    methods: {
      someMethod() {
        // 処理を書く
      }
    },
    watch: {
      xxxxx: function(value) {
        // プロパティが変化したときの処理する
      }
    }
  })