🥒

N予備校１章終えた人向けVue入門2

2022/12/12に公開

Vue.js

tech

こちらの記事の続きです。

Step4 イベントリスナー

リンク

いままで皆さんは、フォームの値を取得したり、クリックイベントを設定するときに、htmlのタグにidやclassをつけて、document.getElementByIdなどで引っ張ってきて、それに対して.valueや.onclickを取得していました。これからは、その面倒とはおさらばできます。Vueの イベントリスナー はより直感的に、htmlタグに対して直接関数を指定できます。かなり楽になります。早速体験してみましょう。

<template>
  <div>button is clicked: {{ isButtonClicked }}</div>
  <button @click="clickButton">click me!</button>
</template>

<script>
export default {
  data() {
    return {
      isButtonClicked: false
    }
  },
  methods: {
    clickButton(){
      this.isButtonClicked = true;
    }
  }
}
</script>

実際にボタンをクリックしてみよう`。

Vueでは関数はすべてmethodsの中で定義します。data()で定義したisButtonClicked変数は関数の中でthis.isButtonClickedでアクセスできます。上のサンプルコードではclickButton関数が叩かれるとisButtonClickedがtrueになります。すると、<div>button is clicked: {{ isButtonClicked }}</div>がbutton is clicked: trueと表示されます。

定義した関数は、templateタグないで、clickイベントとして定義できます。clickイベントを定義したいタグ(buttonタグがほとんどだと思う)に対して@click="clickButton"のように、アットマーク(@)をclickの前につけて、methodsで定義した関数を代入してください。

ここまで理解できればチュートリアルの課題はとけるはずです。では挑戦してみましょう！

Step4は以上です。

Step5 フォームバインディング

リンク

フォームはここまでのstepの集大成的な知識が要求されます。ここがひとつ学習の峠(ハードルといってもいい)となります。せっかくなので、このstepを機に復習しましょう！また、このstepの最後にはv-modelという強力なものを習います。ぜひ使いこなせるようになりましょう！

では早速、つぎのVueのサンプルコードが何をしているのか考えてください。

ヒント

inputタグにvalueを指定すると、valueで指定した値がフォームに表示されます。@inputとはoninputイベントリスナーです。oninputイベントは文字を記入するたびに発火します。またevent.target.valueで入力文字を取得できます。placeholderは何も入力していないときに、デフォルトで表示する文章です。

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    onInput(e) {
      console.log(e.target.value)
      this.text = e.target.value
    }
  }
}
</script>

<template>
  <input :value="text" @input="onInput" placeholder="なにか入力してね">
  <p>{{ text }}</p>
</template>

実際に動かしてみましょう！

難しかったら、これまでのstepを何度か振り返ってみてください。

では、ここまでクリアした前提でv-modelを導入します。上のサンプルコードを分解してみると以下の要素があることがわかります。

data()でまずはtext変数を定義する。この変数がmethodsないから呼ばれて変更されると、templateの再描画(再レンダリング)が実行され、表示が更新される。
templateでinputタグのvalue属性に対してtext変数を埋め込む。
methodsにonInput関数を定義する。関数ではtext変数にフォームから渡される値(つまり、ユーザーが入力した値)を代入するだけの処理をしている。
templateでinputタグに対してoninputイベントリスナー(@input)を設定している。リスナーにはmethodsで定義したonInput関数を指定している。

このうち、2~4の作業はv-modelを使えば、Vueが勝手にうらでコードを生成してくれます。つまり僕らはdata()で変数を定義して、v-modelに変数を指定するだけでいいのです。

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    // いらない
    // onInput(e) {
    //   console.log(e.target.value)
    //   this.text = e.target.value
    // }
  }
}
</script>

<template>
  <!-- :value="text" @input="onInput" はいらない。v-modelがやってくれる -->
  <input v-model="text" placeholder="なにか入力してね">
  <p>{{ text }}</p>
</template>

では、これをチュートリアルで試してみましょう！チュートリアルのコードをv-modelで書き換えてみてください。

このstepは以上です。

また、ここまでできれば、自分で電卓などをつくってみることができます。

stackblitzにアカウントを登録して、Vue3を選択し、電卓アプリを作ってみましょう！

Step6 条件付きレンダリング

リンク

次は、条件付きレンダリングの話をします。templateのタグ内部で、ある条件をもとにhtmlタグを表示したり非表示にしたいときがあります。このような場合はv-ifを使うと便利です。以下のように、タグ対してv-ifをつけます。どのタグでも大丈夫です(この場合はdivタグにつけています)。

<template>
  <div>表示(デフォルト)</div>
  <div v-if="true">表示(v-if=true)</div>
  <div v-if="false">非表示(v-if=false)</div>
</template>

<script>
export default {};
</script>

ただ、これだけだと何が嬉しいのかわかりませんね。条件付きレンダリングは通常data()で定義したリアクティブな変数に対して使うことが多いです。

次のサンプルコードは、ボタンをクリックするたびに「こんにちは！世界」が表示されたり、非表示されたりします。

<template>
  <div>表示: {{ isShow }}</div>
  <div v-if="isShow">こんにちは！世界</div>
  <button @click="toggleIsShow">表示きりかえ</button>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    toggleIsShow() {
      this.isShow = !this.isShow; // trueならfalseに、falseならtrueにする。
    },
  },
};
</script>

ではチュートリアルをやってみましょう！h1タグに対してv-ifもしくはv-elseをつけて、変数awesomeがtrueのときは「Vue is awesome!」、falseのときは「Oh no 😢」が表示されるようにしてください。

step6は以上です。

長くなったので、記事を分割します。

つづき

Step4 イベントリスナー

Step5 フォームバインディング

Step6 条件付きレンダリング

Discussion