LoginSignup
86

More than 5 years have passed since last update.

VueCLIからVue.js入門 ②【トグル機能作成からVue.jsの基本的な機能を掴む】

Last updated at Posted at 2018-02-19

vue.001.jpeg

前回:VueCLIからVue.js入門①【VueCLIで出てくるファイルを概要図で理解】 - Qiita

さて前回Vueアプリケーションの雛形が出来ました。今回はトグル機能作成を通してVue.jsの基本的な機能をつかみます。こういう入門は基本Todoとか作るんですけど、今回はVue.jsの機能だけに集中したいので、実装は簡単だけどVue.jsの基本に触れるトグルをチョイスしました。

まずは準備、 HelloWorld.vueのいらない部分を削除します。

HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
</style>

こんな感じになってる。

スクリーンショット 2018-02-19 23.59.36.png

さて、上のコードをベースにここからVue.jsの機能に焦点を当てながらトグルを作っていきます。
今回解説するのは下記。

vue.010.jpeg

条件付きレンダリングで遊ぶ

画面に要素を表示するかどうかを簡単に実装します。トグルのメインの部分ですね。
これを作るには主に二つのVue.jsの機能を使います。順番に見ていきましょう。

dataメソッド

めっちゃ使う。まじで。HelloWorld.vueでいうと下記の部分。

HelloWorld.vue
data () {
  return {
    msg: 'Welcome to Your Vue.js App'
  }
}

これは、dataで持っているmsgの値を{{ msg }}で表示しています。例えば、'Welcome to Your Vue.js App''Hello Vue.js'にするとテキストが変わる。試して見てください。

例えば下記の様すると

HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
        <h2>{{ text }}</h2> <!--追加!!!!!!!-->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      text: 'Test data' //追加!!!!!!!
    }
  }
}
</script>

スクリーンショット 2018-02-20 00.10.36.png

'Test data'の文が入りました。dataの中で<template>内に渡したい値を定義して、{{ }}の中に入れて使います。dataでreturnしている値はデータバインディングされている為、データの値がjs等で書き換わったら自動的に画面の表示も変わります。便利なんです。もうjQueryの.text()とかいらない子です。

v-showディレクティブ

さて要素を表示するかどうかを決める条件付きレンダリングです。
使用例をみていきましょう。

HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2 v-show="showText">{{ text }}</h2> <!--編集!!!!!!-->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      text: 'Test data',
      showText: false  //追加!!!!!!
    }
  }
}
</script>

v-showディレクティブはタグの中にいれて書きます。上のコード内ではイコールでshowTextという変数をみてます。この変数の名前は任意ですが、これがfalseなら非表示、trueなら表示となります。

そいでこのshowTextはdataメソッドの中で定義されています。showText: falseの部分ですね。今回showTextはfalseなので、さきほど追加した'Test data'は画面では見えなくなっています。確認してみてください。

showText=true にして表示してみる

確認が終わったら、今度はshowText: falseshowText: trueにしてみましょう。'Test data'が表示されているはずです。Vue.jsにおいては表示するかしないかをこのように判定します。似たディレクティブでv-if(かなり使う)というものもありますので、調べてみてください。もうjQueryの.css({display: none})とかいらない子です。

これでdataメソッドとv-showディレクティブを使って要素を表示、非表示にするすべを身につけました。ここからクリックなどのイベントで表示を切り替える方法を学びます。

イベントハンドリングで遊ぶ

ボタンをクリックしたら表示、非表示が切り替わる仕組みを作りましょう。

v-onディレクティブと、methodsオブジェクト

早速使用例から

HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2 v-show="showText">{{ text }}</h2>
    <button v-on:click="toggle">toggle</button> <!--追加!!!!!!-->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      text: 'Test data',
      showText: false
    }
  },//こっから下追加!!!!!!!!
  methods: { 
    toggle: function () {
      this.showText = !this.showText
    }
  }
}
</script>

v-on:

buttonタグにv-on:clickというものがついてます。v-onでイベント発火時の JavaScript の実行が可能になります。clickしたら呼ばれる関数名をtoggleにしてます。これはmethodsオブジェクトの中で定義されています。適用する処理をテンプレートに宣言的に記述する為、非常にコードが見やすくなります。jQueryのクリックイベントをどこに書いたとか探さなくなります。

methods:

methodsオブジェクトの中に実行したい関数をガシガシ定義していきます。これをv-on:clickで読んだり、他の関数から叩いたりします。今回はshowTextのtrue/falseを入れ替えています。

thisについて

ちなみにdata内で定義した値はthis.showTextのようにthisを使って参照していきます。なのでアロー関数とか使うとVueで期待するthisとズレてしまいます。公式でもアロー関数は使用すべきじゃないよって言ってた。

さて、上のコードを確認するとこんなかんじ

showText = false

スクリーンショット 2018-02-20 00.51.04.png

showText = true

スクリーンショット 2018-02-20 00.51.11.png

これで簡単なトグルが実装できました。簡単な実装でしたが、Vue.jsの機能の大雑把な入門ができました。dataの値をデータバインディングしている為、jQueryでDOM操作する必要がなくなります。これがVue.jsの力です。時間があればv-modelディレクティブや v-forディレクティブあたりを抑えておけばいい感じです。

次回はついにコンポーネント分割。そして親子コンポーネント間のデータ受け渡しです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
86