【超Vue.js】これがVue.jsの基礎、テンプレート構文だ【セクション2 】
はじめに
以下にUdemyの動画、超Vue.js2のメモを備忘録として書き連ねていきます。セクション毎に記事を分けます。
1. Vueの良いところ
簡単、柔軟、高性能
HTMLファイル内の一部にVueを取り入れる、一つのファイルをVueだけで作る、アプリ全てをVueにするSPA等もできる。
18. v-on使用時に、イベントオブジェクトを使ってイベントの情報を取得する
イベントオブジェクト...そのイベントの情報が入ったオブジェクト。イベントが発生した時にイベントに関する全ての情報が入ったオブジェクト。
ex.) マウスでクリック→マウスの位置が入っている＝イベントオブジェクト
マウスを文字の上に載せた時に、x軸とy軸の情報が入ってくる＝イベントオブジェクト
<p v-on:mousemove="changePosition(10, $event)">マウスを載せる</p> <p>{<200c>{x}}、{<200c>{y}}</p>
function(event)と引数を入れるだけで、イベントオブジェクトを取得できる。
changePosition: function(event) { this.x = event.clientX this.y = event.clientY }
19. v-onに指定しているメソッドに引数を持たせる
v-onで指定したメソッドに、引数を取る
以下は、ボタンを押すとカウントが３増える。
<button v-on:click="countUp(3)">カウントアップ</button> methods: { countUp: function(times) { this.number += 1 * times }
引数とイベントオブジェクトを両方取りたいとき
→＄イベントを使う。$イベントにイベントオブジェクトが入る。
<p v-on:mousemove="change(10, $event)">マウスを載せる</p> // divideNumberに10が、eventに$eventが入る change: function(divideNumber, event) { this.x = event.clientX / divideNumber; this.y = event.clientY / divideNumber; }
$イベント
<p v-on:mousemove="change(10, $event)">マウスを載せる</p> <p>{<200c>{x}}、{<200c>{y}}</p> methods: { countUp: function(times) { this.number += 1 * times }, change: function(divideNumber, event) { this.x = event.clientX / divideNumber; this.y = event.clientY / divideNumber; } }
20. stopと.preventという２つの例を見ながら、頻繁に行われる処理を簡略化したイベント修飾子を理解する
イベント修飾子
- stop...VueではstopPropagationを簡単に書ける
- prevent...preventDefaultを簡単に書いた
後ろに伝盤しない(stop)
<p v-on:mousemove="change(10, $event)">マウスを載せる<span v-on:mousemove="noEvent">反応しないで</span></p> <p>{<200c>{x}}、{<200c>{y}}</p> noEvent: function(event) { event.stopPropagation() }
以下は上と同じ処理
stopというイベント修飾子を使用している。
<p v-on:mousemove="change(10, $event)">マウスを載せる<span v-on:mousemove.stop>反応しないで</span></p>
<p>{{x}}、{{y}}</p>
aタグのdefaultの挙動を妨げる(prevent)
<a @click="noEvent" href="https://google.com">Google</a> noEvent: function(event) { event.preventDefault(); }
以下はpreventを使用している。
<a @click.prevent href="https://google.com">Google</a>
21. キー修飾子を使って、特定のキーボードを押した時にイベントを発火するようにする
キー修飾子
キーボードに対するDOMイベントのこと。 何かキーを離した瞬間にイベントが発生する(rでもpでもスペースでもEnterでも)
<input type="text" v-on:keyup="myAlert"> myAlert() { alert('アラート！'); }
上のやり方は不便。
→特定のキーボードだけイベント発火対象として認識させる。
<input type="text" v-on:keyup.enter="myAlert"> <input type="text" v-on:keyup.space="myAlert"> <input type="text" v-on:keyup.spaceenter="myAlert">
22. v-onディレクティブの引数を[ ]を使って動的に表現する
v-onの引数を動的に取る
v-bindと同じように[ ]を使う。
<div id="app"> <p>現在{<200c>{ number }}回</p> <button v-on:[event]="countUp">カウントアップ</button> </div> new Vue({ el: '#app', data: { number: 0, event: 'click' }, methods: { countUp: function() { this.number += 1 } } })
24. v-modelを使用して、双方向バインディングを作成する
* 双方向…データが双方向に
* バインディング...Vueインスタンスのdataと、ビュー画面に表示されている所が結合されている。
モデルのデータをテンプレートから変更できるようになる！
<div id="app"> <input type="text" v-model="message"> <p>{<200c>{ message }}</p> </div> new Vue({ el: '#app', data: { message: 'こんにちは' } })
25. computedプロパティを使って、動的なデータを表現する
computedプロパティ...動的なプロパティを使う時に用いるモノ。
データは動的なモノは表現できない。あくまで初期値を扱う。
→そこでcomputedを使い、動的なモノを表現する。
computedの中で関数(function)を書くこと
あくまでプロパティだからreturnする必要あり
以下で三項演算子を扱ってみた。counterプロパティのデータによって、表現を動的に変える
<div id="app"> <p>{<200c>{ counter }}</p> <button @click="counter += 1">+1</button> <p>{<200c>{ lessThanThree }}</p> </div> new Vue({ el: '#app', data: { counter: 0, }, computed: { lessThanThree: function() { return this.counter > 3 ? '3より上' : '3以下' } } })
26. computedとmethodの違いを理解し、算出プロパティのリアクティブな依存関係にもとづきキャッシュされるという性質を理解する
computedと同じことをmethodでも表現できるが、動的なプロパティを仕様する時は、computedプロパティを使うようにすること！
2つの違いは、いつ関数が実行されているか、それに注目する
{{ }}にメソッドを書いてしまうと、テンプレートが少しでも再描画された時に毎回メソッドが実行されてしまう。絶対使うな！
以下では、othercounterは本来関係ないのにメソッドが実行されてしまう。
<div id="app"> <p>{{ counter }}</p> <button @click="counter += 1">+1</button> <p>{{ otherCounter }}</p> <button @click="otherCounter += 1">別の+1</button> <p>{{ lessThanThree }}</p> <p>{{ lessThanThreeMethod() }}</p> </div> new Vue({ el: '#app', data: { counter: 0, otherCounter: 0 }, computed: { lessThanThree: function() { console.log('Computed'); return this.counter > 3 ? '3より上' : '3以下' } }, methods: { lessThanThreeMethod: function() { console.log('Method'); return this.counter > 3 ? '3より上' : '3以下' } } })
computedは依存関係に基づいてキャッシュされる。
→参照先this.counterの値が変わった時のみ、computedプロパティが実行されるようになっている。
27. ウォッチャを使って、データが変わった時に特定の処理をする
watch...特定のデータが変わった時に何か処理をする。counterが変わった時に処理をするみたいな。
computedとの比較
基本watchは使わない。
→watchは非同期の処理で使う。
- returnはあくまで同期処理として返すモノ。だからcomputedは非同期には使わない。
- 非同期処理にthisは使えない。
→変数にthisを入れて使う感じ
new Vue({ el: '#app', data: { counter: 0, otherCounter: 0 }, computed: { lessThanThree: function() { return this.counter > 3 ? '3より上' : '3以下' } }, watch: { counter: function() { var vm = this; setTimeout(function(){ vm.counter = 0 }, 3000) } } })
28. 丸カッコ( )は、二重中括弧とv-onディレクティブにおいて、いつ必要なのか
ココむずい！！
丸括弧()をつけるのかどうか
computed
→{{ }}の中では必ず付けない
メソッド
→{{ }}の中ではつける
@clickとかDOMイベントの中では、つける時も付けない時もある。
→この中ではあくまでJSの式を書いてる
29. クラスをデータにバインディング(紐付け)する方法その１。オブジェクトを渡し、真偽値を使って動的に適応させるクラスを切り替える
真偽値を使ってclass属性を動的に切り替える
<div id="app"> <p :class="{ red: true, 'bg-blue': false}">Hello</p> </div> .red { color: red; } .bg-blue { background-color: blue; }
クリックでbg-blueとかを動的に切り替え
<div id="app"> <p :class="{ red: isActive, 'bg-blue': !isActive }">Hello</p> <button @click="isActive = !isActive">切り替え</button> </div> new Vue({ el: '#app', data: { isActive: true } })
インラインをVueインスタンスに移す
<div id="app"> // classObjectにしてVueインスタンスに持たせる <p :class="classObject">Hello</p> <button @click="isActive = !isActive">切り替え</button> </div> new Vue({ el: '#app', data: { isActive: true }, computed: { classObject: function() { return { red: this.isActive, 'bg-blue': !this.isActive } } } })
30. クラスをデータにバインディングする方法その2。配列を使って、適応させたいクラスを並べる
配列を使って、動的にbg-blueを記述する
<h1 :class="[{red: isActive}, bg]">Hello</h1> new Vue({ el: '#app', data: { isActive: true, color: "red", bg: "bg-blue" }, computed: { classObject: function() { return { red: this.isActive, 'bg-blue': !this.isActive } } } })
31. スタイル属性を、オブジェクトを用いて動的にバインディングする
32章の書き方がオススメ
- オブジェクトで書く
- 配列で書く
<div id="app"> <p :style="{color: textColor, 'background-color': bgColor}">Hello</p> </div> new Vue({ el: '#app', data: { // v-modelを使用しているから、以下を変えるだけでスタイル属性が動的に切り替わる textColor: 'red', bgColor: 'blue' } })
32. スタイルオブジェクトをデータに書いて、コードを見やすくする
この書き方が推奨
<div id="app"> <p :style="styleObject">Hello</p> </div> new Vue({ el: '#app', data: { styleObject: { // v-model使ってるから、この中をいじるだけでおk color: 'red', 'background-color': 'blue' } } })
33. 複数のスタイルオブジェクトを配列構文を用いて適応させる
inlineスタイルのオブジェクトを配列構文で適応。
styleObjectが複数
→汎用的なモノと特有なモノ
<div id="app"> <p :style="[styleObject, baseStyles]">Hello</p> </div> new Vue({ el: '#app', data: { styleObject: { color: 'red', 'background-color': 'blue' }, baseStyles: { fontSize: '60px' } } })
