vue.jsの練習①（公式チュートリアルstep-1～step-5）

Vue.jsが業務に必要なため、とりあえず公式チュートリアルを1から順番に行っていく
https://vuejs.org/tutorial/#step-1

まずは従来(Vue2)の型であるoptions & HTMLを用いて１周し、その後にComposition & SFC で２周目を行う予定

今回は、step-1からstep-5まで（内容は基礎的なファイル間の紐づけ等）

よく出てくる用語メモ

ディレクティブ：コンパイル時にコンパイラーに与える補足情報(v-on,v-bind等)
DOM イベント：Webにおいて発生した動作・出来事(Document Object Model（DOM）で定義されたEventinterfaceを実装するオブジェクトのこと)
コンポーネント：名前付きの再利用可能な Vue インスタンス

step-1　準備

<div id="app">
  <h1>Hello World!</h1>
</div>

step-2　宣言的レンダリング

<script type="module">
import { createApp } from 'vue'

createApp({
  data() {
    return {
      message: 'Hello World!',
      counter: {
        count: 0
      }
    }
  }
}).mount('#app')
<!-- mount('#app')で html側のdiv id="app"と紐づいている -->
</script>

<div id="app">
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
</div>

この時点では、countは変数ではない。
dataコンポーネントオプションを使用することでリアクティブ状態(変更されたときに更新をトリガーできる状態)を宣言できる。この際、dataはオブジェクトを返す関数である必要がある。

step-3　属性バインディング

<script type="module">
import { createApp } from 'vue'

createApp({
  data() {
    return {
      titleClass: 'title'
<!-- 'title'とcssの.titleが紐づいている -->
    }
  }
}).mount('#app')
</script>

<div id="app">
  <h1 :class="titleClass">Make me red</h1>
<!-- <h1 v-bind:class="titleClass">Make me red</h1> 上行と同義 -->
</div>

.title {
  color: red;
}

v-bindは専用の短縮構文があり、v-bindを記載しなくても同じ意味になる。
よく使われているので、覚えておく！

  <h1 :class="titleClass">Make me red</h1>
<!-- 上行と同義 -->
  <h1 v-bind:class="titleClass">Make me red</h1>

step-4　イベントリスナー

<script type="module">
import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  },
  methods: {
   increment() {
     this.count++
   } 
  }
}).mount('#app')
</script>

<div id="app">
  <button @click="increment">count is: {{ count }}</button>
</div>

v-onにも専用の短縮構文があり、v-on:の代わりに@を記載すると同じ意味になる。
v-bindと同様よく使われているので、覚えておく！

  <button v-on:click="increment">count is: {{ count }}</button>
<!-- 上行と同義 -->
  <button @click="increment">count is: {{ count }}</button>

step-5　フォームバインディング

v-bindとv-onを併用すると、フォーム入力要素に双方向のバインディングを作成できる。

<input :value="text" @input="onInput">

methods: {
  onInput(e) {
    this.text = e.target.value
  }
}

上記と同じ動きを以下の一文で書くことができる。v-modelを使うほうが簡潔で一般的

<input v-model="text">

v-modelはテキスト入力だけでなく、チェックボックス、ラジオボタン、選択ドロップダウンなどの他の入力タイプでも使用することが可能である。

一言感想

基本的な内容ではあったが、短縮構文は特に説明もなくよく使われているので確認しておいてよかったなと感じた。