组件有两种:脚本化组件、单文件组件

脚本化组件的缺点:

html代码是作为js的字符串进行编写,所以组装和开发的时候不易理解,而且没有高亮效果。
脚本化组件用在小项目中非常合适,但是复杂的大项目中,如果把更多的组件放在html文件中,那么维护成本就会变得非常昂贵。
脚本化组件只是整合了js和html,但是css代码被剥离出去了。使用组件时还要另外引入css文件。

  

将一个组件相关的html结构,css样式,以及交互的JavaScript代码从html文件中剥离出来,合成一个文件,这种文件就是单文件组件,相当于一个组件具有了结构、表现和行为的完整功能,方便组件之间随意组合以及组件的重用,这种文件的扩展名为“.vue”,比如:“Home.vue”。

Vue cli之单文件组件的更多相关文章

  1. vue中的单文件组件

    之前都是在html文件中写组件的css,组件的js,组件的模板来演示vue组件的语法,下面介绍以.vue结尾的单文件组件.vue-loader是一个Webpack的loader,可以将单文件组件转换为 ...

  2. vue入门之单文件组件

    介绍 在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多 ...

  3. Vue -3:单文件组件

    在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规 ...

  4. Vue中创建单文件组件 注册组件 以及组件的使用

    <template> <div id="app"> <v-home></v-home> <hr > <br> ...

  5. vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)

    第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...

  6. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  7. vue单文件组件的构建

    在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...

  8. Vue单文件组件基础模板

    背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...

  9. 【原】vue单文件组件互相通讯

    在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间 ...

  10. 一丢丢学习之webpack4 + Vue单文件组件的应用

    之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...

随机推荐

  1. 第十九篇:Django ORM外键关联关系

    一.一对多的创建 二.一对多跨表操作 三.创建多对多 四.Ajax处识 五.模板继承与导入 六.自定义分页

  2. css block,inline和inline-block概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  3. 通过一个非常简单的SSM项目来将SpringMVC配置整理清晰。

    所有的文件在Git上面都能找到,由于把代码搞上来看的很不舒服,结构不清晰. 第一步:确定环境 IDEA MySQL 5.7.19 Tomcat 9 Maven 3.6 第二步:创建数据库 参考GIT上 ...

  4. 容器基础-- namespace,Cgroup 和 UnionFS

    Namespace 什么是 Namespace ? 这里的 "namespace" 指的是 Linux namespace 技术,它是 Linux 内核实现的一种隔离方案.简而言之 ...

  5. 暑期集训 Day9 —— 模拟赛复盘

    ${\color{Green} \mathrm{Problem\ 1 :大河的序列 }} $ 巨思维... 其实只需要输出序列 max 即可. 死因: \({\tiny 去你的}\) 快速幂 int ...

  6. 暑期集训 Day5 —— 模拟赛复盘

    ${\color{Green} \mathrm{Problem\ 1 :选数 }} $ 签到题,一眼二分,但是打模板时死循环了: while(L<R){ int mid=(L+R)>> ...

  7. NICA 校际交流赛#2 游记

    \(1\!:\!15\) 到达考场,检测好网络和电脑. 分配任务,sxshm 打前 \(5\) 题,tcy01_QAQ_ 打 \(6,\!7\) 两题,我打后面的题. \(1\!:\!30\) 显得无 ...

  8. HarmonyOS NEXT应用开发案例——阻塞事件冒泡

    介绍 本示例主要介绍在点击事件中,子组件enabled属性设置为false的时候,如何解决点击子组件模块区域会触发父组件的点击事件问题:以及触摸事件中当子组件触发触摸事件的时候,父组件如果设置触摸事件 ...

  9. 《领域驱动设计》:从领域视角深入仓储(Repository)的设计和实现

    简介: <领域驱动设计>中的Repository(下面将用仓储表示)层实际上是极具有挑战性的,对于它的理解,也十分重要.本文讲大部分内容都在众多前辈理论基础上,从一个崭新的领域视觉开始探索 ...

  10. App DApp Deploy as Code! SAE & Terraform 实现 IaC 式部署应用eploy as Code! SAE & Terraform 实现 IaC 式部署应用

    简介: SAE 和 Terraform 的结合,能够帮助企业像处理代码一样管理自己的应用,对资源的操作都变得可审计,可追溯,可回滚,同时也降低人为操作带来的风险. 企业上云是近些年的发展热潮,越来越多 ...