Vue单文件组件的如何使用方式介绍
2017-07-28 15:58
786 查看
在很多 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的简单实例
<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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 21-Vue单文件组件的使用方式介绍
- 介绍如何有效使用tar、cpio和rpm工具,对文件进行存档和恢复
- ASP中文件上传组件ASPUpload介绍和使用方法
- 03_dbcp数据源依赖jar包,DBCP中API介绍,不同过dbcp方式使用dbcp数据库连接池,通过配置文件使用dbcp数据库连接池
- Linux系统如何使用SFTP方式传输文件具体图解
- 03_dbcp数据源依赖jar包,DBCP中API介绍,不同过dbcp方式使用dbcp数据库连接池,通过配置文件使用dbcp数据库连接池
- Java中如何使用组件实现文件上传下载
- Vue.js学习系列(八)---如何使用组件
- 如何优雅地使用 VSCode 来编辑 vue 文件?
- 如何使用Java代码获取文件、文件流或字符串的编码方式
- 如何优雅地使用 VSCode 来编辑 vue 文件?
- 使用jspsmartupload组件以时间+文件类型的方式保存文件
- 如何制作Vuejs组件,并且在项目中使用
- sandbox沙盒介绍以及如何取得沙盒里面各文件的路径,图片导入方式和图片路径获取
- 介绍如何有效使用tar、cpio和rpm工具,对文件进行存档和恢复
- 创建快捷方式,如何保证移动目标文件后可以正常使用
- hosts – 如何默认使用记事本打开hosts文件或快捷方式
- asp.net中Fine Uploader文件上传组件使用介绍
- vue组件简单介绍与使用
- asp.net中Fine Uploader文件上传组件使用介绍