vue中的el是指什麼簡寫-前端問答-PHP中文網

首頁

web前端

前端問答

vue中的el是指什麼簡寫

青灯夜游

Dec 13, 2022 pm 06:12 PM

vue vue.js vue3

在vue中，el是element的縮寫，可稱為掛載點。 el的作用是提供一個在頁面上已存在的DOM元素作為Vue實例的掛載目標，可以是CSS選擇器，也可以是一個HTMLElement實例；在實例掛載之後，元素可以用“vm.$el”訪問。

vue中的el是指什麼簡寫

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

el是element的縮寫，可稱為掛載點。原理來自於：MVC架構中，使用一個標籤當做容器包住一些標籤，使得標籤被重新渲染，同時保留一些必要的屬性。

每個vue2.0專案中我們都會看到入口檔案(即main.js)中，在產生根實例時會配置el屬性，而我們自己建立的元件中則無法配置該屬性，下面引用了官方文件中對el屬性的說明：

el

類型：string | Element

#限制：只在用 new 建立實例時生效。

詳細：

提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標。可以是 CSS 選擇器，也可以是一個 HTMLElement 實例。【相關推薦：vuejs影片教學、web前端開發】

#在實例掛載之後，元素可以用 vm.$el 訪問。

如果在實例化時有這個選項，實例會立即進入編譯過程，否則，需要明確呼叫 vm.$mount() 手動開啟編譯。

簡單來說el的作用就是顯示我們要將目前vue元件產生的實例插入到頁面的哪個元素中，el屬性的值可以是css選擇器的字串，或者直接就是對應的元素物件。並且只能在使用new生成實例時才能配置el屬性，而我們在組件中只是export一個配置對象，如果設定了el則會報錯。

// 错误使用方式，在组件中设置el
// 提示错误： [Vue warn]: option "el" can only be used during instance creation with the `new` keyword.
export default {
    el: '#app'
}
 
// 正确写法
var vm = new Vue({
    el: '#app'
})

登入後複製

我們再看看專案中的index.html。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>backstage</title>
  </head>
  <body>
    <!-- {el：&#39;#app&#39;} 即把这里的元素作为根实例的挂载对象 -->
    <div id="app"></div>
  </body>
</html>

登入後複製

列印vm.$el，會發現實例已經被掛載到el對於的元素中：

（學習影片分享： vuejs入門教學、程式設計基礎影片）

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1422

Laravel 教程

1316

PHP教程

1267

C# 教程

1239

Related knowledge

vue.js vs.反應：特定於項目的考慮因素 Apr 09, 2025 am 12:01 AM

Vue.js適合中小型項目和快速迭代，React適用於大型複雜應用。 1)Vue.js易於上手，適用於團隊經驗不足或項目規模較小的情況。 2)React的生態系統更豐富，適合有高性能需求和復雜功能需求的項目。

vue怎麼給按鈕添加函數 Apr 08, 2025 am 08:51 AM

可以通過以下步驟為 Vue 按鈕添加函數：將 HTML 模板中的按鈕綁定到一個方法。在 Vue 實例中定義該方法並編寫函數邏輯。

vue多頁面開發是啥意思 Apr 07, 2025 pm 11:57 PM

Vue 多頁面開發是一種使用 Vue.js 框架構建應用程序的方法，其中應用程序被劃分為獨立的頁面：代碼維護性：將應用程序拆分為多個頁面可以使代碼更易於管理和維護。模塊化：每個頁面都可以作為獨立的模塊，便於重用和替換。路由簡單：頁面之間的導航可以通過簡單的路由配置來管理。 SEO 優化：每個頁面都有自己的 URL，這有助於搜索引擎優化。

React與Vue：Netflix使用哪個框架？ Apr 14, 2025 am 12:19 AM

NetflixusesAcustomFrameworkcalled“ Gibbon” BuiltonReact，notReactorVuedIrectly.1）TeamSperience：selectBasedonFamiliarity.2）ProjectComplexity：vueforsimplerprojects：reactforforforproproject，reactforforforcompleplexones.3）cocatizationneedneeds：reactoffipicatizationneedneedneedneedneedneeds：reactoffersizationneedneedneedneedneeds：reactoffersizatization needefersmoreflexibleise.4）

vue的div怎麼跳轉 Apr 08, 2025 am 09:18 AM

Vue 中 div 元素跳轉的方法有兩種：使用 Vue Router，添加 router-link 組件。添加 @click 事件監聽器，調用 this.$router.push() 方法跳轉。

反應，vue和Netflix前端的未來 Apr 12, 2025 am 12:12 AM

Netflix主要使用React作為前端框架，輔以Vue用於特定功能。 1)React的組件化和虛擬DOM提升了Netflix應用的性能和開發效率。 2)Vue在Netflix的內部工具和小型項目中應用，其靈活性和易用性是關鍵。

vue怎麼a標籤跳轉 Apr 08, 2025 am 09:24 AM

實現 Vue 中 a 標籤跳轉的方法包括：HTML 模板中使用 a 標籤指定 href 屬性。使用 Vue 路由的 router-link 組件。使用 JavaScript 的 this.$router.push() 方法。可通過 query 參數傳遞參數，並在 router 選項中配置路由以進行動態跳轉。