Vue单文件组件
前面的话
本文将详细介绍Vue单文件组件
概述
在很多 Vue 项目中,使用 Vue.component
来定义全局组件,紧接着用 new Vue({ el: '#container '})
在每个页面内指定一个容器元素。
这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中,或者前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显:
1、全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
2、字符串模板 (String templates) 缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \
3、不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时,CSS 明显被遗漏
4、没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器,如 Pug (formerly Jade) 和 Babel
文件扩展名为 .vue
的 single-file components(单文件组件) 为以上所有问题提供了解决方法,并且还可以使用 Webpack 或 Browserify 等构建工具
下面是一个文件名为 Hello.vue
的简单实例:
通过单文件组合,现在我们获得:
1、完整语法高亮
2、CommonJS 模块
3、组件化的 CSS
还可以使用预处理器来构建简洁和功能更丰富的组件,比如 Pug,Babel (with ES2015 modules),和 Stylus。
这些特定的语言只是例子,可以只是简单地使用 Babel,TypeScript,SCSS,PostCSS - 或者其他任何能够帮助提高生产力的预处理器。如果搭配vue-loader
使用Webpack,它也是把CSS Modules当作第一公民对待
【关注点分离】
一个重要的事情值得注意,关注点分离不等于文件类型分离。在现代 UI 开发中,已经发现相比于把代码库分离成三个大的层次并将其相互交织起来,把它们划分为松散耦合的组件再将其组合起来更合理一些。在一个组件里,其模板、逻辑和样式是内部耦合的,并且把它们搭配在一起实际上使得组件更加内聚且更可维护。
即便不喜欢单文件组件,仍然可以把 JavaScript、CSS 分离成独立的文件然后做到热重载和预编译
<!-- my-component.vue -->
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>
起步
有了 .vue
组件,就进入了高级 JavaScript 应用领域
最好参考 webpack-simple。只要遵循指示,就能很快地运行一个用到 .vue
组件,ES2015 和 热重载 (hot-reloading) 的 Vue 项目。这个模板使用 Webpack,一个能将多个模块打包成最终应用的模块打包工具
在 Webpack 中,每个模块被打包到 bundle 之前都由一个相应的 “loader” 来转换,Vue 也提供 vue-loader 插件来执行 .vue
单文件组件 的转换。这个 webpack-simple 模板已经为你准备好了所有的东西
无论更钟情Webpack或是Browserify,简单的或更复杂的项目都可参考一些文档模板。浏览github.com/vuejs-templates,找到需要的部分,然后参考 README 中的说明,使用 vue-cli 工具生成新的项目
模板中使用 Webpack,一个模块加载器加载多个模块然后构建成最终应用
Vue单文件组件的更多相关文章
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- vue 单文件组件
在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- ts-loader如何与vue单文件组件衔接
.ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...
- 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生
第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...
- vue 单文件组件最佳实践
vue 单文件组件最佳实践 生命周期 template <template> <section> <h1>vue single file components te ...
- vue单文件组件的构建
在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...
- Vue单文件组件基础模板
背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...
- 【原】vue单文件组件互相通讯
在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间 ...
随机推荐
- 环境部署(七):linux下Jenkins+Git+JDK持续集成
前面几篇博客介绍了linux下安装Jenkins.Git.JDK以及Git基础教程和Git关联github等内容,这篇博客,介绍下如何在linux服务器中利用它们构建持续集成环境... 一.准备工作 ...
- PHP基础介绍
php之基本操作 1.常用数据类型: 字符串.整形.浮点数.逻辑.数组.对象.NULL. 字符串: $x = "hello"; 整形:$x = 123; 浮点数:$x =1.123 ...
- vue 图片切换动态绑定
<img :src="切换条件 ? require('xxx.png') : require('xxx.png')" />
- ASP.NET Core中代码使用X509证书,部署到IIS上后报错:System cannot find the specified file 的解决办法(转载)
问: I am trying to embrace the mysteries of SSL communication and have found a great tutorial on this ...
- Linux ip netns 命令
ip netns 命令用来管理 network namespace.它可以创建命名的 network namespace,然后通过名字来引用 network namespace,所以使用起来很方便. ...
- python之面向对象3
面向对象介绍 一.面向对象和面向过程 面向过程:核心过程二字,过程即解决问题的步骤,就是先干什么后干什么 基于该思想写程序就好比在这是一条流水线,是一种机械式的思维方式 优点:复杂的过程流程化 缺点 ...
- mysql之整合ssm多数据源配置
一,基于SSM框架的多数据源配置 1.创建DynamicDataSourceHolder用于持有当前线程中使用的数据源标识 public class DynamicDataSourceHolder { ...
- Ubuntu端口开放
一.关于iptable的介绍 维基百科:https://zh.wikipedia.org/wiki/Iptables 注意:iptables的操作需要root权限 二.具体操作 sudo apt-ge ...
- PAT L2-009 抢红包
https://pintia.cn/problem-sets/994805046380707840/problems/994805066890854400 没有人没抢过红包吧…… 这里给出N个人之间互 ...
- 阿里云CodePipeline vs Jenkins
产品概述_产品简介_CodePipeline-阿里云 https://help.aliyun.com/document_detail/56512.html CodePipeline管理控制台https ...