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

这种方式在很多中小规模的项目中运作的很好,在这些项目里javascript只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全有javascript驱动的时候,下面这些缺点将变得特别明显:

  • 全局定义强制要求每个component组件中的命名不能重复
  • 字符串模板缺乏语法高亮,在html有多行的时候,需要用到丑陋的/
  • 不支持css意味着当html和javascript组件化时,css明显被遗漏
  • 没有构建步骤限制只能使用HTML和es5javascript,而不是用预处理器,如pug(formerly jade)和babel

文件扩展名为.vue的single-file components(单文件组件)为以上所有问题提供了解决办法,并且还可以使用webpack和browserify。

下面是一个名为hello.vue的简单实例:

<template>

<p>{{greetimg}} world!</p>

</template>

<script>

module.export = {

data:function(){

return {

greeting:'hello'

}

}

}

</script>

<style scoped>

p{

font-size:2em;

text-align:center;

}

</style>

现在我们获得

  • 完整语法高亮
  • CommonJs模块
  • 组件化的CSS

正如我们说过的,我们可以使用预处理器来构建简洁和功能更丰富的组件,比如pug,babel,和stylus.

<template lang = 'jade'>

div

p{{greeting}} world!

other-component

</template>

<script>

import OtherComponent from './OtherComponent.vue'

export 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,它也是把CSSmodules当做第一公民来对待。

怎么看待关注点分离

一个重要的事情值得关注,关注点分离不等于文件类型分离。在现代ui开发中,我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来。

把他们划分为松散耦合的组件再将其组合起来更合理一点。在一个组件中,其模板,逻辑,样式是内部耦合的,并且把他们搭配在一起实际上使得组件内部更加内聚并且更可维护。

即便你不喜欢单文件组件,你仍然可以把javascript,css分离成独立的文件然后做到热重载和预编译

<!--my-component.vue-->

<template>

<div>This will be pre-compiled</div>

</template>

<script src="./component.js"></script>

<style scr="./component.css"></style>

起步

针对刚接触javascript模块开发系统的用户

有了.vue组件,我们就进入了高级javascript应用领域。如果你没有准备好的话,意味着还需要学会使用一些附加的工具:

  • node package manager
  • modern javascript with es2015/16

在你花一些时日了解这些资源之后,我们建议你参考webpack-simple。只要遵循指示,你就能很快地运行一个到.vue组件,es2015和热重载的vue项目

这个模块使用webpack,一个能将多个模块打包成最终应用的模块打包工具。

在webpack中,每个模块被打包到bundle之前都由一个响应的loader来转换。vue也提供vue-router插件来执行.vue单文件组件的转换。

vue 单文件组件的更多相关文章

  1. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  2. Vue单文件组件

    前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...

  3. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  4. ts-loader如何与vue单文件组件衔接

    .ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...

  5. 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生

    第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...

  6. vue 单文件组件最佳实践

    vue 单文件组件最佳实践 生命周期 template <template> <section> <h1>vue single file components te ...

  7. vue单文件组件的构建

    在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...

  8. Vue单文件组件基础模板

    背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...

  9. 【原】vue单文件组件互相通讯

    在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间 ...

随机推荐

  1. hibernate反向工程 (eclipse和myeclipse)【转】

    myeclipse下hibernate反向工程: 1.选择myeclipse hibernate视图 2.建立与后台数据库的连接 1).configure database driver: 2).添加 ...

  2. 深度增强学习--DQN的变形

    DQN的变形 double DQN prioritised replay dueling DQN

  3. http://www.blogjava.net/crespochen/archive/2011/04/22/348819.html

    http://blog.csdn.net/supersky07/article/details/7407523 http://blog.csdn.net/cuker919/article/detail ...

  4. HDU oj password

     #include<stdio.h> #include<string.h> main() { int m; scanf("%d",&m); ch ...

  5. sqlite developer注册码

    sqlite developer注册码网上没有找到,只有通过注册表,删除继续使用,删除注册表中 HKEY_CURRENT_USER\SharpPlus\SqliteDev.

  6. JS 数字左补零函数

    /* 左边自动补零 质朴长存法 by lifesinger */ function pad(num, n) { var len = num.toString().length; while(len & ...

  7. PHP上传文件类 代码练习

    类文件: <?php class upload{ protected $fileName; protected $uploadPath; protected $maxSize; protecte ...

  8. PyPy与VirtualEnv的安装问题

    PyPy与VirtualEnv的安装问题 说明:本博客由bitpeach原创撰写,请勿商用.转载免费,请注明出处,谢谢. (零)背景 VirtualEnv工具的详细内容是什么,请自行百度.这里大概简介 ...

  9. 一步一步实现iOS微信自己主动抢红包(非越狱)

    前言:近期笔者在研究iOS逆向project,顺便拿微信来练手,在非越狱手机上实现了微信自己主动抢红包的功能. 题外话:此教程是一篇严肃的学术探讨类文章,只用于学习研究,也请读者不要用于商业或其它非法 ...

  10. JDBC操作,执行数据库更新操作

    目标: 使用Connection对象取得Statement实例 使用Statement进行数据增删改. Statement接口 要对数据库操作,要使用Statement完成.此接口可以使用Connec ...