Vue单文件组件的如何使用方式介绍


Posted in Javascript onJuly 28, 2017

在很多 vue项目中,我们使用 vue.component 来定义全局组件,紧接着用 new vue(el: ”)在每个页面内指定一个容器元素

这种方式在很多中小规模的项目中运作的很好,在这些项目里 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 的 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
JavaScript 监听textarea中按键事件
Oct 08 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
node中koa中间件机制详解
Aug 22 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 #Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 #jQuery
完美实现js拖拽效果 return false用法详解
Jul 28 #Javascript
webpack 2的react开发配置实例代码
Jul 28 #Javascript
基于AngularJS实现表单验证功能
Jul 28 #Javascript
AngularJS service之select下拉菜单效果
Jul 28 #Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 #Javascript
You might like
PHP开发过程中常用函数收藏
2009/12/14 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
Python入门篇之字典
2014/10/17 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
python主线程捕获子线程的方法
2018/06/17 Python
python设置环境变量的原因和方法
2019/06/24 Python
Python中函数的返回值示例浅析
2019/08/28 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
浅谈Python type的使用
2019/11/19 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
团委书记的竞聘演讲稿
2014/04/24 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
邀请函范文
2015/02/02 职场文书
街道社区活动报告
2015/02/05 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers
带你了解Java中的ForkJoin
2022/04/28 Java/Android