美文网首页vue-3.x
1.02-Vue.js单文件组件

1.02-Vue.js单文件组件

作者: Jimmy_L_Wang | 来源:发表于2018-09-28 09:57 被阅读14次

为了解决组件化分拆后的问题,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模块,其输出为组件配置对象。

相关文章

  • 1.02-Vue.js单文件组件

    为了解决组件化分拆后的问题,Vue.js定义了一种新的文件格式:.vue文件,来组织一个Vue.js 组件的各种代...

  • vue-cli

    === 单文件组件结合webpack处理单文件组件配置webpack相关loader使用vue文件创建vue组件引...

  • Vue开发风格指南

    组件数据 组件的 data 必须是一个函数。 单文件组件文件名称 单文件组件的文件名应该要么始终是单词大写开头 (...

  • Vue组件化开发 (单文件组件)

    单文件组件 1、单文件组件 1.在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接...

  • 单文件的使用

    单文件组件 概述 以 .vue 作为后缀名的文件,就是 Vue 中的单文件组件 组件的组成 由 三部分 组成: t...

  • 时间线图绘制(time-line)

    效果: .vue 单文件组件

  • vue 2.0封装model组件

    单文件组件 使用单文件组件封装model的模板、逻辑和样式,之后就可以在页面中调用此通用组件。 需求 model有...

  • 单文件组件

    App.vue School.vue Student.vue

  • 单文件组件

    新建一个后缀为vue的文件 main.js>app.vue>其它组件 main.js是创建vue构造函数,然后把总...

  • 单文件组件

    1.APP.vue //引入组件 impor...

网友评论

    本文标题:1.02-Vue.js单文件组件

    本文链接:https://www.haomeiwen.com/subject/abuuoftx.html