前端实训-中级阶段(37)-vue2.x单文件组件

/****这里可以放我们的css，编译好之后就可以拉出来了。*scoped就是让css只在当前组件有效/最基础的前端就是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。上一节我们讲了vue2.x组件的定义和使用，以及组件之间的通信。在本节中，我们将讨论如何使用单文件组件。什么是单文件组件？我们之前使用的是全局引用全局定义的方式。脚本引入一个资源，然后全局绑定一个变量。比如jQuery然后我们对导入的资源进行操作。因为这样使用它有一些弊端，然后出现了模块化。单文件组件可以理解为Vue的模块化使用，解决了这个问题。全局定义（Globaldefinitions）强制每个组件中的命名不能重复。字符串模板（Stringtemplates）缺少语法高亮。当HTML有多行时，需要使用ugly\doesnotsupportCSS(NoCSSsupport)意思是当HTML和JavaScript组件化时，CSS明显被遗漏了Nobuildstep(无构建步骤)限制只能使用HTML和ES5JavaScript，但不是预处理器，例如Pug（以前称为Jade）和Babel单文件组件定义和使用单文件组件的后缀是.vue，我们通常通过webpack构建它。一直有结构层（templatehtml）、逻辑层（datalogicjs）、表现层（stylecss）的概念页面，恰好在Vue的单文件组件中得到了很好的实现。相对于js和css分隔的组件。感觉这样的单文件组件比较香。/****这里可以放我们的css，编译好之后就可以拉出来了。*scoped就是让css只在当前组件有效/webpackvue-loader的使用方法当然vue也有Vue-CLI工具。通过它我们可以快速运行我们的页面。微信公众号：前端力农参考前端培训目录，前端培训规划，前端培训计划单文件组件