Как использовать монтируется с VueJS 2.0

Question

new Vue({
  render: h => h(App),
}).$mount('#app')

Код выше vuejs .com 2.0 официальный ванильный шаблон. Теперь в документации по VueJS 2.0 говорится, что я могу использовать смонтированный следующим образом:

mounted: function () {
  this.$nextTick(function () {
      // do stuff with the DOM
  })
}

Как мне объединить эти два ингредиента в один рабочий салат?

Answer 1

mounted: function () {} - это функция в экземпляре жизненного цикла Vue. И $mount это функция для монтирования Vue экземпляра, например. new Vue()

Answer 2

ответ Skirtle работает безупречно:

new Vue({
  render: h => h(App),
  mounted: function () {
      // do stuff
  })
}
}).$mount('#app')

Answer 3

Это не те же "крепления":

1. $mount - это метод, с помощью которого вы можете добавить ваше приложение Vue в DOM.

Вот довольно хорошее описание: Разница между. $ Mount () и el [Vue JS]

new Vue({
  render: h => h(App),
}).$mount('#app')

2. mounted - это хук жизненного цикла в Vue

Это означает, что он вызывается, когда происходит определенное событие - в случае mounted компонента (или Vue экземпляр) монтируется на DOM.

mounted: function () {
  this.$nextTick(function () {
      // do stuff with the DOM
  })
}

Подробнее о крюках жизненного цикла: https://vuejs.org/v2/guide/instance.html#Lifecycle -Диаграмма

3. Вместе они могут выглядеть так:

new Vue({
  created: function() {
    console.log('created')
  },
  mounted: function() {
    console.log('mounted')
  },
}).$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Я отредактировал ваш код, поэтому он

• работает без рендеринга функции
• показывает mounted И created крючки жизненного цикла