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 相关文章推荐
再论Javascript的类继承
Mar 05 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
Python生成验证码实例
2014/08/21 Python
python正则表达式match和search用法实例
2015/03/26 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
音乐剧猫观后感
2015/06/04 职场文书
Python基础详解之邮件处理
2021/04/28 Python
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
总结几个非常实用的Python库
2021/06/26 Python