转换成：
.example[_v-f3f3eg9] {
color: red;
}
hi
注意
在同一组件内，你能同时用有作用域和无作用域的样式：
/* global styles */
- 父组件的有作用域的CSS和子组件的有作用域的CSS将同时影响子组件。
- 有作用域的样式对其他部分没有影响。
- 有作用域限定的样式不排除类的需要. 由于浏览器渲染方式支持多种不同的CSS选择器，加了作用域的 p { color: red } 会慢好多倍 （即，和属性选择器组合时候的时候）。如果你用类或者id选择器，比如 .example { color: red } ，你就能消除性能损失。这里有个练习场 ，你可以比较测试下其中的差异。
- 在递归组件中小心后代选择器！ 对于 CSS 规则的选择器 .a .b，如果匹配 .a 的元素内包含一个递归子组件，那么子组件中所有包含 .b 的元素都会被匹配到。
PostCSS
任何通过 vue-loader 处理过的 CSS 都再用 PostCSS重写有作用域限制的 CSS 部分。你也能添加自定义的 PostCSS 插件处理，例如， autoprefixer 或 CSSNext。
在 Webpack 1.x 中的用法如下：
Webpack 2.x 中的用法:
除了接受插件的数组，postcss 选项也接受：
- 返回值是插件数组的方法；
- 包含被传递到PostCSS处理器选项的对象。当你的项目依赖于自定义解析器或编译器的时候，这就会很有用。
热加载
“热加载” 不只是当你修改了文件简单地重新加载下页面。当启用了热加载功能，编写完 *.vue 文件后，组件的所有的实例对象被替换，而页面并没有重新加载。仍然保持应用原有的状态。这在你调整模板或修改组件样式的时候，大大改善了开发体验。
当使用项目的脚手架工具 vue-cli ，热加载自动启用。
总结
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
