Vue的實例

Every Vue application starts with a single Vue component instance as the application root. Any other Vue component created in the same application needs to be nested inside this root component.

每個 Vue 應用都以一個 Vue 組件實例作為應用的根開始。在同一個應用中創建的任何其他 Vue 組件都需要嵌套在這個根組件內部。

In Vue 2, Vue exposes a?Vue?class (or JavaScript function) for you to create a Vue component instance based on a set of configuration options, using the following?syntax:

在 Vue 2 中,Vue 暴露了一個 Vue 類(或 JavaScript 函數),你可以基于一組配置選項使用以下語法創建一個 Vue 組件實例:

const App = {//component's options
}
const app = new Vue(App)

Vue?receives a component, or the component’s configuration to be more precise. A component’s configuration is an?Object?containing all the component’s initial configuration options. We call the structure of this argument?Options API, which is another of Vue’s core APIs.

Vue 接收一個組件,或者更準確地說,是接收一個組件的配置。組件的配置是一個 Object,包含組件的所有初始配置選項。我們稱這個參數的結構為 Options API,這是 Vue 的另一個核心 API。

Beginning with Vue 3, you can no longer call?new Vue()?directly. Instead, you create the application instance using the?createApp()?method from the?vue?package. This change in functionality enhances the isolation of each Vue instance created both on dependencies and shared components (if any) and the code readability:

從 Vue 3 開始,你不能再直接調用 new Vue()。相反,你需要使用 vue 包中的 createApp() 方法來創建應用實例。這一功能的改變增強了每個 Vue 實例在依賴和共享組件(如果有)方面的隔離性,并提高了代碼的可讀性:

import { createApp } from 'vue'const App = {//component's options
}const app = createApp(App)

createApp()?also accepts an?Object?of the component’s configurations. Based on these configurations, Vue creates a Vue component instance as its application root?app. Then you need to mount the root component?app?to the desired HTML element using the?app.mount()?method, as follows:

createApp() 同樣接受一個包含組件配置的 Object。根據這些配置,Vue 會創建一個以應用根 app 為形式的 Vue 組件實例。然后,你需要使用 app.mount() 方法將根組件 app 掛載到指定的 HTML 元素上,如下所示:

app.mount('#app')

#app?is the unique id selector for the application’s root element. The Vue engine queries for the element using this id, mounts the app instance to it, then renders the application in the browser.

#app 是應用程序根元素的唯一 id 選擇器。Vue 引擎使用這個 id 查找元素,將應用實例掛載到該元素上,然后在瀏覽器中渲染應用程序。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/73510.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/73510.shtml
英文地址,請注明出處:http://en.pswp.cn/web/73510.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Linux學習筆記(應用篇三)

基于I.MX6ULL-MINI開發板 LED學習GPIO應用編程輸入設備 開發板中所有的設備(對象)都會在/sys/devices 體現出來,是 sysfs 文件系統中最重要的目錄結構 /sys下的子目錄說明/sys/devices這是系統中所有設備存放的目錄,也就是系統中…

【圖論】網絡流算法入門

(決定狠狠加訓圖論了,從一直想學但沒啟動的網絡流算法開始。) 網絡流問題 ? 問題定義:在帶權有向圖 G ( V , E ) G(V, E) G(V,E) 中,每條邊 e ( u , v ) e(u, v) e(u,v) 有容量 c ( u , v ) c(u, v) c(u,v)&am…

遞歸、搜索與回溯第四講:floodfill算法

遞歸、搜索與回溯第四講:floodfill算法 1.Floodfill算法介紹2.圖像渲染3.島嶼數量4.島嶼的最大面積5.被圍繞的區域6.太平洋大西洋水流問題7.掃雷游戲8.衣櫥整理 1.Floodfill算法介紹 2.圖像渲染 3.島嶼數量 4.島嶼的最大面積 5.被圍繞的區域 6.太平洋大西洋水流問題…

【深度學習與實戰】2.3、線性回歸模型與梯度下降法先導案例--最小二乘法(向量形式求解)

為了求解損失函數 對 的導數,并利用最小二乘法向量形式求解 的值? 這是?線性回歸?的平方誤差損失函數,目標是最小化預測值 與真實值 之間的差距。 ?損失函數?: 考慮多個樣本的情況,損失函數為所有樣本的平方誤差之和&a…

氣象可視化衛星云圖的方式:方法與架構詳解

氣象衛星云圖是氣象預報和氣候研究的重要數據來源。通過可視化技術,我們可以將衛星云圖數據轉化為直觀的圖像或動畫,幫助用戶更好地理解氣象變化。本文將詳細介紹衛星云圖可視化的方法、架構和代碼實現。 一、衛星云圖可視化方法 1. 數據獲取與預處理 衛星云圖數據通常來源…

瀏覽器渲染原理與優化詳解

