当前位置: 首页 > Web前端 > vue.js

vue官方风格指南分析

时间:2023-03-31 15:56:03 vue.js

button{background-color:red;}Vue有一个官方风格指南,我从中提取了一些我认为比较重要但经常被忽视的点,并列出它们并进行了一些分析。也可以直接去styleguide看:https://cn.vuejs.org/v2/style...单文件组件文件的文件名要么单词开头大写,要么横排连接MyComponent.vue或my-component.vue的行设置组件样式的作用域除了根组件或布局组件之外,还必须添加scoped设置作用域,以免影响其他地方的样式。永远不要在同一个元素上同时使用v-if和v-for。如果要过滤List,使其隐藏不合格项,可以使用计算属性预过滤合格数组反例:xx

正确示例:xx
computed:{activeUsers(){returnthis.users.filter((item)=>{returnitem.isActive})}}好处:*过滤后的列表只会在`users`数组发生变化时重新计算,过滤效率更高。*使用`v-for="userinactiveUsers"`后,渲染时只遍历活跃用户,渲染效率更高。*对渲染层逻辑进行解耦,可维护性(对逻辑的更改和扩展)更强。如果要控制列表的显示,将v-if移动到外层容器元素反例:正确示例好处:*如上所述*通过将v-if移动到容器元素,我们不再检查列表中每个用户的shouldShowUsers。相反,我们只检查一次,如果shouldShowUsers为假,则不评估v-for。Prop尽可能详细地定义了prop,它没有使用数组,而是使用对象来列出更多选项,至少需要指定其类型。好处:描述了组件的API,很容易理解组件的用法;在开发环境中,如果向组件提供格式错误的prop,Vue会发出警告以帮助您捕获潜在的错误源。Propname格式props应该使用驼峰式大小写,在模板和JSX中使用时,应该用水平线连接(HTML约定)。正确示例:props:{greetingText:String}组件名称应始终为多个单词。组件名称应始终为多个单词,以避免与未来的HTML元素发生冲突。例如exportdefault{//name:'Todo',不推荐name:'TodoItem'}基础组件名是针对不包含全局状态(如vuexstore)、显示类、无逻辑或无状态的基础组件,如table、button、icon等,都应该以特定的前缀开头,风格统一,区别于其他功能组件反例:components/|-MyButton.vue|-VueTable.vue|-Icon.vue正确示例:组件/|-BaseButton.vue|-BaseTable.vue|-BaseIcon.vue组件/|-AppButton.vue|-AppTable.vue|-AppIcon.vuecomponents/|-VButton.vue|-VTable.vue|-VIcon.vue单例组件名对于每页只使用一次且不接受任何props(即内容硬编码)的组件(如公司标志在顶部,版权声明在底部),应以前缀命名,以显示其唯一性反例:components/|-Heading.vue|-MySidebar.vue正确示例:components/|-TheHeading.vue|-TheSidebar.vue紧耦合组件名对于与父组件紧耦合的子组件(即只在指定的父组件中使用),命名方式要规范统一:父组件名+自身name,因为编辑器通常是按照字母顺序组织文件的,所以这样做可以把相关的文件排在一起。注意:这里的父组件也是自定义组件,比如自定义列表组件,它还有一个自定义列表项子组件和一个自定义按钮子组件,它们只在自身使用。现在应该规范子组件的命名(components父组件使用文件夹形式,包括index.vue和子组件文件夹):components/|-TodoList/|-Item/|-index.vue|-Button.vue|-index.vue或名称简单相似:components/|-TodoList.vue|-TodoItem.vue|-TodoButton.vue正确示例:components/|-TodoList.vue|-TodoListItem.vue|-TodoListItemButton.vuecomponents/|-SearchSidebar。vue|-SearchSidebarNavigation.vue自闭组件对于没有内容的组件,在允许的情况下使用自闭形式,提醒用户不仅没有内容,而且故意没有内容,代码更简洁。允许的情况:单文件组件、字符串模板、JSX不允许的情况:DOM模板(在某些HTML元素中,例如
      、和