vue多瀏覽器標籤傳參 Vue的兩個版本

2021-10-18 13:40:43 字數 2858 閱讀 4420

vue.js分為兩個版本,簡單來說就是乙個是完整版vue.js,乙個是非完整版vue.runtime.js

完整版的html書寫的位置有兩個,乙個是直接在*.html檔案中使用vue語法,如下所示:

index.html檔案

main.js檔案

如下所示:

index.html檔案

main.js檔案

非完整版的html的書寫位置也有兩種方式,乙個是直接寫在vue例項建立時的render()函式選項裡,遵循createelement函式傳參建立元素的形式。如下所示:

index.html檔案

main.js檔案

這樣的render函式裡面建立html元素的方法是不是看起來/寫起來都很麻煩,因此,vue的作者就幫助我們以更簡單明瞭的方式提供了*.vue檔案,通過vue-loader在檔案編譯時將*.vue檔案轉化成對應的render()函式裡的複雜的建立語法,相比起來,*.vue檔案的語法就清晰明了多了,如下所示:

index.html檔案

demo.vue檔案

main.js檔案

補充:大部分情況下createelement會寫成h,都是建立元素的意思,即render(h)render(createelement)是一樣的,寫h更簡單些。在 .vue 檔案中的標籤裡面的內容不是 html 語法,是 xml 語法,因此應遵循 xml 的語法標準。xml 和 html 語法差不多,但是 xml 相比於 html 要更嚴格一些,比如在 xml 中有閉合標籤一說,且單標籤必須閉合,如,但在 html 中單標籤不閉合是正確的、最新的語法。同時還有乙個區別是在xml中當標籤內沒有內容時可直接/閉合,如,但在html中,則不行。嚴格的 xml 語法比鬆散的 html 語法相比起來更容易編譯,因此 vue 就選擇了xml語法

完整版是一定要有compiler即編譯器的,編譯器的作用就是將vue語句在編譯時還原成html元素才能在瀏覽器上渲染出來,完整版的vue是通過編譯器來實現的,因此完整版有compiler

由於完整版沒有用到*.vue檔案,因此不含有vue-loader

非完整版用到了*.vue檔案,而vue-loader就是將*.vue檔案翻譯成render()函式裡元素建立語法的。因此非完整版用到了vue-loader,但是沒有用到compiler即編譯器,因為render()函式就是渲染html元素的,不再需要編譯器。

優點:可以在html檔案中直接寫vue語句,可讀性強些

缺點:體積比非完整版大

耦合性太大,在html檔案中夾雜vue語法,導致各型別檔案融合到一塊,耦合性大

優點:體積小,非完整版的體積比完整版小了30%多

耦合性低,模組化強

缺點:使用不方便

目前vue的使用基本都是非完整版,@vue/cli引入webpack引入的vue檔案都是非完整版。

另外,不要登陸該**可以無限次免費使用,如果登入了就只能免費使用50個專案就要收費了。

vue實現跳轉瀏覽器新的標籤頁

一般單頁面應用,vue都是通過vue router來做跳轉 this.router.push,this.router.replace 不會像多頁應用一樣另起新標籤頁面顯示 注 不是開啟新的瀏覽器頁面 要想實現,可以用以下方式 let newpage this.router.resolve windo...

Vue中的傳參

一 普通方式 1 動態路由引數 路由 component resolve require views page pagedetail.vue resolve 頁面使用 pagedetail id 詳情 router link 獲取引數 this route.params.id2 params傳參 重...

瀏覽器傳參,子路由,CBV

瀏覽器向後端傳遞資料 第一種方式 普通傳參 不常用 urlpatterns path admin admin.site.urls path demo demo 引數,接收資料 若資料是整數的話,需要加上int轉換為整型 例 name 引數,注意 這裡的引數名必須要和路由中的引數名保持一致 列印一下這...