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

脚本化组件的缺点:

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. 高可用之战:Redis Sentinal(哨兵模式)

    ★ Redis24篇集合 1 背景 在我们的<Redis高可用之战:主从架构>篇章中,介绍了Redis的主从架构模式,可以有效的提升Redis服务的可用性,减少甚至避免Redis服务发生完 ...

  2. 元启发式算法库 MEALPY 初体验-遗传算法为例

    简介 官网: MealPY官网 开源许可: (GPL) V3 MEALPY简介 官网简介翻译 MEALPY (MEta-heuristic ALgorithms in PYthon) 是一个提供最新自 ...

  3. Unity 音乐或者视频播放完毕之后执行方法

    视频播放完毕后,执行某个方法 方法1 官方给的解释 private VideoPlayer video2; private void Awake() { video2.loopPointReached ...

  4. docker 应用篇————docker基本命令[四]

    前言 介绍一下一些docker的基本命令. 正文 帮助命令: 首先要学的肯定是docker --help 命令了,因为这样我们就不用经常去查官网. docker version docker info ...

  5. c# 优化代码的一些规则——什么情况下应该使用new[七]

    前言 new 在重构这本书中写道new就是坏代码的味道,说明使用new的情况并不多. 在这里我指的new 是方法修饰符,而不是指实例. 正文 看下new的作用: new 修饰符可以重新定义从基类继承下 ...

  6. DM 传统行业SQL优化案例

    来OB这么久还没有接触啥金融的SQL,只能发点其他行业的数据库SQL优化案例. 今天拿到手的这个案例SQL 传统行业的,很奇葩的SQL,表设计三范式都没弄好. 什么医疗,交通,能源这些传统行业的业务设 ...

  7. kratos http原理

    概念 kratos 为了使http协议的逻辑代码和grpc的逻辑代码使用同一份,选择了基于protobuf的IDL文件使用proto插件生成辅助代码的方式. protoc http插件的地址为:htt ...

  8. JVM简明笔记1:JVM 概述

    什么是JVM JVM 即 Java Virtual Machine,中文名为 Java虚拟机. 一般情况下 C/C++ 程序,编译成二进制文件后,就可以直接执行了: Java 需要使用 javac 编 ...

  9. 全面升级!揭秘阿里云智能Logo设计的AI黑科技

    简介: 免费体验!阿里云智能logo设计一直致力于用AI技术,帮助更多有设计需求的朋友能"多快好省"地做logo,让"设计logo"这件有门槛的事情,通过智能工 ...

  10. 内含干货PPT下载|一站式数据管理DMS关键技术解读

    ​简介: 深入解读实时数据流.库仓一体数据处理等核心技术 "数聚云端·智驭未来"--阿里云数据库创新上云峰会暨第3届数据库性能挑战赛决赛颁奖典礼已圆满结束,更多干货内容欢迎大家观看 ...