Vueの基本構成
new Vue({
el:"#app",//mountする要素
data:{//データ
num1:2,
num2:3
},
computed:{//算出プロパティ
calc(){
return this.num1 + this.num2
}
},
mounted(){//ライフサイクルフック系をいろいろ書く
},
methods:{//自由に作るメソッド
hogeMethod(){
}
}
})
ライフサイクルフック一覧
| メソッド名 | タイミング |
|---|---|
| beforeCreate | インスタンスが作成されて、リアクティブの初期化される前 |
| created | インスタンスが作成され、リアクティブの初期化がされた後 |
| beforeMount | インスタンスがマウントされる前 |
| mounted | インスタンスがマウントされた後 |
| beforeUpdate | DOMが再描画される前に呼ばれる |
| updated | DOMが再描画された後に呼ばれる |
| beforeDestroy | インスタンスが破棄される前に呼ばれる |
| destroyed | インスタンスが破棄された後 |
データバインディング
テキストのデータバインディング
index.html
<p>{{message}}</p>
data:{//データ
message:'Hello Vue.js'
},
属性のデータバインディング
ダメな例
<input type="text" value="{{message}}">
正しくはこっち
<input type="text" v-bind:value="message">
:valueと書いても良い
リストデータの表示と更新
まずは表示
main.js
data:{//データ
list:[
{name:"hogehoge1",mail:"hoge1@example.com"},
{name:"hogehoge2",mail:"hoge2@example.com"},
{name:"hogehoge3",mail:"hoge3@example.com"},
]
},
index.html
<ul>
<li v-for="item in list">{{item.name}}</li>
</ul>
リストの更新について
this.list = []//プロパティの更新なのでOK
this.list[0].name = 'hogehoge4' //プロパティの更新なのでOK
this.list[0] = 'hogehoge4' //配列要素の更新なのでNG
インデックス数値を使った配列要素の更新は検知できない
後から追加されたプロパティの更新も検知できない
インデクス数値を使った配列要素の更新は検知できないので
Vue.setメソッドを使用して明示的に更新する
this.$set(list,0, {name:'new hogehoge', mail:'hoge@example.com'})
第1引数が更新するデータ、第２引数がインデックスもしくはキー、第３引数が値