Vue.js 入門 出力・ディレクティブ

はじめに

今回の記事はVue.jsの出力までの流れと最大の特徴であるディレクティブの説明をしていきます。私もVue.jsを学習してから2ヶ月半しかたっておらず、まだまだ未熟ですが、初学者の目線に立って丁寧に解説していきます。

まずは出力してみる

今回はJSFiddleを使い、セットアップなしで説明していきます。

html

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

js

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

簡単な出力までの流れを説明します。

1.Vueインスタンスを作成

js

new Vue({
・・・
})

2.elで指定したDOM要素にインスタンスを適用する

js

{
  el: '#app'
}

3.UIのdataを定義

js

 data: {
    message: 'hello Vue.js!'
  }

4.dataを展開する

html

{{ message }}

画面にHello Vue.js!と出たら成功です

ディレクティブ

HTML要素にv-から始まる属性名(ディレクティブ)を追加することでDOM操作を行います。これがかなり便利なので、実用例とともに紹介していきます。

v-on

v-on:イベント名="実行したい関数名"でイベントが発生した時、関数を呼ぶことができるものです。
checkboxがチェックされるというイベントが発生したら、alertが表示されるというプログラムを書いてみます。
※v-onは＠に省略可能

html

<div id="sample">
  <h2>v-if/v-show</h2>
  <input type="checkbox" @click="changed">
　　　<!-- v-on:click="changed"とも書ける　-->
</div>

js

new Vue({
  el: '#sample',
  data: {
    checked: true
  },
  methods: {
    changed (event) {
      alert("データが変更されました")
    }
  }
})

使い方

1.checkboxをclick(チェック)した時にchangedを呼び出す

html

<input type="checkbox" @click="changed">

2.changedメソッドが呼ばれalertが表示される

js

methods: {
  changed (event) {
    alert("データが変更されました")
  }
}

v-bind

特定の条件が成立する時、変数をHTMLに反映させ、classやstyleなどを変えたい！そんな時に使えるのがv-bindです。
checkboxがチェックされた時に色を変えるようなプログラムを書いてみましょう。
※v-bindは :に省略可能

html

<div id="sample">
  <h3>v-if/v-show</h3>
  <input type="checkbox" v-model="checked">
  <p :style="{ color:(checked ? '' : 'red') }">赤くなった</p>
<!-- v-bind:styleとも書ける　-->
</div>

js

new Vue({
  el: '#sample',
  data: {
    checked: false
  }
})

使い方

1.checkboxがチェックされcheckedのBoolean型のdataが変更される(false->true)
※v-modelの説明は後ほどいたします

js

data: {
  checked: false
}

2.checkedがtrueの時、文字列「赤くなった」のstyleが赤色に変更される

html

<p :style="{ color: (checked ? '' : 'red') }">赤くなった</p>

v-model

v-bind:valueとv-on:inputを一緒に記述するものになります。
実際にv-modelを使いクライアントが<input>タグの中に打ち込んだ文字列を出力させるプログラムを書いていきます。

html

<div id="sample">
  <h2>v-model</h2>
  <input type="string" v-model="message">
  <p>{{ message }}</p>
</div>

js

new Vue({
  el: '#sample',
  data: {
    message: ''
  }
})

使い方

1.messageが紐づけられた<input>タグ内にクライアントが文字列を打ち込む

html

<input type="string" v-model="message">

2.空のdataを用意したmessageに<input>タグ内に打ち込まれた文字列が更新される

js

data: {
  message: ''
}

3.更新されたdataが<p>タグの中に出力される。

html

<input type="string" v-model="message">
<p>{{ message }}</p>

v-if/v-show

要素の表示・非表示はv-if/v-showを使います。
ちなみにv-ifとv-showの使い分け方は公式サイト を参照していただければご理解いただけるかと思います。簡単にまとめると表示を切り替える回数が多いとv-show、そうでなければv-ifを使いましょうと説明されています。

以下公式サイトから引用

とても頻繁に何かを切り替える必要があれば v-show を選び、条件が実行時に変更することがほとんどない場合は、v-if を選びます

checkboxがチェックされたら表示、外されたら非表示にするプログラムを書いてみます。

html

<div id="sample">
  <h2>v-if/v-show</h2>
  <input type="checkbox" v-model="checked">
  <p v-if="checked">v-if属性</p>
  <p v-show="checked">v-show属性</p>
</div>

js

new Vue({
  el: '#sample',
  data: {
    checked: false
  }
})

使い方

1.checkedが紐付けされたcheckboxがチェックされる

html

<input type="checkbox" v-model="checked">

2.checkedのBoolean型のdataが変更される(false->true)

js

data: {
  checked: false
}

3.<p>タグのv-if/v-show="checked"ががtrueになったので<p>タグが出力される

html

<p v-if="checked">v-if属性</p>
<p v-show="checked">v-show属性</p>

一連の流れ

以上がディレクティブを使った実用例になります。まだまだ学ぶべきことは沢山あるのでどんどん記事書いていこうと思います!