html引用单文件组件,vue之单文件组件 纯网页方式引入
上一節(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: HTML怎么做类似QQ聊天气泡,h5实现
- 下一篇: vue 带全选和多选的表格怎么写_EXC