vue $el是什麼？有什麼用？

Vue $el是Vue實例的屬性，用來取得Vue實例所關聯的DOM元素。

在Vue中，我們透過Vue實例來操作資料並且實現模板渲染，但是Vue實例最終被渲染到頁面上的是與之關聯的DOM元素。 Vue $el屬性就是用來取得這個DOM元素的。

透過Vue $el屬性，我們可以取得到目前Vue實例關聯的DOM元素，然後就可以使用原生的DOM API對這個DOM元素進行操作。

舉個例子，假設我們有一個Vue實例，它的程式碼如下：

<div id="app">
  {{ message }}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello World!'
    }
  })
</script>

在這個例子中，我們定義了一個Vue實例，並將其關聯到了一個id為app的DOM元素上。我們可以透過Vue $el屬性來取得該DOM元素，然後透過原生JavaScript程式碼對其進行操作，例如：

var app = vm.$el;
app.style.color = 'red';

上面的程式碼將會將Vue實例渲染出來的DOM元素的字體顏色變成紅色。

要注意的是，在Vue實例的生命週期中，$el屬性並不是一直存在的。只有當Vue實例被渲染到頁面上之後，$el屬性才會被賦值為Vue實例所關聯的DOM元素。因此，我們只能在實例被mounted（掛載）之後才能存取$el屬性。在實例被銷毀之後，$el屬性也會自動銷毀。

綜上所述，Vue $el屬性是用來取得Vue實例所關聯的DOM元素的屬性，在Vue實例被mounted之後才能使用。透過$el屬性，我們可以直接操作關聯的DOM元素，實作一些原生JavaScript的功能。

以上是vue $el是什麼？有什麼用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！