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 引數,注意 這裡的引數名必須要和路由中的引數名保持一致 列印一下這...