上一節(jié)的vue組件開發(fā)是把組件內(nèi)容統(tǒng)一放到了一個js文件里面

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

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

下面看下寫法

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

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

首先看下單文件組件寫法

vue里面的單文件組件 是以.vue文件結(jié)尾的

里面包含template script style等節(jié)點

具體如下

首先在books文件夾下面創(chuàng)建一個booklist.vue文件

目錄如下

image.png

內(nèi)容如下

image.png

image.png

image.png

image.png

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

接下來修改下booklist_component.html文件

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

image.png

接著用httpVueLoader引用組件

image.png

運行效果

image.png

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

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

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

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

下面看下局部注冊

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

向下面一樣

image.png

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

運行效果是一樣的

我們?yōu)榱丝雌饋砬逅?還可以修改成下面

image.png

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

image.png

運行效果

image.png

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

image.png

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

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。