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

脚本化组件的缺点:

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. jemter做参数化的几种方法

    第一种:使用用户参数:添加--前置处理器--用户参数

  2. HarmonyOS如何高效上架原子化服务?这个平台帮你搞定!

    以往HarmonyOS应用和原子化服务都是在AGC(App Gallery Connect)上架,二者的上架流程一样.但应用的形态更加复杂庞大,上架时有很多必填字段,审核标准也相对复杂,而原子化服务的 ...

  3. HL7简介

    HL7是特定于医疗保健的标准组织,其主要重点是创建一组定义的国际消息传递标准,以支持应用程序和设备之间的互操作性和通信.这些消息标准可以分为三个主要的 HL7标准版本,HL7版本2(v2).版本3(v ...

  4. 科学地花钱:基于端智能的在线红包分配方案 (CIKM2020)

    简介: 红包是电商平台重要的用户运营手段,本文将介绍1688基于端智能技术开发的two-stage红包分发方案.这一方案持续在线上生效,相较于原有算法有明显提升. 一.前言 本文是作者在1688进行新 ...

  5. EventBridge消息路由|高效构建消息路由能力

    ​简介:企业数字化转型过程中,天然会遇到消息路由,异地多活,协议适配,消息备份等场景.本篇主要通过 EventBridge 消息路由的应用场景和应用实验介绍,帮助大家了解如何通过 EventBridg ...

  6. 10种编程语言实现Y组合子

    简介: Y组合子是Lambda演算的一部分,也是函数式编程的理论基础.它是一种方法/技巧,在没有赋值语句的前提下定义递归的匿名函数,即仅仅通过Lambda表达式这个最基本的"原子" ...

  7. 修复 VisualStudio 构建时没有将 NuGet 的 PDB 符号文件拷贝到输出文件夹

    本文告诉大家如何修复 VisualStudio 构建时没有将 NuGet 的 PDB 符号文件拷贝到输出文件夹的问题.如果 VisualStudio 构建时没有将 NuGet 的 PDB 符号文件拷贝 ...

  8. FileStream 的 FlushAsync 方法在 .NET Framework 与 .NET Core 行为的不同

    本文记录 FileStream 的 FlushAsync 方法在 .NET Framework 与 .NET Core 行为的不同 在使用 HID 设备进行 IO 通讯时,可以采用 FileStrea ...

  9. 使用 WPF 做个 PowerPoint 系列 文本 BodyProperties 的 FontScale 与文本字号缩放

    本文来告诉大家,在 OpenXML 的 BodyProperties 的 NormalAutoFit 的 FontScale 属性缩放文本框的文本字号的方法 通过 ECMA 376 文档可以了解到 B ...

  10. nginx部署使用history模式的vue项目详细配置【可多级目录】

    介绍 本文是篇详细的介绍vue项目在history模式下发布时build,项目如何配置,nginx如何配置,才能正常的使用历史模式.或者在二级目录下,多级路径下也能正常使用历史模式. 本文的例子中假设 ...