上一節的vue組件開發是把組件內容統一放到了一個js文件里面

里面寫上模板字符串(引用組件) 這種方式還需要拼接轉義 寫法非常丑陋

vue貼心的幫我們封裝了單文件組件 可以不用再模板里面拼接字符串

下面看下寫法

由于我們目前沒有使用webpack和vue-cli等構建工具(為了快速學習vue的語法) 要在瀏覽器里直接使用單文件組件需要依賴一個插件http-vue-loader(因為單文件組件需要依賴這個loader進行編譯)(用webpack打包 編譯 也是需要相應的loader進行轉化的(vue-loader))

我們下載好直接放在本地 在html頁面里面通過script的方式引入

首先看下單文件組件寫法

vue里面的單文件組件 是以.vue文件結尾的

里面包含template script style等節點

具體如下

首先在books文件夾下面創建一個booklist.vue文件

目錄如下

image.png

內容如下

image.png

image.png

image.png

image.png

可以看見我們沒有在template里面寫上丑陋的轉譯換行符等 模板就像寫普通的html代碼一樣

接下來修改下booklist_component.html文件

首先加上插件(http-vue-loader)這個是在瀏覽器中直接使用單文件組件的插件

image.png

接著用httpVueLoader引用組件

image.png

運行效果

image.png

以上就是單文件組件的加載方式

vue里面組件注冊可以分為全局和局部注冊

有些時候我們不需要全局使用 所以有必要學習下組件的局部注冊

上節課的Vue.component()這種方式即為全局注冊

下面看下局部注冊

其實component屬性幾點 可以放在vue實例里 也可以放在單文件的組件里

向下面一樣

image.png

放在vue實例里了 把全局注冊的組件注釋掉了

運行效果是一樣的

我們為了看起來清爽 還可以修改成下面

image.png

由于二者名字是相同的 在es6里面還可以簡寫成下面

image.png

運行效果

image.png

同理在單文件組件里也可以寫上components引用其他的組件

image.png

booklist.vue里面寫入components可以引用別的組件

由于我們的分頁代碼是寫在圖書列表組件里了 分頁代碼有可能是通用的 在別的地方有可能也能用到 所以應該抽離出來 做成公用組件 在圖書列表里面引用分頁組件(子組件)

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的html引用单文件组件,vue之单文件组件 纯网页方式引入的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。