好资源导航 » 文章资讯 » Vue单文件组件的如何使用方式介绍

Vue单文件组件的如何使用方式介绍

2023-09-27 09:52:16 58

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

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

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

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

这是一个文件名为hello.vue的简单实例







p{
font-size:2em;
text-algin:center
}

现在我们获得：

正如我们说过的，我们可以使用预处理器来构建简洁和功能更丰富的组件，比如pug,babel,和stylus


div
p{{greeting}}world!
other-component





p
font-size:2em;
text-align:center

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

怎么看待关注点分离？

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。