一、瀏覽器渲染基礎原理 瀏覽器渲染流程主要包括以下步驟(也稱為"關鍵渲染路徑"): 構建DOM樹:將HTML解析為DOM(文檔對象模型)樹構建CSSOM樹:將CSS解析為CSSOM(CSS對象模…

基于Spring Boot的成績管理系統后臺實現

下面是一個完整的成績管理系統后臺實現,使用Spring Boot框架,包含學生管理、課程管理和成績管理功能。 1. 項目結構 src/main/java/com/example/grademanagement/ ├── config/ # 配置類 ├── controller/ # 控制器 ├── dto/ …

實現極限網關(INFINI Gateway)配置動態加載

還在停機更新 Gateway 配置,OUT 了。 今天和大家分享一個 Gateway 的功能:動態加載配置(也稱熱更新或熱加載)。 這個功能可以在 Gateway 不停機的情況下更新配置并使之生效。 配置樣例如下: path.data: data path.…

Mean Shift 圖像分割與 Canny 邊緣檢測教程

1. Mean Shift 簡介 Mean Shift 是一種聚類算法,通過尋找圖像中顏色相似的區域來實現分割。它非常適合用于場景分割或物體檢測等任務。本教程將它與 Canny 邊緣檢測結合,突出分割區域的邊界。 2. 圖像分割流程 我們將按照以下步驟完成圖像分割和邊緣檢…

Day15 -實例 端口掃描工具 WAF識別工具的使用

一、端口掃描工具 1、zenmap 我這里user是漢字名,沒有解析成功。等后續換一個英文賬戶試一試。 魔改kali的nmap nmap -p8000-9000 8.140.159.19 2、masscan cmd啟動,拖入exe文件。然后先寫ip,會報錯給提示 尋路犬系統 我們去找一下他的…

如何解決高并發場景下的性能瓶頸?實踐分享

解決高并發性能瓶頸的核心方法包括優化系統架構、合理使用緩存技術、數據庫優化及擴展策略、負載均衡設計。 其中,優化系統架構是根本解決性能問題的關鍵所在。良好的系統架構能夠有效支撐業務高效穩定運行,避免性能瓶頸帶來的損失。企業可通過微服務架構…

自動駕駛背后的數學:ReLU,Sigmoid, Leaky ReLU, PReLU,Swish等激活函數解析

隨著自動駕駛技術的飛速發展,深度學習在其中扮演著至關重要的角色。而激活函數作為神經網絡中的關鍵組件,直接影響著模型的性能和效果。前面幾篇博客 自動駕駛背后的數學:特征提取中的線性變換與非線性激活 , 「自動駕駛背后的數學&#xff1…

性能測試、負載測試、壓力測試的全面解析

在軟件測試領域,性能測試、負載測試和壓力測試是評估系統穩定性和可靠性的關鍵手段。?它們各自關注不同的測試目標和應用場景,理解這些差異對于制定有效的測試策略至關重要。 本文對性能測試、負載測試和壓力測試進行深入分析,探討其定義、…

責任鏈模式-java

1、spring依賴注入模式 @Configuration public class ChainConfig {@Beanpublic ChainSpringFactory chainSpringFactory(List<IHandler<DemoOne,Boolean>> handlerList){return new ChainSpringFactory(handlerList);}} public class DemoOne { }public abstract…

學習本地部署DeepSeek的過程(基于LM Studio)

除了使用Ollama部署DeepSeek&#xff0c;還可以使用LM Studio部署DeepSeek&#xff0c;后者是一款允許用戶在本地計算機上運行大型語言模型&#xff08;LLMs&#xff09;的桌面應用程序&#xff0c;旨在簡化本地模型的使用&#xff0c;無需云端連接或復雜配置即可體驗 AI 功能。…

CSS 尺寸 (Dimension)

CSS 尺寸 (Dimension) 在網頁設計中&#xff0c;CSS&#xff08;層疊樣式表&#xff09;的尺寸屬性是控制元素大小和位置的關鍵。本文將詳細介紹CSS尺寸相關的概念、屬性及其應用。 1. CSS 尺寸概述 CSS尺寸主要包括寬度和高度&#xff0c;這些屬性可以應用于各種HTML元素&a…

【自學筆記】ELK基礎知識點總覽-持續更新

提示&#xff1a;文章寫完后&#xff0c;目錄可以自動生成&#xff0c;如何生成可參考右邊的幫助文檔 文章目錄 ELK基礎知識點總覽1. ELK簡介2. Elasticsearch基礎Elasticsearch配置示例&#xff08;elasticsearch.yml&#xff09; 3. Logstash基礎Logstash配置示例&#xff08…

等差數列公式推導

前言&#xff1a; 通過實踐而發現真理&#xff0c;又通過實踐而證實真理和發展真理。從感性認識而能動地發展到理性認識&#xff0c;又從理性認識而能動地指導革命實踐&#xff0c;改造主觀世界和客觀世界。實踐、認識、再實踐、再認識&#xff0c;這種形式&#xff0c;循環往…

【MySQL】用戶賬戶、角色、口令、PAM

目錄 查看用戶賬戶設置 連接 1.本地連接 2.遠程連接 賬戶 角色 操作用戶賬戶和角色 配置口令和賬戶有效期限 手工使口令過期 配置口令有效期限 PAM身份驗證插件 客戶端連接&#xff1a;使用 PAM 賬戶登錄 在連接到MySQL服務器并執行查詢時&#xff0c;會驗證你的身…

5種生成模型(VAE、GAN、AR、Flow 和 Diffusion)的對比梳理 + 易懂講解 + 代碼實現

目錄 1 變分自編碼器&#xff08;VAE&#xff09;? 1.1 概念 1.2 訓練損失 1.3 VAE 的實現 2 生成對抗網絡&#xff08;GAN&#xff09;? 2.1 概念 2.2 訓練損失 a. 判別器的損失函數 b. 生成器的損失函數 c. 對抗訓練的動態過程 2.3 GAN 的實現 3 自回歸模型&am…