Vue.jsのメモ
データの反映
作成されたVueインスタンスは、プロパティ値が変更されると、関連付いているメソッドの値も変更される。
// 定義
var data = { a: 1 }
var vm = new Vue({
data: data
})
// プロパティ操作
vm.a = 2
data.a // 2
プロパティ値を変更されたくない場合
以下を適用する。
Object.freeze(obj)
プロパティへのアクセス
接頭辞「＄」を使用して呼び出す事が可能。
var data = {'data' : 1}
var vm = ner Vue ({
el = $example,
data = data
})
// 呼び出す
vm.$data
vm.$el
ライフサイクルフック
インスタンス生成処理に、特定の処理を挟むことが出来る機能が、備わっている。
以下は、インスタンス生成後への処理追加方法。
new ({
data : {a:1},
created : function (){
console.log('インスタンス完了')
},
})
その他にも関数が用意されている。
★
テンプレート
HTMLパースを適切に行うために。
初歩
基本的には、Mustache構文を利用する。
特にプロパティを指定しない場合には、要素の操作で、データバインディング箇所は、可変式になっている。
//表示データが変わってもいい場合
<span> Message: {{ msg }} </span> // 画面上 -> Message: example!
vm.msg = 'change!' // 画面上 -> Message: change!
// 表示データを変えられたく無い場合
<span v-once> Message: {{ msg }} </span> // 画面上 -> Message: example!
vm.msg = 'change!' // 画面上 -> Message: example!
HTML要素の追加
Mustacheは、値をただの文字列としか認識しない。
そのため、v-htmlを使用して、HTML要素として認識させないといけない。
// 以下はHTMLタグが文字列として画面に出力
<div>太字にするつもり → {{ bold_chara }}</div>
// 以下であれば成功
<div>太字にするつもり → <div v-html="bold_chara"></div>
属性
Mustacheは属性値では使用できない。
代わりに、v-bindディレクティブを使用する。
<div v-bind:id="example"></div>
desable設定時は挙動が変わる。
以下は、値が存在する時には、ボタンが非活性にする記述。
var vm = new Vue ({
el :'#example',
data: {
example: 'desable',
}
})
<button id="example" v-bind:disabled="example">Button {{ example }}</button>
javascriptの処理を活用
バインディング内で、javascriptを利用できる。
{{ number + 1 }} // 定義した値に１を足す。文字列の場合には連結。
{{ ok ? 'YES' : 'NO' }} // 条件式
{{ message.split('').reverse().join('') }} // scriptを適用
適用されない記述方式もあるので、仕様を把握するのがよい。
三項演算子でしか適用されな等。
ディレクティブ
接頭辞「v-」で定義した箇所へ、動的な処理を施せる。
引数
引数を既述することにより、要素を動的に扱うことが出来る。
var vm = new Vue({
el: '#example',
data: {
bool: false,
url: 'http://',
},
methods: {
go:function(e){
alert('Hello ' + this.name + '!')
},
},
})
表示例。
<div id="example">
以下要素は表示されない
<p v-if="bool">Now you see me</p>
href属性にurl変数展開
<a v-bind:href="url"> ... </a>
go関数実行
<button v-on:click="go"> DODODO </button>
</div>
<p class="example" v-if="bool">Now you see me</p>
href属性にurl変数展開
<a class="example" v-bind:href="url"> ... </a>
動的引数
鉤括弧にて、動的引数を利用して、値の展開が可能。
var vm = new Vue({
el: '#example',
data: {
el: 'class',
clsnm : 'example',
},
})
<div id="example">
el変数展開、clsnm変数展開
<p v-bind:[el]="clsnm"></p>
イベントハンドラも動的記述可能
<a v-on:[eventName]="doSomething"> ... </a>
</div>
引数は、stringが扱われることを想定されている。
nullはバインディングを削除する場合に活用できる。
スペースや、引用符を既述すると、正しく動作しないので注意。
また、eventNameのようなキャメルケースは、ブラウザが全て小文字にするので注意。
省略記法
冗長さを避けたい人へ。
こちら
算出プロパティ
テンプレート内に、ロジックを埋め込めるのは便利だけど、保守、運用の観点から、あまり良く無いため、算出プロパティを利用する。
基本的な例
var vm = new Vue ({
el:'#example',
data:{msg : 'Hello'},
computed: {
joinStr: function(e){
return this.msg + 'World'
},
},
})
<div id="example">
出力 -> HelloWorld
<p>{{ joinStr }}</p>
</div>
プロパティ操作も適用される。
vm.msg = 'small' // 出力 -> smallWorld
算出プロパティとメソッドの違い
メソッド記法により、同様の結果を得られることは可能。
しかし、処理のパフォーマンスに違いが生まれる。
算出プロパティは、依存関係が変化しなければ、キャッシュされ続ける特質を持っている。
すなわち、プロパティの変更が行われなければ、再度計算を行われず、保持された値を返すのみなので、アプリケーション負荷が低くなる利点がある。
必要で無い限りは、算出プロパティの使用をこころがけよう。
要素のclassを動的に操作
利用者の操作によって、見た目を変えたい時の処理。
v-bind:classを使用する。
有効化したい場合は、
var vm = new Vue ({
el:'#example',
data: {
is_active: true,
is_a : false,
},
})
<div id="example" v-bind:class="{'active':is_active, 'cls_a':is_a}"></div>
↓
<div id="example" class="active"></div>
算出プロパティの利用も可能。
var vm = new Vue ({
el :'#example',
data: {
'el_activ': true,
'error': true,
},
computed: {
ExampleObj: function(){
return {
'active': this.el_activ,
'error_cls' : this.error,
}
}
}
})
<div id="example" v-bind:class="ExampleObj"></div>
↓
<div id="example" class="active error_cls"></div>
条件付きレンダリング
v-if
真偽値、条件結果を利用して、画面描写結果を変化させる。
要素自体を削除してくれるので、アクセス制限、表示制限等に利用すると良さそう。
入力項目の制御
input等に関しては、条件操作によって、要素の表示操作を行ったとしても、入力項目が切り替わらない場合がある。
その際には、一意の属性をもたせると良い。
<div v-if="login_type == 'usr_id'">
<input placeholder="username" key="username-input">
</div>
<div v-if="login_type == 'email'">
<input placeholder="mail addless" key="email-input">
</div>
v-show
display要素により、表示、非常時を切り替える。
template要素、v-else要素に対応していないので、注意する。
v-ifとv-else
特性を理解して、適切に扱う。
v-ifは、描画時に要素の操作を、スクリプトによってシステム的に処理するため、比較的、動作が遅くなる。
v-elseは、要素を非表示にするだけ。
入力項目等の、不正操作による、不具合、アプリケーションの脆弱性を緩和することができそう。
v-ifとv-for
同時に利用することは推奨されていない。
こちら
リストレンダリング
類似した形式の情報を一覧で表示する場合には、v-forが利用できる。
pythonのforと似ているの。
inの代わりにofを使用できる。
状態の維持
リストを並び替える処理を行った際に、情報が正しく保持されない場合がある。
例えば、インプットの値等。
適切に保持させるためには、key属性を適用するとよい。
<div v-for="item in items" v-bind:key="item.id"></div>
keyが必要のない場合には、付与しなくてもいいが、基本的には適用しておけば、不具合を回避できる。
リストの状態を操作する時
変更メソッドが用意されているので、適宜活用しよう。
注意点
Vueが検知できない場合がある。
- インデックスを利用した、直接な値操作
- vm.items[key] =
- 配列の長さの操作
- vm.items.length =
イベントハンドリング
v-on:の使用について。
イベント記述箇所
イベントを、DOMへ記述すると、コードが無駄に肥大化して良くない。
なので、methodへ追記するのが良い。
var example = new Vue({
el: '#example',
data: {
counter: 0
},
methods: {
countUp: function(e){
this.counter += 1
}
}
})
<div id="example">
<button v-on:click="countUp">１増やす</button>
<p>{{ counter }} </p>
</div>
その他おもしろ機能
イベント修飾子
使いこなせばきっと良いことがありそう。
キー修飾子
キーボードの入力で制御ができて良いことがありそう。
キーコードも使える。
システム修飾子キー
OSに備わっているキーで制御が出来て良いことがありそう
コンポーネントもろもろ
コンポーネント名登録時には、スタイルガイドを読んで、適切に適用しよう。
こちら
グローバル登録、ローカル登録
目的に沿って、記述しよう。
Vue.component('example', { ... })
var Component = { ... }
子コンポーネントのイベントを受け取る
親要素（親コンポーネント）の状態を、子要素（子コンポーネント）のアクションで操作する。
- $emitを利用して、アクションさせる、コンポーネントを指定。
<button v-on:click="$emit('exmaple-cmp')">PUSH</button>
- コンポーネントで呼び出したいメソッドを指定
<ex-component
...
v-on:exmaple-cmp="exampleMethod"
>
</ex-component>
- 定義したMethodが呼び出される
...
methods : {
exampleMethod : function(v){
console.log('Hello!!')
}
}
追記中
情報を集めているだんかい。
間違ってたらごめんなさい。