Vue JS 学習記録01

表示確認
https://jsfiddle.net/

その場でjsコードを実行、動作テストできるツール
https://www.jsdelivr.com/

CDSの導入
https://jp.vuejs.org/v2/guide/installation.html#CDN

データバインディング
・属性にマスタッシュ構文は使えない
・属性にはvbindingを使う

データバインディング
<v-bind>
'''
[JS] var app = new Vue({
//options
el: '#app', //HTMLのIDに紐付ける
data: {
message: 'hello'
}
})

[HTML] NG

OK

'''

<v-if>
・要素の表示・非表示を切り替える
・DOMから要素をデータごと削除される
'''
[JS] var app = new Vue({
//options
el: '#app', //HTMLのIDに紐付ける
data: {
toggle: true ← falseに切り替えることでデータの表示・非表示を切り替える
}
})

[HTML]

aa

'''

<v-show>
・要素の表示・非表示を切り替える
・CssのdisplayプロパティでON/OFFにする
・v-ifと比べ描画コストを抑える観点で有利

'''
[JS] var app = new Vue({
//options
el: '#app', //HTMLのIDに紐付ける
data: {
toggle: true ← falseに切り替えることでデータの表示・非表示を切り替える
}
})

[HTML]

aa

'''

<v-for>
・要素を繰り返し実行出来る

'''
[JS] var app = new Vue({
//options
el: '#app', //HTMLのIDに紐付ける
data: {
user: {
firstName: 'akira',
lastName: 'mori',
age: '22'
}
}
})

[HTML]
  1. {{value}}

  1. {{key}}:{{value}}
[結果] akira
mori
22

firstName:akira
lastName:mori
age:22
'''

<v-on>
・イベント処理を制御

[HTML]

'''