๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
JavaScript/Vue

Vue Instance Lifecycle

by ์ฝ”๋”ฉํ•˜๋Š” ๋ถ•์–ด 2022. 6. 5.
๋ฐ˜์‘ํ˜•

 

<!DOCTYPE html>
<head>
  <title>Vue Instance Lifecycle</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      },
      beforeCreate: function() {
        console.log("beforeCreate")
      },
      created: function() {
        console.log("created")
      },
      mounted: function() {
        console.log("mounted")
      },
      updated: function() {
        console.log("updated")
      },
    })
  </script>
</body>
</html>

 

 

 

 

- message ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜์—ˆ์„๋•Œ Lifecycle ์ˆœ์„œ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Vue Instance Lifecycle</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      },
      beforeCreate: function() {
        console.log("beforeCreate")
      },
      created: function() {
        console.log("created")
      },
      mounted: function() {
        console.log("mounted")
        this.message = "Hello Vue!" โ—€
      },
      updated: function() {
        console.log("updated")
      },
    })
  </script>
</body>
</html>

๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€

'JavaScript > Vue' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

์ธ์Šคํ„ด์Šค ์œ ํšจ ๋ฒ”์œ„์™€ ์ง€์—ญ ์ปดํฌ๋„ŒํŠธ, ์ „์—ญ ์ปดํฌ๋„ŒํŠธ ๊ฐ„ ๊ด€๊ณ„  (0) 2022.06.05
Component  (0) 2022.06.05
vue ๊ณต๋ถ€  (0) 2022.05.15
[Vue.js] <style scoped>  (0) 2022.01.04
[Vue.js] v-model  (0) 2021.12.28

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”