乐趣区

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

jiezi

前端最基础的就是 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. 单文件组件
退出移动版