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

脚本化组件的缺点:

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 3.0 Beta发布

    原文:https://mp.weixin.qq.com/s/y0h5CUMbuFchwT7g-AqaBQ,点击链接查看更多技术内容. 2021年10月,我们面向开发者发布了HarmonyOS 3.0 ...

  3. redis 简单整理——CEO[十五]

    前文 简单介绍一下CEO. 正文 Redis3.2版本提供了GEO(地理信息定位)功能,支持存储地理位置信 息用来实现诸如附近位置.摇一摇这类依赖于地理位置信息的功能,对于需 要实现这些功能的开发者来 ...

  4. 深入解析Rivest Cipher 4:理论与实践

    第一章:引言 密码学简介: 密码学是研究如何保护通信和信息安全的学科.它涉及加密算法.解密算法.密钥管理等内容,旨在确保信息在传输和存储过程中不被未经授权的人所获取或篡改.密码学可以分为对称加密和非对 ...

  5. 《C# in depth》第6章C#6.0中的更改(十四)——表达式体

    表达式体成员是一种在C# 6及以上版本中引入的语法.它允许开发人员使用Lambda表达式来简化方法或属性的定义. 在使用表达式体成员时,可以将方法或属性的实现写在一个Lambda表达式中,然后直接返回 ...

  6. 【Oracle】力扣简单的练习题

    Oracle力扣简单的练习题 请你编写一个 SQL 查询来交换所有的 'f' 和 'm' /* Write your PL/SQL query statement below */ /******** ...

  7. 使用GitHub Actions和GitHub pages实现前端项目的自动打包部署

    1. 引言 As we all know,前端部署项目是比较简单的,通常情况下只需要将打包的产物(index.html..js文件..css文件等)放在Web服务器下就,这种叫静态资源托管,成本是比较 ...

  8. 力扣290(java)-单词规律(简单)

    题目: 给定一种规律 pattern 和一个字符串 s ,判断 s 是否遵循相同的规律. 这里的 遵循 指完全匹配,例如, pattern 里的每个字母和字符串 s 中的每个非空单词之间存在着双向连接 ...

  9. EasyNLP发布融合语言学和事实知识的中文预训练模型CKBERT

    简介: 本⽂简要介绍CKBERT的技术解读,以及如何在EasyNLP框架.HuggingFace Models和阿里云机器学习平台PAI上使⽤CKBERT模型. 导读 预训练语言模型在NLP的各个应用 ...

  10. 2019-8-31-dotnet-动态代理魔法书

    title author date CreateTime categories dotnet 动态代理魔法书 lindexi 2019-08-31 16:55:58 +0800 2019-06-02 ...