非常教程

Vue 2参考手册

指南 | Guide

20. Single File Components(单一文件组件)

介绍

在许多Vue项目中,将使用全局组件定义Vue.component,然后new Vue({ el: '#container' })定位每个页面主体中的容器元素。

这对于中小型项目非常适用,JavaScript只用于增强某些视图。然而,在更复杂的项目中,或者当您的前端完全由JavaScript驱动时,这些缺点变得明显:

  • 全局定义强制每个组件的唯一名称
  • 字符串模板缺少语法高亮显示,并且需要多行HTML的斜杠
  • 没有CSS支持意味着当HTML和JavaScript被模块化为组件时,CSS被明显遗漏
  • 没有构建步骤限制我们使用HTML和ES5 JavaScript,而不是像Pug(以前的Jade)和Babel这样的预处理器

所有这些都通过具有扩展的单文件组件解决.vue,使用Webpack或Browserify等构建工具成为可能。

以下是我们将要调用Hello.vue的一个文件的示例:

20. Single File Components(单一文件组件)

现在我们得到:

  • Complete syntax highlighting
  • CommonJS modules
  • Component-scoped CSS

正如承诺的那样,我们也可以使用预处理器,例如Pug,Babel(带ES2015模块)和Stylus,以获得更清洁和功能更丰富的组件。

20. Single File Components(单一文件组件)

这些特定的语言只是例子。您可以轻松使用Bublé,TypeScript,SCSS,PostCSS - 或其他可帮助您提高生产力的预处理器。如果使用Webpack vue-loader,它也对CSS模块有一流的支持。

关于分离的问题是什么?

需要注意的一件重要事情是,关注的分离不等于文件类型的分离。在现代用户界面开发中,我们发现代替将代码分成三个彼此交织的巨大层,将它们分解为松散耦合的组件并构成它们更有意义。在组件内部,其模板,逻辑和样式本身就是耦合的,并且它们的搭配实际上使组件更加紧密和可维护。

即使您不喜欢单个文件组件的想法,您仍然可以利用其热重新加载和预编译功能,将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>

入门

示例沙箱

如果您想直接使用并开始使用单个文件组件,请在CodeSandbox上查看此简单的待办事项应用程序。

适用于JavaScript中模块构建系统的新用户

通过.vue组件,我们正在进入高级JavaScript应用领域。这意味着如果你还没有学习使用一些额外的工具:

  • 节点包管理器(NPM):通过第10:卸载全局包来阅读入门指南。
  • 现代JavaScript与ES2015 / 16:通读Babel's Learn ES2015指南。您现在不必记住每个功能,但请保留此页作为您可以回来的参考。

花了一天的时间深入研究这些资源后,我们建议您查看webpack模板。按照说明进行操作,您应该有一个包含.vue组件的Vue项目,ES2015,并立即进行热重装!

要详细了解Webpack本身,请查看他们的官方文档和Webpack Academy。在Webpack中,每个文件在被包含在bundle中之前都可以通过“loader”进行转换,而Vue提供vue-loader插件来转换单个文件(.vue)组件。

对于高级用户

无论您喜欢Webpack还是Browserify,我们都为简单和更复杂的项目编写了模板。我们建议浏览github.com/vuejs-templates,选择适合您的模板,然后按照README中的说明使用vue-cli生成新项目。

Vue 2

Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

主页 https://vuejs.org/
源码 https://github.com/vuejs/vue
版本 2
发布版本 2.5.2

Vue 2目录