Vue.js入門のサンプルコードのまとめ
- title: Vue.js入門: 基礎から実践アプリケーション開発まで
- author: 川口和也、喜多啓介、手島拓也、片山真也、野田陽平
Vue.jsの最新バージョンの導入は
<script src="https://cdn.jsdelivr.net/npm/vue"></script> を読み込むことでできる。
- dataプロパティ: データの値を変更が検知され自動で画面の更新が行われた
- question: app.jsの読み込みは{{ hoge }}の後に書かなければ表示されなかった。
- $watchメソッド
vm.$watch(function (){
//監視対象の値を返す関数
return hoge
}, function (quantity) {
//値が変わった場合に呼ばれるコールバック関数
hoge
})js側の処理
filters:{
フィルタ名 :function (value) {
// return
}
}html側の処理
{{ 値 : フィルタ名 }}js側の処理
computed:{ //関数として実装,参照時はプロパティとして機能
算出プロパティ名: function() {
//return ...
}
}html側の処理
<p v-if="引数">
//真なら表示、偽なら非表示
</p>
<p v-show="引数">
//真なら表示、偽なら非表示
</p>- v-if,v-showの使い分け: 頻繁に評価結果が変わるとき -> v-show
特定の条件が成立するとき、UIの見た目を変えたい -> v-bindディレクティブを使おう！
v-bind: 属性名="データを展開した属性値"style変更、class変更時のhtmlの例
//style
<div :style="プロパティ名"> </div>
//class
<p :class="{error: !canBuy}"> </p>リストレンダリングをしたい -> v-forディレクティブを使おう！
v-for="要素 in 配列"v-bind:key=〜で生成時に一意なキーを各要素に与えられる。 これは、Vue.jsのパフォーマンスとおの理由で与えられるもので必須である。
<ul>
<li v-for="item in arr" v-bind:key="item">{{item}}</li>
</ul>Vue.jsではv-onディレクティブを利用してイベントをハンドリングしてデータを変更します。
v-on: イベント名="式として実行したい属性値"使用例
<input type="number" v-on:change="item.quantity = $event.target.value" v-bind:value="item.quantity" min="0">
//v-on: を @ に置き代えれれるンゴ
<input type="number" @change="item.quantity = $event.target.value" v-bind:value="item.quantity" min="0">※省略記法はサーバサイドのテンプレートエンジンで扱う場合に不正な記述と見なされてエラーになる場合があります。
Vue.jsではv-modelを用いいることで双方向バインディングを実現することができる。
<input type="number" v-model="item.quantity" min="0">上記のように記述することで、v-on:inputと同じ振る舞いを実現できます。
Vueインスタンスには、生成から消滅までに到るまでのライフサイクルがある。
| フックの名前 | フックが呼ばれるタイミング |
|---|---|
| beforeCreate | インスタンスが生成され、データが初期化される前 |
| created | インスタンスが作成され、データが初期化された後 |
| beforeMount | インスタンスがDOM要素にマウントされる前 |
| beforeUpdate | データが変更され、DOMに適用される前 |
| updated | データが変更され、DOMに適用された後 |
| beforeDestroy | Vueインスタンスが破棄される前 |
| afterDestroy | Vueインスタンスが破棄された後 |
Vueインスタンスのメソッドは、データの変更やサーバーにHTTPリクエストを送る際に用いる。
methods: {
メソッド名: function() {
//処理
}
}定義されたメソッドはVueインスタンスのメソッドとして呼び出せます。 よくあるのは、v-onディレクティブの属性値にバインディングして、Viewのイベントが発生した時に呼び出す形です。
<button v-bind:disabled="!canBuy" v-on:click="doBuy">購入</button>
//v-onディレクティブの属性値には、メソッド名または式を指定できます。
<button v-bind:disabled="!canBuy" v-on:click="doBuy($event)">購入</button>Webフロントエンドの開発において、コンポーネントといったときはUIのモジュール化したものを総合的に指す
Vue.jsを用いる場合は、Vue.jsのコンポーネントを指すことが多い
呼び方は、Vueのコンポーネントと、UIのコンポーネントといって使い分けると良い
コンポーネントを使うと再利用性の向上・品質の向上・保守性の高まりという恩恵がある
Vue.components('list-item' ,{
template: '<li>foo</li>'
})定義の方法にはVue.component()を使ったカスタムタグ方式と、Vue.extend()を使ったサブコンストラクタ方式がある。
Vue.jsの各コンポーネントはそれぞれ独立したスコープをもつ
親コンポーネント -- props --> 子コンポーネント
親コンポーネント -- event --> 子コンポーネント
-
props
あらかじめ親でデータを定義しておき、テンプレート中で属性として子に渡す。
子はpropsオプションに{属性名: バリデーションなどのオプション}を定義しておきます。
バリデーションを指定しておくと、条件を満たさない場合はコンソール上に警告を発します。 -
event
子コンポーネントから親コンポーネントへの通信では、カスタムイベントを使用します。
Vueインスタンスには、以下のようなイベントのインターフェイスが実装されます。
| 用途 | インターフェイス |
|---|---|
| イベントのlisten | $on(eventName) |
| イベントのtrigger | $emit(eventName) |
コンポーネントの分割のベースとなる考え方として、AtomicDesinという設計手法が優秀.. (勉強しないと^^;)
Vue CLIをnpmからインストールしました。
単一ファイルコンポーネントとは?
Vue.jsのコンポーネントを単独のファイルとして作成する機能です。