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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 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中的string类型使用说明
2010/07/27 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
PHP制作万年历
2015/01/07 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
python自动化报告的输出用例详解
2018/05/30 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
python实现ip代理池功能示例
2019/07/05 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
计算机专业自荐信
2013/10/14 职场文书
班主任评语大全
2014/04/26 职场文书
文化建设工作方案
2014/05/12 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技
js判断两个数组相等的5种方法
2022/05/06 Javascript
mysql数据库隔离级别详解
2022/06/16 MySQL