在Vue.js中,$mount是一個(gè)非常重要的方法。通過該方法,我們可以將創(chuàng)建的Vue實(shí)例掛載到指定的DOM元素上,并啟動(dòng)渲染。
使用$mount方法之前,我們需要先創(chuàng)建一個(gè)Vue實(shí)例,如下所示:
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
在這個(gè)例子中,我們定義了一個(gè)Vue實(shí)例,并定義了一個(gè)數(shù)據(jù)屬性message,它的值為'Hello Vue!'。然后,我們通過el屬性指定了該實(shí)例要掛載的DOM元素的選擇器。這意味著,Vue實(shí)例將會(huì)將自己掛載到id為app的DOM元素上。
另一種使用$mount方法的方式是在創(chuàng)建Vue實(shí)例時(shí)不指定el屬性,而是在后面手動(dòng)調(diào)用$mount方法進(jìn)行掛載。如下所示:
var app = new Vue({
data: {
message: 'Hello Vue!'
}
})
app.$mount('#app')
在這個(gè)例子中,我們創(chuàng)建了一個(gè)Vue實(shí)例,但沒有指定要掛載到的DOM元素。然后,我們調(diào)用$mount方法,手動(dòng)將該實(shí)例掛載到id為app的DOM元素上。
需要注意的是,如果在創(chuàng)建Vue實(shí)例時(shí)指定了el屬性并將其掛載到了一個(gè)DOM元素上,那么在調(diào)用$mount方法時(shí)該實(shí)例將不再重新掛載,而是繼續(xù)掛載在之前指定的DOM元素上。因此,$mount方法常常用于動(dòng)態(tài)掛載Vue實(shí)例,如在Vue組件中創(chuàng)建子組件并手動(dòng)掛載等場(chǎng)景。