【Vue.js】インスタンスの生成、変数、関数の基本構文まとめ

こんにちは！CODE CLUB965のKです！

今回は、Vue.jsにおける基本的な構文をまとめておこうと思います。

これからVue.jsを学習する方や、まだ慣れていない方は参考にしてください。

今回の記事では、インスタンスの生成、変数、そして関数について書こうと思います。

次回の記事では、ディレクティブについて書こうと思います。

Vueインスタンスの生成

インスタンスを生成する場合「new Vue」を記述し、その中のel要素で、htmlファイルのどの部分を対象としてVueを使用するか定義します。

// html
<div id='app'>
 ・・・
</div>

// js
new Vue({
  el: '#app'
})

el は、「element」の略で、 el というオプションで指定した要素がVue.jsが作用を及ぼす範囲になります。

変数

data

Vueインスタンス内のdata要素に変数を定義します。
定義した変数はhtml側で「 {{ ×× }} 」をつけることで呼び出すせます。

// html
<div id='app'>
  <p>{{ message }}</p>
</div>

// js
new Vue({
  el: '#app',
  data: {
    message: 'Hello World !'
  }
})

上記のように記述することで画面上に「Hello World !」と表示することができます。

computed

Vueインスタンス内のcomputed要素に関数を定義することで、関数の戻り値を変数として利用することができます。

// html
<div id='app'>
  <p>{{ datetime }}</p>
</div>

// js
new Vue({
  el: '#app',
  computed: {
    datetime: function(){
      return new Date();
    }
  }
})

上記の例のように記述することで、new Date した日時を画面上に表示することができます。

関数

Vueインスタンス内のmethods要素に関数を定義します。
html側に関数名を記載することで呼び出して使用することができます。

<div id='app'>
  <p>{{ message }}</p>
  <button @click='methodName'>クリック</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello World !'
  },
  methods: {
    methodName: function(){
      // 処理を記述する
    }
  }
})

上記の例では、クリックというボタンを押すと「methodName」という関数の処理が実行されるという流れになります。

methodNameは適当な名前に変えて、methods要素内で関数処理を記述すればOKです。

@clickについては、次回のディレクティブの記事で説明したいと思います。

最後に

今回は、Vue.jsの基礎の基礎について簡単にまとめました。

ディレクティブについては次回の記事に書きたいと思いますが、今回の内容とディレクティブについてはおさえておきたい基礎知識なのでしっかり理解しておきましょう！

Vue.jsの記事は今後も書いていきたいと思います。

それでは、また！

Follow me!