html引用单文件组件,vue之单文件组件 纯网页方式引入

上一节的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可以引用别的组件

由于我们的分页代码是写在图书列表组件里了 分页代码有可能是通用的 在别的地方有可能也能用到 所以应该抽离出来 做成公用组件 在图书列表里面引用分页组件(子组件)