前端培训-中级阶段（37）- vue 2.x 单文件组件

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，如今前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提高技术水平，打牢基础知识的中心思想，咱们开课啦（每周四）。

上一节咱们说了 vue 2.x 组件定义和使用、组件间的通讯，这节咱们来讲说若是使用单文件组件。

什么是单文件组件？

咱们以前使用的是全局引用、全局定义的方式。

1. script 引入一个资源，而后全局绑定一个变量。好比 jQuery
2. 而后咱们用引入的资源操做。

由于这样使用有一些弊端，而后出现了模块化。
而单文件组件能够理解为 Vue 的模块化使用，他解决了一下问题。

• 全局定义 (Global definitions) 强制要求每一个 component 中的命名不得重复
• 字符串模板 (String templates) 缺少语法高亮，在 HTML 有多行的时候，须要用到丑陋的 \
• 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
• 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

单文件组件的定义及使用

单文件组件的后缀名为 .vue，咱们通常经过 webpack 来构建。

一直有个概念页面为 结构层（模板 html）、逻辑层（数据 逻辑 js）、表现层（样式 css），正好这个在 Vue 的单文件组件中获得了良好的实现。

相比 js 和 css 分家的组件来讲。这样的单文件组件我感受更香呀。

<template>
    <div>这里是咱们的模板定义的地方。注意只能有一个根节点呀</div>
</template>
<script>
// 这里是咱们组件的数据部分。
// 这里不须要template，构建的时候会自动解析上面的模板
// 这里须要 export default 或者 module.exports ，由于这样才能够传递出去。
export default {
   
}
</script>
<style scoped>
 /***
  * 这里能够放咱们的css，然编译以后能够抽离出去。
  * scoped 是让css 只在当前组件生效
 /
</style>

如何使用

1. webpack
2. vue-loader

固然，vue 也有 Vue-CLI 工具。经过它咱们能够很快的跑起咱们的页面。

微信公众号：前端linong

参考文献

1. 前端培训目录、前端培训规划、前端培训计划
2. 单文件组件