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 相关文章推荐
Web开发之JavaScript
Mar 29 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
javascript实现完美拖拽效果
May 06 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 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
层叠菜单的动态生成
2006/10/09 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
Smarty3配置及入门语法
2017/02/22 PHP
取得传值的函数
2006/10/27 Javascript
JMenuTab简单使用说明
2008/03/13 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
python实现词法分析器
2019/01/31 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
python SVM 线性分类模型的实现
2019/07/19 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
python3使用GUI统计代码量
2019/09/18 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
黄金搭档广告词
2014/03/21 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
企业宣传工作方案
2014/06/02 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
优秀班集体申报材料
2014/12/25 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
安全主题班会教案
2015/08/12 职场文书
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript