时间:2021-05-26
在很多 vue项目中,我们使用 vue.component 来定义全局组件,紧接着用 new vue(el: ”)在每个页面内指定一个容器元素
这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图。
但挡在更复杂的项目中,或者你的前端完全由 javascript 驱动的时候,下面这些缺点将变得非常明显:
文件扩展名为 .vue 的 sigle-file components(单文件组件)为以上所有问题提供了解决方法,并且还可以使用 webpack 或 browserify 等构建工具
这是一个文件名为 hello.vue的简单实例
<template> <p> {{ gretting}} world! </p></template><script> module.exports = { data: function(){ return { greeting: 'hello' } } }</script><style scoped>p { font-size: 2em; text-algin: center}</style>现在我们获得:
正如我们说过的,我们可以使用预处理器来构建简洁和功能更丰富的组件,比如 pug,babel,和 stylus
<template lang="jade"> div p {{greeting}} world! other-component </template><script> import default{ data(){ return{ greeting:'hello' } }, components: { OtherComponent } }</script><style lang='stylus' scoped> p font-size: 2em; text-align: center </style>这些特定的语言只是例子,你可以只是简单地使用 Babel,TypeScript,SCSS,PostCSS - 或者其他任何能够帮助你提高生产力的预处理器。如果搭配 vue-loader 使用 Webpack,它也是把 CSS Modules 当作第一公民来对待的。
怎么看待关注点分离?
一个重要的事情值得注意,关注点分离不等于文件类型分离。
在现代 UI 开发中,我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来,把它们划分为松散耦合的组件再将其组合起来更合理一些。
在一个组件里,其模板、逻辑和样式是内部耦合的,并且把他们搭配在一起实际上使得组件更加内聚且更可维护。
即便你不喜欢单文件组件,你仍然可以把 JavaScript、CSS 分离成独立的文件然后做到热重载和预编译。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文将详细介绍Vue单文件组件概述在很多Vue项目中,使用Vue.component来定义全局组件,紧接着用newVue({el:'#container'})在
本文介绍了vue2.0封装model组件的方法,分享给大家,希望对大家有所帮助单文件组件使用单文件组件封装model的模板、逻辑和样式,之后就可以在页面中调用此
实现此例您可以学到:vue-cli的基本应用父组件如何向子组件传递值单文件组件如何引入scssv-on和v-for的基础应用源码下载一、搭建vue开发环境1)更
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下:1.如何创建组件1.新建一个组件,如:在goods文件夹下新建goodsList.vue
1、示例代码采用vue单文件组件,使用moment插件格式化日期{{date|dateFormat}}importmomentfrom'moment';impo