二 Vue 頁面渲染過程

2021-10-01 12:59:59 字數 768 閱讀 4686

上篇博文我們依葫蘆畫瓢已經將hello world 展現在介面上啦,但是是不是感覺新虛虛的,總覺得這麼多檔案,專案怎麼就啟動起來了呢?怎麼訪問到8080 埠就能進入到我們的首頁呢。整個的流程是怎麼樣的呢?

我也是剛剛接觸,所以就會有這樣的困惑,所以這篇就簡單的理解一下專案頁面渲染的過程。

我們上篇文章說main.js 是無用的,是廢**,只是起到支撐框架的。但是其實我們應該有感覺,把他刪除了整個專案就跑步起來了。其實main.js 算是專案的入口了。我們就從這個檔案看起。

import vue from 'vue'

import router from './router'

vue.config.productiontip = false

new vue()

new vue()
所有的 router-view 中的內容,都會被自動替換。

script 中的**則是指令碼**。

我們專案的流程就講到這裡把,算是對上篇的補充,讓我們對專案啟動,介面渲染算是有乙個大概的了解啦,我們接下來就按照官網上講一下vue 的一些語法和特性,但是與官網上不同的是,官網上都是乙個個的html,而我們就在這個專案的基礎的上。將會是乙個個的vue 檔案。

**上傳到github:

後續加油♡

如果大家喜歡記得關注和分享喲❤

div設定高度 vue 二 Vue 頁面渲染過程

上篇博文我們依葫蘆畫瓢已經將hello world 展現在介面上啦,但是是不是感覺新虛虛的,總覺得這麼多檔案,專案怎麼就啟動起來了呢?怎麼訪問到8080 埠就能進入到我們的首頁呢。整個的流程是怎麼樣的呢?我也是剛剛接觸,所以就會有這樣的困惑,所以這篇就簡單的理解一下專案頁面渲染的過程。我們上篇文章說...

vue渲染過程

把模板編譯為render函式 例項進行掛載,根據根節點render函式的呼叫,遞迴的生成虛擬dom 對比虛擬dom,渲染到真實dom 元件內部data發生變化,元件和子元件引用data作為props重新呼叫render函式,生成虛擬dom,返回到步驟3 第一步 模板變成render函式 hello ...

html頁面渲染過程

1.解析html檔案,建立dom樹 自上而下解析,遇到任何樣式 link style 和指令碼 script 都會阻塞 1 css載入不會阻塞html檔案的解析,但會阻塞dom的渲染 2 css載入會阻塞後面js語句的執行 3 js會阻塞html的解析和渲染 4 沒有defer和async標籤的sc...