1. 程式人生 > >[Vue]實例化Vue時的兩種掛載方式el與$mount

[Vue]實例化Vue時的兩種掛載方式el與$mount

class message size obj new () ESS div clas

Vue 的$mount()為手動掛載,在項目中可用於延時掛載(例如在掛載之前要進行一些其他操作、判斷等),之後要手動掛載上。new Vue時,el和$mount並沒有本質上的不同。

1.el

Vue實例:

new Vue({
  el: ‘#app‘,
  data: obj
})

模板:

<div id="app">
  <p>{{ foo }}</p>
  <!-- 這裏的 `foo` 不會更新! -->
  <button v-on:click="foo = ‘baz‘">Change it</button>
</
div>

2.$mount

Vue實例:

const app = new Vue({
    router,
    i18n,
    ...App
}).$mount(‘#app‘)

模板:

<div id="app">
    <h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
</div>

[Vue]實例化Vue時的兩種掛載方式el與$mount