21-Vue单文件组件的使用方式介绍
2017-07-28 15:19
661 查看
在很多 vue项目中,我们使用 vue.component 来定义全局组件,紧接着用 new vue(el: ”)在每个页面内指定一个容器元素
这种方式在很多中小规模的项目中运作的很好,在这些项目里 javascript 只被用来加强特定的视图。
但挡在更复杂的项目中,或者你的前端完全由 javascript 驱动的时候,下面这些缺点将变得非常明显:
全局定义 (global definitions)强制要求每个 component 中的命名不能重复
字符串模板 (string templates)缺乏语法高亮,在 html 有多行的时候,需要用到丑陋的 \
不支持 CSS (no css support)意味着当 html 和 javascript 组件化时,css 明显被遗漏
没有构建步骤 ( no build step)限制只能使用 html和 es5 javascript ,而不能使用预处理器,如 pug(formerly jade)和 babel
文件扩展名为 .vue 的 sigle-file components(单文件组件)为以上所有问题提供了解决方法,并且还可以使用 webpack 或 browserify 等构建工具
这是一个文件名为 hello.vue的简单实例
现在我们获得:
+ 完整语法高亮
+ commonJs 模板
+ 组件化的 css
正如我们说过的,我们可以使用预处理器来构建简洁和功能更丰富的组件,比如 pug,babel,和 stylus
这些特定的语言只是例子,你可以只是简单地使用 Babel,TypeScript,SCSS,PostCSS - 或者其他任何能够帮助你提高生产力的预处理器。如果搭配 vue-loader 使用 Webpack,它也是把 CSS Modules 当作第一公民来对待的。
在现代 UI 开发中,我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来,把它们划分为松散耦合的组件再将其组合起来更合理一些。
在一个组件里,其模板、逻辑和样式是内部耦合的,并且把他们搭配在一起实际上使得组件更加内聚且更可维护。
即便你不喜欢单文件组件,你仍然可以把 JavaScript、CSS 分离成独立的文件然后做到热重载和预编译。
这种方式在很多中小规模的项目中运作的很好,在这些项目里 javascript 只被用来加强特定的视图。
但挡在更复杂的项目中,或者你的前端完全由 javascript 驱动的时候,下面这些缺点将变得非常明显:
全局定义 (global definitions)强制要求每个 component 中的命名不能重复
字符串模板 (string templates)缺乏语法高亮,在 html 有多行的时候,需要用到丑陋的 \
不支持 CSS (no css support)意味着当 html 和 javascript 组件化时,css 明显被遗漏
没有构建步骤 ( no build step)限制只能使用 html和 es5 javascript ,而不能使用预处理器,如 pug(formerly jade)和 babel
文件扩展名为 .vue 的 sigle-file components(单文件组件)为以上所有问题提供了解决方法,并且还可以使用 webpack 或 browserify 等构建工具
这是一个文件名为 hello.vue的简单实例
<template> <p> {{ gretting}} world! </p> </template> <script> module.exports = { data: function(){ return { greeting: 'hello' } } } </script> <style scoped> p { font-size: 2em; text-algin: center } </style>
现在我们获得:
+ 完整语法高亮
+ commonJs 模板
+ 组件化的 css
正如我们说过的,我们可以使用预处理器来构建简洁和功能更丰富的组件,比如 pug,babel,和 stylus
<template lang="jade"> div p {{greeting}} world! other-component </template> <script> import default{ data(){ return{ greeting:'hello' } }, components: { OtherComponent } } </script> <style lang='stylus' scoped> p font-size: 2em; text-align: center </style>
这些特定的语言只是例子,你可以只是简单地使用 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单文件组件的如何使用方式介绍
- vue生命周期及使用 && 单文件组件下的生命周期
- 关于单文件组件.vue的使用
- 使用vue开发输入型组件更好的一种解决方式(子组件向父组件传值,基于2.2.0)
- asp.net中Fine Uploader文件上传组件使用介绍
- vue2.0 使用element-ui里的upload组件实现多图上传。采用FORMDATA的方式上传。
- 解决vue组件中使用v-for出现告警问题及v for指令介绍
- 使用FileReader API创建Vue文件阅读器组件
- ASP中文件上传组件ASPUpload介绍和使用方法
- Linux入门学习,怎么使用Vim编辑器编辑保存文件?以及查看浏览文件的几种方式介绍——(四)
- 使用FileReader API创建一个Vue的文件阅读器组件
- vue 自定义全局方法,在组件里面的使用介绍
- 使用jspsmartupload组件以时间+文件类型的方式保存文件
- 03_dbcp数据源依赖jar包,DBCP中API介绍,不同过dbcp方式使用dbcp数据库连接池,通过配置文件使用dbcp数据库连接池
- vue组件简单介绍与使用
- web前端vue之vuex单独一文件使用方式实例详解
- commons-fileupload(apache开源文件上传组件)使用方式
- 03_dbcp数据源依赖jar包,DBCP中API介绍,不同过dbcp方式使用dbcp数据库连接池,通过配置文件使用dbcp数据库连接池
- asp.net中Fine Uploader文件上传组件使用介绍