猫本読みつつ簡易作成
DEMO
index.html
<html>
<head></head>
<body>
<div id="app">
<p>{{msg}}</p>
<button @click="sayHello">Hi!</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
index.js
new Vue({
el: "#app",
data: {
msg: "Hello"
},
methods: {
sayHello(){
this.msg = "World!"
}
},
mounted(){
//表示後にやりたいことを書く
}
})
基本構成
el:
mountする要素
data:
アプリケーションで使用するデータ
methods:
アプリケーションで使用するメソッド
mounted:
ライフサイクルフック
ライフサイクルフック
適切なタイミングでメソッドを呼び出すためにライフサイクルを把握する
| メソッド | タイミング |
|---|---|
| beforeCreate | インスタンスが作成され、リアクティブの初期化がされる前 |
| created | インスタンスが作成され、リアクティブの初期化がされた後 |
| beforeMount | インスタンスがマウントされる前 |
| mounted | インスタンスがマウントされた後 |
| beforeUpdate | データが変更され、DOMに適用される前 |
| updated | データが変更され、DOMに適用された後 |
| beforeDestroy | Vueインスタンスが破棄される前 |
| destroyed | Vueインスタンスが破棄された後 |
| errorCaptured | 任意の子孫コンポーネントからエラーが補足された時 |
書籍情報
mio, 基礎から学ぶ Vue.js
https://amzn.to/2GuqPKh
雑感
そういえばネイティブアプリにもライフサイクルあった。