Vue.jsガイドを読んで理解したことのメモ。
Vue.jsとは
- 双方向データバインディングフレームワーク
- Viewレイヤーだけを焦点に充てている
- Angular.js や knockout.js をシンプルにしたもので、取っ掛かりやすい。
- それぞの要素はコンポーネントとして扱うことができ、大規模システム向けに抽象化して記載可能。
⃣# Vue インスタンス
- Vueインスタンス内のdataプロパティの中身が、外とやりとりされる。
⃣# Vue インスタンスのライフサイクル
- created
- beforeCompile
- compliled
- ready
- beforeDestroy
データバインディング構文
テキスト
{{ msg }}
{{* msg }} //不変のメッセージ展開
{{{ msg }}} // raw_htmlとしての展開(XSSなどの危険性あり)
フィルタ
{{ msg | filterA | filterB }}
ディレクティブの引数
コロン(:)でディレクティブに引数を付与できる。
<a v-on:click="doSomething">
クラス(スタイル)バインディング
条件に応じてclassにバインドする対象を切り替える。
<div v-bind:class="[classA, isB ? classB : '']">
同様にスタイルにもバインディング可能
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
条件付きレンダリング
v-if
ディレクティブで可能
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
複数タグに適応したい場合
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-show
ディレクティブも同様に表示を制御できるが、
こちらは常にレンダリングされ、display
CSSプロパティによって切り替えられる。
=> とても頻繁に表示を切り替える必要があるものであれば、v-show
のほうが向いている。
<h1 v-show="ok">Hello!</h1>
new Vue({
data: { ok : true }
})
リストレンダリング
v-for
でリスト要素を複数回レンダリングできる。
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
複数タグを繰り返したいときは同様にtemplate
タグを使う。
フォーム入力バインディング
v-model
を使用すると、双方向データバインディングが可能。
<span>Multiline message is:</span>
<p>{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines" ></textarea>
-
lazy
をつけると、通常はinput
イベンドごとに動悸するが、change
イベントで動悸するようになる。
コンポーネント
カスタムコンポーネントの定義
<div id="example">
<my-component></my-component>
</div>
Vue.component('my-component', {template: '<div>A custom component!!!</div>'})
var v = new Vue({
el: '#example'
})
コンポーネントはpropsを使用して親から引数を受け取る。
<child msg="hello!"></child>
Vue.component('child', {
props: ['msg'],
template: '<span>{{ msg }}</span>'
})
親->子へのバインディングは通常one-wayバインディング
算出プロパティの挙動
算出プロパティは、結果の値をキャッシュし、内部で管理している依存関係の値が更新されない限り、キャッシュした値が使用される。
以下の場合だと、exampleの値はキャッシュされるので、Date.now()の値が毎回計算されるわけではない。
var vm = new Vue({
data: {
msg: 'hi'
},
computed: {
example: function () {
return Date.now() + this.msg
}
}
})
これをキャッシュしたくない場合は、cache: false
をつければよい。
カスタムディレクティブ
自前でディレクティブを定義できる。bind
, update
, unbind
などのフック関数を使用して振る舞いを定義する。