这一节学习一下vue里面组件的写法 （在我们实际开发时 功能肯定不止一个图书列表这一个功能 可能还有图书详情 推荐等等内容 如果这些内容都放在一个页面里 页面内容很多 维护起来很不方便） 所以推出组件的写法（不是vue特有的 类似框架库都支持）
下面我们对上节的图书列表代码 进行改写 改成组件的方式
改造成组件方式和之前做法有几个不同之处
el属性必须在vue实例对象里
组件里的data必须是一个函数 返回一个对象（而vue实例里面data属性是一个对象）
组件模板代码写在template属性中 是一个字符串
vue里面创建组件写法如下
vue.component('组件名',模板配置等信息)
下面看下代码
image.png
image.png
image.png
最后模板里面引用组件如下
image.png
运行结果
image.png
和上一节一模一样
但是我们会发现一个问题 这样做并没有什么简便之处 还增加了很多代码
其实组件化开发还有另外一种模式
可以把代码分离到外部 通过导入的方式引入 这样代码看起来就简洁了很多
因为我们目前没有使用webpack等构件工具 必须使用浏览器版本较高的支持
import from语法的浏览器 下面接着改造下代码
为了把代码抽离到外部 我建一个books目录 里面创建一个booklist.js文件
表示图书先关的业务
image.png
目录如下
里面代码如下
image.png
image.png
注意看最下面部分 我们把这个book_list对象给导出了 这样在页面（模板里面就能引用了）
模板里面代码
image.png
必须写上type="module" 否则不认识模块化开发
然后就可以通过import from 的方式把外部代码 导入
运行结果
image.png
这种方式我们的代码就清爽了很多 以上就是浏览器里面直接import from 组件化开发的方式
网友评论