$mount方法是Vue實例的一個鉤子函數,作用是將Vue實例和DOM元素進行綁定,以便實現Vue實例的掛載。
使用$mount()方法時需要注意,如果指定了 el 選項,則不需要使用 $mount() 來手動掛載實例,因為當 Vue 實例化時 Vue 會自動執行 $mount(el)
// 創建一個 Vue 實例 var vm = new Vue({ template: '{{ message }}', data: { message: 'Hello Vue!' } }) // 手動掛載 vm.$mount('#app')
如果在實例化 Vue 時,沒有 el 選項,此時 Vue 將處于“未掛載”狀態。可以使用 vm.$mount() 手動掛載。
// 創建一個 Vue 實例 var vm = new Vue({ template: '{{ message }}', data: { message: 'Hello Vue!' } }) // 手動掛載 vm.$mount() // 將掛載后的元素插入到指定節點下 document.getElementById('app').appendChild(vm.$el)
$mount() 方法還可以接收一個參數,用來指定掛載的元素,若不指定則默認掛載到 document.body 上。
// 創建一個 Vue 實例 var vm = new Vue({ template: '{{ message }}', data: { message: 'Hello Vue!' } }) // 手動掛載到指定元素上 vm.$mount('#app')