Vue.jsことはじめ2
今日やったこと
学んだこと
結構番所に近いけどただ読むだけだと本当に覚えないなという印象
Viewインスタンスの作成
- VueのデザインはMVVMパターンから部分的に影響を受けているので慣例としてインスタンス名が
vm
になっている - Vueアプリケーションは
new Vue
で作成されたRoot Vue Instanceで構成される - Vueインスタンスが作成されると自身の
data
オブジェクトのすべてのプロパティをリアクティブシステムにつかえる data
のプロパティはインスタンスが作成された時に存在していた場合にのみリアクティブ
インスタンスライフサイクルフック
- Vueインスタンスは生成時に一連の初期化を行う
- データの監視のセットアップ テンプレートのコンパおる DOMへのインスタンスのマウント データが変化した時のDOMの更新
- ライフサイクルの特定の段階でユーザーが自身のコードを追加する、いくつかのライフサイクルフックと呼ばれる関数を実行する
- iOSでいう
viewDidLoad
みたいな感じかな created
mounted
updated
destroyed
- iOSでいう
テンプレート構文
展開
テキスト
最も基本的な形は二十中括弧をりお湯したテキスト展開
<span>Message: {{ msg }}</span>
生のHTML
v-html
ディレクティブを使うことで実際のHTMLを出力することも可能
<div v-html="rawHTML"></div>
var vm = new Vue({ el: '#app', data: { rawHtml: '<h1>hello</h1>', } });
XSS脆弱性を容易に引き起こすのでウェブサイトで動的に任意のHTMLを描画することは超危険
属性
HTMLの属性をデータバインディングするときはv-bind
を使う
<img v-bind:src="image"></img>
var vm = new Vue({ el: '#app', data: { image: 'http://img.allabout.co.jp/gm/article/7182/mainimg.jpg' } });
v-bind
は省略可能
<img :src="image"></img>
JavaScript式の使用
すべてのデータバインディング内部でJavaScriptを完全にサポートする
ディレクティブ
- ディレクティブは
v-
から始まる特別な属性。 - ディレクティブ属性値は単一のJavaScript式を期待する(
v-for
は例外) - ディレクティブの仕事は属性値の式が変化した時にリアクティブに副作用をDOMに適用すること
省略記法
v-bind
<a :href="url"></a>
v-on
<a @click="doSomething"></a>