Vue.js 初級編
Hello World
バインディング
データを DOM に結びつける
message というデータの内容を
HTML にバインディング
値を更新するときは？
$input.on('input', event => {
message = event.target.value
$output.text(message)
})今までのやり方
- イベントが走る
- データを更新
- 関連する DOM を更新
onInput (event) {
this.message
= event.target.value
}Vue のやり方
- イベントが走る
- データを更新
関連する DOM を更新
DOM の更新は Vue が勝手にやってくれるので、
データの更新だけに集中すれば良い！
属性のバインディング
v-bind
v-bind:属性名="JS のコード"<img v-bind:src="'img/ico-' + icon + '.png'">
<img :src="'img/ico-' + icon + '.png'">
src 属性に設定する例
省略記法「 : 」
<img v-bind:src="'img/ico-' + icon + '.png'">
JS の文字列 (クオートが必要)
Vue 上のデータ (クオートがない)
<img v-bind:src="'img/ico-' + icon + '.png'">
この中は JS なので文字列結合している
v-bind:class="{ selected: buttonSelected }"v-bind:style="{ fontSize: size + 'px' }"buttonSelected が true のとき selected クラスを付与
font-size を size + 'px' を設定
条件分岐
v-if / v-else / v-else-if / v-show
<div v-if="formType === 'checkbox'">
<input type="checkbox"> Checkbox
</div>
<div v-else-if="formType === 'radio'">
<input type="radio"> Radio
</div>
<div v-else>
<input type="text" placeholder="Text">
</div>formType = 'checkbox'
<div v-if="formType === 'checkbox'">
<input type="checkbox"> Checkbox
</div>
<div v-else-if="formType === 'radio'">
<input type="radio"> Radio
</div>
<div v-else>
<input type="text" placeholder="Text">
</div>formType = 'radio'
<div v-if="formType === 'checkbox'">
<input type="checkbox"> Checkbox
</div>
<div v-else-if="formType === 'radio'">
<input type="radio"> Radio
</div>
<div v-else>
<input type="text" placeholder="Text">
</div>formType = 'text'
v-if
v-show
DOM 自体を消す
display: none; をつける
ループ
v-for
<div id="app">
<p v-for="item in list">
{{ item }}
<p>
</div>new Vue({
el: '#app',
data: {
list: [
'Try basic tutorials',
'Read the docs',
'Create a simple application'
]
}
})v-for="(要素, 添字) in 配列"v-for="要素 in 配列"v-for="(要素, キー, 添字) in オブジェクト"イベントの監視
v-on
v-on:イベント名="行う処理"<input v-on:input="text = $event.target.value">
<input @input="onInput">
インラインに処理を書く ($event はイベントオブジェクト)
省略記法 「@」
<input v-on:input="onInput">
メソッドを渡す (メソッドの作り方は後で)
<button v-on:click="submit('clicked')">
メソッド呼び出し
<button v-on:click.stop="onClick"><a v-on:click.stop.prevent="navigate">
stopPropagation
組み合わせもできる
<form v-on:submit.prevent="submit">
preventDefault
モディファイア
<form v-on:submit.prevent="submit">
$form.on('submit', event => {
event.preventDefault()
vueInstance.submit(event)
})双方向バインディング
v-model
v-model="プロパティ"とするとフォームとプロパティの同期をしてくれる
データとメソッドの定義
new Vue({
el: '#app',
data: {
message: 'Hello World'
},
methods: {
update (message) {
this.message = message
this.log()
},
log () {
console.log('LOG: ' + this.message)
}
}
})data で初期データの指定
methods でメソッドの定義
this.xxx でアクセス
new Vue({
el: '#app',
methods: {
update (message) {
this.message = message
}
}
})data で初期化することは必須
初期化してないので
エラー！
演習
- タスクの一覧を見れる
- タスクの追加ができる
- タスクの完了状態を表示
- タスクの完了状態をトグルできる
Todo 管理アプリを作る
Vue.js 初級編
By katashin
