Vue单文件组件怎么用

　　介绍

小编给大家分享一下Vue单文件组件怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

在很多Vue项目中,我们使用vue.component来定义全局组件,紧接着用新的Vue (el:“)在每个页面内指定一个容器元素

这种方式在很多中小规模的项目中运作的很好,在这些项目里JavaScript只被用来加强特定的视图。

但挡在更复杂的项目中,或者你的前端完全由JavaScript驱动的时候,下面这些缺点将变得非常明显:

<李>

全局定义(全球定义)强制要求每个组件中的命名不能重复

<李>

字符串模板(字符串模板)缺乏语法高亮,在html有多行的时候,需要用到丑陋的\

<李>

不支持CSS(不支持CSS)意味着当html和JavaScript组件化时,CSS明显被遗漏

<李>

没有构建步骤(没有构建步骤)限制只能使一对es5用html和JavaScript,而不能使用预处理器,如哈巴狗(原玉)和巴别塔

文件扩展名为.vue的sigle-file组件(单文件组件)为以上所有问题提供了解决方法,并且还可以使用webpack或browserify等构建工具

这是一个文件名为你好。vue的简单实例

& lt; template> 　　 　　& lt;才能p>, {{, gretting}},世界!,& lt;/p> 　　& lt;/template> 　　 　　 　　& lt; script> 　　module.exports 才能=,{ 　　,,,数据:,函数(){ 　　,,,,,return  { 　　,,,,,,,祝福:,& # 39;你好# 39; 　　,,,,,} 　　,,,} 　　,,} 　　& lt;/script> 　　 　　& lt; style  scoped> 　　p  { 　　,,字体大小:2 em; 　　text-algin才能:中心 　　} 　　 　　& lt;/style>

现在我们获得:

<李>

完整语法高亮

<李>

commonJs模板

<李>

组件化的css

正如我们说过的,我们可以使用预处理器来构建简洁和功能更丰富的组件,比如哈巴狗,巴别塔,和笔

& lt; template  lang=癹ade"比; 　　,div 　　,,,p {{问候}},世界! 　　,,,other-component  　　& lt;/template> 　　 　　& lt; script> 　　import 默认{才能 　　,,,的数据(){ 　　,,,,,返回{ 　　,,,,,,,祝福:& # 39;你好# 39; 　　,,,,,} 　　,,,}, 　　,,,组件:,{ 　　,,,,OtherComponent 　　,,,} 　　,,} 　　& lt;/script> 　　 　　& lt; style  lang=& # 39;针# 39;,scoped> 　　,p 　　,,,字体大小:2 em; 　　,,,text-align: center , 　　& lt;/style>

这些特定的语言只是例子,你可以只是简单地使用巴贝尔,打印稿,SCSS, PostCSS——或者其他任何能够帮助你提高生产力的预处理器。如果搭配vue-loader使用Webpack,它也是把CSS模块当作第一公民来对待的。

<强>怎么看待关注点分离?

一个重要的事情值得注意,关注点分离不等于文件类型分离。

在现代UI开发中,我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来,把它们划分为松散耦合的组件再将其组合起来更合理一些。

在一个组件里,其模板,逻辑和样式是内部耦合的,并且把他们搭配在一起实际上使得组件更加内聚且更可维护。
即便你不喜欢单文件组件,你仍然可以把JavaScript、CSS分离成独立的文件然后做到热重载和预编译。

& lt; !——, my-component.vue ——比; 　　& lt; template> 　　,& lt; div>却;能够will  be  pre-compiled
　　& lt;/template> 　　 　　& lt; script  src=https://www.yisu.com/zixun/薄?my-component.js "> 　　

以上是“Vue单文件组件怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

Vue单文件组件怎么用