Vue.jsに関する個人的な備忘録です
一つの記事にまとめるほどじゃない情報等をまとめていきます。
もしかしたら切り出して別途記事にするかもしれませんが。
Vue.jsの思想・特徴
- データ駆動(データドリブン)、リアクティブプログラミング
- コンポーネント志向(HTML/CSS/JSを部品単位で扱う)
- Atomic Design
- MVVMパターン(Model-View-ViewModel)
- 仮想DOM
- テンプレート構文(複雑な処理を書きたい場合は描画関数やJSXで実装することが公式でおすすめされていました)
- Scoped CSS(CSS in JSでも記載できるみたいです(Vueで使えるCSS in JSを調べてみた))
- vue自体はコア機能のみ
コーディング規約
- templateの中はチェインケース
- scriptの中はアッパーキャメルケース
vueファイル
ディレクトリパスの@
- @/folder : アットマーク1つはソースディレクトリのルートを示す
- @@/folder : アットマーク2つはプロジェクトディレクトリのルートを示す
export
vueの機能ではないですが、importで呼び出すために利用します
export
main.js
- vueを動かす起点となる
- mainクラスみたいなもの
vueのインスタンス
main.js内で new Vue({}) して定義する
new Vue({
el: "#app",
data : {},
computed : {},
watch : {},
// ライフサイクルフック
created : function() {}
})
el
vueを描画するLocatorの定義
data
ページ内で保持するデータの定義
watch
dataで定義したデータの監視とイベントハンドリングの定義
watch : {
testData : {
handler : function(newData, oldData) {},
deep: true // ネストされているデータの監視オプション
}
}
ライフサイクルフック
Vue インスタンスは、生成時に一連の初期化を実施。その初期化の過程で、特定の段階でユーザー自身のコードを追加するいくつかのライフサイクルフックが用意されている
create
インスタンス生成後に発火
算出プロパティ (computed property)
複雑な計算はtemplateではなく、computedプロパティに切り出してロジックを記載することで
可視化・保守性を向上する。
定義方法が違うだけで使い方はデータと一緒。
computed: {
computedData: function() {
return this.testData -1
}
}
プラグインの読み込み
プラグイン
main.js内で new Vue()するまえに定義する必要あり
Vue.use()というグローバルメソッドを呼び出し定義する。
App.vue
- 親となるコンポーネント
- App.vueとすることがお作法？
Vue.config.productionTip
trueで開発者向けのメッセージがコンソール出る
< router-view / >
routerで紐づいたtemplateを表示する個所を指定する
基本的な描画ルール(HTML)について
リストの描画(v-for v-bind)
リストレンダリング
item in items で定義
<div class="message" v-for="(message, index) in messages" v-bind:key="index">
v-bind-keyは必須
フォーム入力バインディング(v-model)
<input v-model="searchText">
上下ともに同じ内容を示す
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
form の input 要素 や textarea 要素、 select 要素に双方向 (two-way) データバインディングを作成することができる
データバインディング
”Mustache” 構文(2 重中括弧)を使用したテキスト展開が可能
<span>Message: {{ msg }}</span>
vue-cli
コマンドラインでvueのプロジェクトを生成する
vue-cliを使ってプロジェクトを作成し起動するまでの手順
Vuex
Stateパターンとその他機能を実現するライブラリ
その他
仮想DOM
- DOM全体を操作するJQueryとは異なる思想
- 仮想DOMを生成し変更前との差分を更新していく:diff/patch
イベント定義
- @ submitのように@ を着けることでイベント定義可能
- v-on でも定義可能
DOMの参照(Locatorの定義)
ref 属性を使って参照するための名前をタグに付けておくと、その DOM に直接アクセス可能
<input type="text" ref="comment">
ref 属性で名前を付けたタグは、メソッド内から次のように使用可能
this.$refs.comment.value
参照ページ
vueの思想・特徴
他のフレームワークとの比較
描画関数とJSX
Vueで使えるCSS in JSを調べてみた
算出プロパティとウォッチャ