【Vue.js】ディレクティブとコンポーネントを学びながらJSの復習も

ディレクティブの例の続き

昨日に引き続きディレクティブの具体例をまとめていく。
この2つはボリュームが多かったので分けておいた。

v-on

ボタンなどを使ってイベントを作成する。
例えば時間を表示させてみる。
まずはHTMLファイルを用意。

<div id="app">
  <button v-on:click="onclick">
    今何時？
  </button>
  <p>{{ genzai }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

v-on:clickで「clickした時に"onclick"のメソッドを動かす」となる。
{{ genzai }}の部分にメソッドで取得した時間を表示させる。
続いてVue.jsの方を作っていく。

var vm = new Vue({
  el: '#vm',
  data: {
    genzai: ''
  },
  methods: {
    onclick: function() {
      this.genzai = new Date().toLocaleString();
    }
  }
})

表示させるdataオプションのgenzaiは最初は空にしておく。
続いて、時間を取得するためのmethodsオプションを記載。
html側で使った"onclick"というプロパティでfunctionを定義する。

JavaScriptで時間の取得

すっかり忘れていたのでメモ。

• Date()：現在の日時取得
• toLocaleString(locales, options)：取得した数字に基づいて数値の文字列を返す。

今回は日時を取得しているのでtoLocalStringでは日時が返される。
また、localesとoptionsを指定することで表示方法を変更することもできる。

var time = new Date()
document.write(time.toLocaleString());
=> 2019/5/2 14:00:00
document.write(time.toLocaleString("ja-JP-u-ca-japanese"));
=> 31/5/2 14:00:00  //Localeを日本の元号に
document.write(time.toLocaleString("ja-JP-u-ca-japanese", {hour12:true}));
=> 31/5/2 午後2:00:00  //optionで12時間表示に
document.write(time.toLocaleString("ja-JP-u-ca-japanese", {hour12:true, era:"long"}));
=> 平成31年5月2日 午後2:00:00  //時代の表示を変更

v-model

双方向でのデータ バインディングができる。
どういうことなのかは、実際に書いてみた方がわかりやすいのでコードから。

var vm = new Vue({
  el: '#vm',
  data: {
    comment: 'Hello Vue.js!'
  }
})

<div id="vm">
  <p>
    <input type="text" v-model="comment">
  </p>
  <p>
    <input type="text" v-model="comment">
  </p>
  <pre>{{ $data }}</pre>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

これで出来るのはこんな画面。

一番下の"message":"Hello Vue.js!"はdataの要素を表示している。
これで一番上のinputの値を変えると全ての"Hello Vue.js!"が変更される。
どういったデータのやり取りをされているかをまとめるとこうなる。

１と２が入れ替わっても同じことが出来る。
そのため、双方向データ バインディングという。

コンポーネント

コンポーネントを定義することで、同じ内容を繰り返し使いたい時に楽ができる。
Railsで言う所の部分テンプレートみたいな感じかな。
まずはVue.jsから。

Vue.component('hello-component', {
  template: '<p>Hello</p>'
})
var vm = new Vue({
	el: '#vm'
})

'hello-component'がコンポーネントの名前、テンプレートが繰り返し使いたい部分のHTMLになる。

<div>
  <hello-component></hello-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

これで、hello-componentの部分がテンプレートで定義したpタグに置き換わる。