vue 非template模式 Vue起手式

2021-10-13 22:51:09 字數 2120 閱讀 3248

一、vue的學習路線

二、@vue/cli(官方)

使用@vue/cli

全域性安裝 npm install -g @vue/cli或者yarn global add @vue/cli

建立目錄

選擇配置

進入目錄,執行yarn serve開啟webpack-dev-server

使用webstorm或vscode開啟專案開始crm

進入@vue/cli官網檢視資料,學習

四、vue完整版和非完整版區別

vue的兩個版本分別是完整版和執行時版本,檔名分別是vue.js和vue.runtime.js,vue.js包含vue.runtime.js中的內容,它多了乙個編譯器。我們一般使用非完整版本,這樣使用者的體驗很好,使用webpack的vue的loader來彌補非完整版沒有compiler的問題。

提公升使用者體驗,減小js檔案體積,使用非完整版,只支援h函式

提公升開發體驗,直接在vue檔案裡寫html標籤,不寫h函式

利用vue-loader把vue檔案裡面的html轉化為h函式

完整版:

對應的檔名:vue.js ,vue.min.js

支援從html獲取檢視

支援template

有compiler編譯器

非完整版:

對應的檔名:vue.runtime.js ,vue.runtime.min.js

不支援從html獲取檢視

不支援template,需要通過vue-loader 將元件中的template模板編譯為render函式

沒有compiler編譯器,體積會比完整版小30%

五、 template和render

template----html的方式做渲染

template也是一種編譯方式,但是template最終還是要通過render的方式再次進行編譯。

render----js的方式做渲染

render(提供)是一種編譯方式

render裡有乙個函式h,這個h的作用是將單檔案元件進行虛擬dom的建立,然後再通過render進行解析。

h就是createelement()方法:createelement(標籤名稱,屬性配置,children)

區別:1、render渲染方式可以讓我們將js發揮到極致,因為render的方式其實是通過createelement()進行虛擬dom的建立。邏輯性比較強,適合複雜的元件封裝。

2、template是類似於html一樣的模板來進行元件的封裝。

3、render的效能比template的效能好很多

4、render函式優先順序大於template

**演示

因為完整版多了乙個編譯器,這個編譯器的作用就是用了將html字元轉換成執行時版本中的render函式,所以可以直接使用html標籤構建檢視,也可以傳入乙個字串template選項來構建

template

// html 

**********

new vue(}})

// template

**********

new vue(}

', data()}})

render非完整版: 使用 js 構建檢視

new vue(

}render(h)

})

設計模式 Template模式

在物件導向系統的分析與設計過程中經常會遇到這樣一種情況 乙個流程可以分為a,b,c 多個步驟,但在具體的步驟中可能會有不同的情況出現,這時就template模式就非常有用 class p object defa pass defb pass defoperate a b class sub p de...

行為模式 Template 模式

定義 定義乙個操作中的演算法的骨架,而將一些步驟延遲到子類中。template method使得子類可以不改變乙個演算法的結構即可重定義該演算法的某些特定步驟 主要解決在軟體構建過程中,對於某一項任務,常常有穩定的整體操作結構,但各個子步驟卻有很多改變的需求,或者由於固有的原因而無法和任務的整體結構...

模板 Template 模式

模板 template 模式 模板模式是類的行為模式。1.定義 定義乙個操作中演算法的骨架 或稱為頂級邏輯 將一些步驟 或稱為基本方法 的執行延遲到其子類中.2.模板模式與繼承 模板方法估計恰當地使用繼承。此模式可以用來改寫一些擁有相同功能的相關的類,將可復用的一般性行為 移到基類裡面,而把特殊化的...