为了解决组件化分拆后的问题,Vue.js定义了一种新的文件格式:.vue文件,来组织一个Vue.js 组件的各种代码资源:
vue-file.png.vue文件的结构看起来很像HTML,直观,也容易理解。它使用不同的标签来声明组件不同 类型的代码资源:
- <template>:在tempalte标签内编写组件的HTML模板
- <script> :在script标签内编写组件的JS代码
- <style>:在style标签内编写组件的CSS样式
组件的模块化
你或许注意到,.vue文件的模板声明段和样式定义段,包含的内容都没有什么特别之处,只是 在JS代码段,有一行特殊的代码:module.exports = EzApp。
module.exports是CommonJS规范中的模块输出声明语法,这意味着.vue文件的JS代码段, 被设计为一个JavaScript模块,其输出为组件配置对象。
网友评论