開発日報

窓際エンジニアの開発備忘。日報は嘘です。

vuejsの基礎まとめ [chapter2]

こちらのサイトからサンプルコードをダウンロードできます。
↑のサンプルに簡易的な説明を付与する形でまとめさせていただきます。

Chapter 2 Vuejsの基本

2.3 Vueオブジェクト

2.3.1 コンストラク

以下の構文でコンストラクタを使用し、Vueインスタンスを生成.
elオプションでマウントするDOM要素を指定.

2-2

new Vue ({
  el: '#app'
  // ...
})

2.5 UIのデータ定義

Vueインスタンス生成時にdataプロパティを渡して、UIに表示するデータを渡しましょう。

2-2

2.5.1 vueインスタンスの確認

chrome dev toolsの「console」でjavascriptを実行できるのでやってみよう。

2-5

console.log(vm)
console.log(vm.items)

2.5.2 データの変更を検知する

vuejsではデータの変更を検知して自動で画面に反映してくれる。
試しにdevtoolのconsoleで以下を実施してみよう。

2-7

vm.items[0].name = '万年筆'
vm.items[0].quantity = 2

2.6 テンプレート構文

データとビューを紐づける構文。主に以下2つ。  

  • Mustache記法 : {{}} を使った記法
  • ディレクティブ : htmlに付与する独自の属性(2.9参照)

2.6.1 テキストへの展開

Mustache記法はデータの変更が自動でビューに適用されます。

2-7

試しにdevtoolのconsoleで以下を実施してみよう。

vm.items[0].name = '万年筆'
vm.items[0].quantity = 2

2.6.2 属性値の展開

v-bind構文でvueインスタンスの属性をDOMに展開できる。

v-bind:html属性名="データを展開した属性値"

2-11

2.6.3 JavaScript式の展開

Mustache記法は以下のように式もかける

<p>{{ items[0].price * items[0].quantity}}</p>

2-7 あたりに↑を追記してみましょう

そんでもってdev toolのconsoleで以下を実行しましょう

vm.items[0].quantity = 2

2.7 フィルタ

汎用的なテキストフォーマット処理を適用できる。

filters {
  フィルタ名 : function (value) {
    // return ...
  }
}
{{ 値 | フィルタ名}}

2-7

2.8 算出プロパティ(computed)

detaに処理を加えたものを変数として使いたい場合に使用。

computed: {
  プロパティ名 : function (value) {
    // return ...
  }
}

2-8

chrome devtoolで以下を
vm.items[0].quantity = 2

2.8.1 thisによる参照

thisはVueインスタンス自身をさす

2-8

2.9 ディレクティブ

vue独自のhtml属性

2.9.1 条件付きレンダリング(v-if/v-show)

  • v-show(v-if) : 表示非表示の制御

2-9-1

2.9.2 クラスとスタイルのバインディング

  • v-bind:class
  • c-bind:style

v-bindには省略記法がある。以下は同じ意味・

v-bind:disabled
:disabled

2-9-3

2.9.3 リストレンダリング(v-for)

v-for : 繰り返しレンダリング

2.9.3

2.9.4 イベントハンドリング(v-on)

v-on:イベント名="式として実行したい属性値"

<div id="payappa">
  <p> {{ counter }} 才です</p>
  <button v-on:click="counter += 1">カウント</button>
</div>

var payappa = new Vue({
  el: '#payappa',
  data: {
    counter: 3
  }
})

2-9-5

2.9.5 フォーム入力バインディング

v-onはイベント発生しに処理を実行するのに対し、
v-modelは入力値を直接変数に紐づけることができる。

2-9-4

2-10 ライフサイクルフック

Vueインスタンスのライフサイクルの各フェーズに実行する処理を指定することができる

2-10

2-11 メソッド(method)

Vueインスタンスのメソッド。

2-11

2.11.1 イベントオブジェクト

https://v1-jp.vuejs.org/guide/events.html

methods: {
  メソッド名: function(event) {
    //
  }
}