Vue.js mounted

1 개요

Vue.js mounted

html

Copy

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

---

JavaScript

Copy

mounted() { ...  }
mounted: function () { ... }

JavaScript

Copy

<div id="app">
  <ul>
    <li v-for='todo in todos'>
      <span v-if='todo.completed'>✔️</span> {{ todo.title }}
    </li>
  </ul>
</div>

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/axios"></script>
<script>
new Vue({
  el: '#app',
  data: {
    todos: []
  },
  mounted() {
    axios.get('//jsonplaceholder.typicode.com/todos')
    .then((response) => {
      this.todos = response.data;
    })
  }
});
</script>

JavaScript

Copy

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

2 같이 보기

• Vue.js data
• Vue.js methods
• Vue.js created()
• Vue.js onMounted
• Vue.js beforeMount()
• Vue.js 수명주기
• jQuery .ready()

3 참고

• https://vuejs.org/v2/api/#mounted