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

脚本化组件的缺点:

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. HarmonyOS后台任务管理开发指南上线!

      为什么要使用后台任务?开发过程中如何选择合适的后台任务?后台任务申请时存在哪些约束与限制? 针对开发者使用后台任务中的疑问,我们上线了概念更明确.逻辑结构更清晰的后台任务开发指南,包含具体的使用场 ...

  2. 报表如何集成 echarts 官网示例图

    Echarts,江湖人称一个纯 Javascript 的图表库,图形种类星罗棋布且个个颜值爆表,可以轻松驾驭 PC 和移动设备,与绝大部分浏览器都可称兄道弟,而且已然众多拥趸,还有不少报表对它采取了嫁 ...

  3. JS isPrototypeOf 和hasOwnProperty 还有in的区别

    isPrototypeOf 和hasOwnProperty 的区别 isPrototypeOf 是判断原生链上是否有该对象. 1.isPrototypeOf isPrototypeOf是用来判断指定对 ...

  4. Web自动化实战:去哪儿网购票流程测试

    克隆源码 项目Github地址:https://github.com/gy-7/Web-automation-practice/tree/main/project1_qunar_booking_tic ...

  5. vue中img标签图片 加载时 与 加载失败 的处理方法

    开发过程中经常需要和图片处理打交道,看了网上很多有关图片处理的方法,都是讲解得一知半解,没有比较全面的总结.下面,将简单总结一个我们通过vue去处理img标签过程中,图片加载时,与图片加载失败时的处理 ...

  6. ARMS实践|日志在可观测场景下的应用

    简介: 在实际生产中,通过灵活组合文内几种使用方式,运维团队可以很好地排除日常观测.故障定位过程中的干扰因素,更快的定界甚至定位问题根因. 作者:陈陈   日志在可观测场景下的应用   随着 IT 架 ...

  7. iLogtail社区版使用入门 - 采集MySQL Binlog

    简介: MySQL Binlog记录了MySQL的变更日志,业界也有一些方案来同步Binlog的数据,如Canal.MaxWell.DTS等.不同的工具可以实现不同的目标,iLogtail也提供了便捷 ...

  8. 云原生DevOps的5步升级路径

    简介: 究竟什么是云原生DevOps呢?我们认为:云原生DevOps是充分利用云原生基础设施,基于微服务/无服务架构体系和开源标准,语言和框架无关,具备持续交付和智能自运维能力,从而做到比传统DevO ...

  9. es实战-使用IK分词器进行词频统计

    ​简介:通过IK分词器分词并生成词云. 本文主要介绍如何通过 IK 分词器进行词频统计.使用分词器对文章的词频进行统计,主要目的是实现如下图所示的词云功能,可以找到文章内的重点词汇.后续也可以对词进行 ...

  10. 使用云效Codeup10分钟紧急修复Apache Log4j2漏洞

    ​简介:2021年12月10日,国家信息安全漏洞共享平台(CNVD)收录了Apache Log4j2远程代码执行漏洞(CNVD-2021-95914),此漏洞是一个基于Java的日志记录工具,为Log ...