基于Vue单文件组件详解


Posted in Javascript onSeptember 15, 2017

本文将详细介绍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 的简单实例:

基于Vue单文件组件详解

 通过单文件组合,现在我们获得:

1、完整语法高亮
2、CommonJS 模块
3、组件化的 CSS

还可以使用预处理器来构建简洁和功能更丰富的组件,比如 Pug,Babel (with ES2015 modules),和 Stylus。

基于Vue单文件组件详解

这些特定的语言只是例子,可以只是简单地使用 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单文件组件详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 #Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 #Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 #Javascript
VsCode插件整理(小结)
Sep 14 #Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 #Javascript
vue 计时器组件的实现代码
Sep 14 #Javascript
详解tween.js的使用教程
Sep 14 #Javascript
You might like
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
php之readdir函数用法实例
2014/11/13 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Python创建字典的八种方式
2019/02/27 Python
python多进程间通信代码实例
2019/09/30 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
四川成都导游欢迎词
2014/01/18 职场文书
开学典礼感言
2014/02/16 职场文书
企业晚会策划方案
2014/05/29 职场文书
相亲大会策划方案
2014/06/05 职场文书
体现团队精神的口号
2014/06/06 职场文书
律师授权委托书范本
2014/10/07 职场文书
个人事迹材料范文
2014/12/29 职场文书
西安大雁塔导游词
2015/02/10 职场文书
办公用品管理制度
2015/08/04 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
Python 发送SMTP邮件的简单教程
2021/06/24 Python
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers