基于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 序列化对象实现代码
Dec 18 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
功能完善的小程序日历组件的实现
Mar 31 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
我的论坛源代码(二)
2006/10/09 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
如何让页面加载完成后执行js
2013/06/26 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
python列表的增删改查实例代码
2018/01/30 Python
python 日志增量抓取实现方法
2018/04/28 Python
Python 互换字典的键值对实例
2019/02/12 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
汽车销售顾问求职自荐信
2014/01/01 职场文书
会计岗位职责范本
2014/03/07 职场文书
公司开业庆典主持词
2014/03/21 职场文书
初三班主任寄语大全
2014/04/04 职场文书
音乐幼师求职信
2014/07/09 职场文书
先进工作者申报材料
2014/12/23 职场文书
秦兵马俑导游词
2015/02/02 职场文书
情况说明书格式及范文
2019/06/24 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书