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