Vue 的 el 選項是一個非常重要的概念。在 Vue 實例化時,我們可以通過傳遞一個選項對象來配置實例,其中 el 選項就是用來指定實例掛載的元素。例如:
var app = new Vue({ el: '#app', data: {...}, methods: {...} })
上述代碼中,我們將 el 設置為 #app,Vue 將會去查找 id 為 app 的元素,并將該元素作為 Vue 實例的根節點。此后,我們可以在應用程序代碼中使用 app 變量來訪問該實例,比如使用 app.data 來讀取實例中的 data 屬性。
當 el 設置為一個字符串時,Vue 會將其作為 CSS 選擇器,并在頁面中查找與該選擇器匹配的元素。除了使用字符串,我們還可以將 el 設置為一個 DOM 元素,該元素將被用作實例的根節點。例如:
var el = document.querySelector('#app') var app = new Vue({ el: el, data: {...}, methods: {...} })
此時,我們需要首先從 DOM 中獲取 #app 對應的元素,再將其作為 el 選項的值,最終實現實例掛載。
除此之外,Vue 實例化時可以將 el 選項設置為一個指向組件的 HTML 元素的 CSS 選擇器,實現組件的掛載。例如:
Vue.component('my-component', { // ... }) var app = new Vue({ el: '#app', components: { 'my-component': MyComponent } })
上述代碼中,我們先定義了一個名為 my-component 的組件,再將其注冊到 Vue 中。最后,我們在實例化時通過給 el 選項指定一個值為 #app,讓該組件掛載到頁面中 id 為 app 的元素上。
綜上所述,Vue 的 el 選項是非常靈活和重要的,可以幫助我們完成各種功能,包括實例掛載、組件掛載等等。使用時需要注意選擇器的正確性和元素的匹配情況,以達到最佳效果。
上一篇python 求水仙花
下一篇vue emit bus