「Javascript/nuxtjs/helloworld」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→ライフサイクル) |
(→ライフサイクル) |
||
行46: | 行46: | ||
==ライフサイクル== | ==ライフサイクル== | ||
− | beforeCreate, created | + | 以下順番で呼ばれる |
+ | #beforeCreate, | ||
+ | #created | ||
+ | #beforeMount | ||
+ | #mouted | ||
+ | #beforeUpdate | ||
+ | #updated | ||
+ | #beforeDestroy | ||
+ | #destroyed | ||
参考:https://jp.vuejs.org/v2/guide/instance.html#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0 | 参考:https://jp.vuejs.org/v2/guide/instance.html#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0 |
2021年6月9日 (水) 18:11時点における版
pages/index.vue
<template> <div id="app"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'app', data() { return { msg: 'Welcome to App' } }, mounted() { // インスタンスがマウントされた直後に実行 } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; }
実行
$ yarn dev
ライフサイクル
以下順番で呼ばれる
- beforeCreate,
- created
- beforeMount
- mouted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
参考
Javascript/vue/node/helloworld [ショートカット]