【vue】推荐的风格指南(总结自官网)
创始人
2024-03-23 23:23:36
0

组件名为多个单词

组件名应该始终是多个单词的,根组件 App 以及 、 之类的 Vue 内置组件除外。

Vue.component('todo-item', {// ...
})
export default {name: 'TodoItem',// ...
}

组件的 data 必须是一个函数。

Prop 定义应该尽量详细。

// 更好的做法!
props: {status: {type: String,required: true,validator: function (value) {return ['syncing','synced','version-conflict','error'].indexOf(value) !== -1}}
}

为 v-for 设置键值 总是用 key 配合 v-for。

    {{ todo.text }}

避免 v-if 和 v-for 用在一起

永远不要把 v-if 和 v-for 同时用在同一个元素上。

    {{ user.name }}

为组件样式设置作用域

这条规则只和单文件组件有关。



私有 property 名

使用模块作用域保持不允许外部访问的函数的私有性。如果无法做到这一点,就始终为插件、混入等不考虑作为对外公共 API 的自定义私有 property 使用 $_ 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 $yourPluginName)

// 甚至更好!
var myGreatMixin = {// ...methods: {publicMethod() {// ...myPrivateFunction()}}
}function myPrivateFunction() {// ...
}export default myGreatMixin

单文件组件文件名的大小写强烈推荐

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。

components/
|- MyComponent.vuecomponents/
|- my-component.vue

基础组件名强烈推荐

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 Base、App 或 V。

紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

完整单词的组件名强烈推荐

组件名应该倾向于完整单词而不是缩写。

components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

Prop 名大小写

在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case。

props: {greetingText: String
}

模板中简单的表达式强烈推荐

组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法。


{{ normalizedFullName }}
// 复杂表达式已经移入一个计算属性
computed: {normalizedFullName: function () {return this.fullName.split(' ').map(function (word) {return word[0].toUpperCase() + word.slice(1)}).join(' ')}
}

相关内容

热门资讯

腾讯音乐版权问题引争议,音乐平... 腾讯音乐版权问题引争议,音乐平台版权“壁垒”如何打破?我觉得这个问题的话还有待研究,相信他们会处理好...
华安证券给予宇通客车买入评级,... 华安证券7月7日发布研报称,给予宇通客车(600066.SH)买入评级。评级理由主要包括:1)25M...
“良渚文明的五重奏”国风系列动... 中新网杭州7月7日电(记者 王逸飞)在杭州良渚古城遗址申遗成功6周年之际,由中国对外书刊出版发行中心...
学习兽医难不难? 学习兽医难不难?学习兽医难。兽医就是各种动物的医生。既然是医生那就得考入医科大学,考入医科大学可不是...
国金证券:旗下的国金证券(香港...   炒股就看金麒麟分析师研报,权威,专业,及时,全面,助您挖掘潜力主题机会! 转自:证券时报人民财...
天士力资本荣膺“创业邦2025... 转自:天士力大健康2025年7月4日,创业邦正式发布“年度企业创投榜单”,天士力资本荣膺“2025企...
云铝股份:总经理李国维因工作变... 云铝股份7月7日公告,公司董事会收到李国维的书面辞职报告。因工作变动,李国维辞去公司董事、总经理等职...
恭喜!他俩宣布结婚 7月5日,《令人心动的offer》嘉宾郭旭和蔡昆廷晒照官宣结婚喜讯,蔡昆廷激动表示:“娶到了娶到了!...
谁知道就想漂洋过海来看你这类的... 谁知道就想漂洋过海来看你这类的电视剧漂洋过海这类电视剧其实现在非常,做纤枯他还是比较好看的,属于偶像...
《祖莹偷读》翻译“此子才器,非... 《祖莹偷读》翻译“此子才器,非诸生所及,中当远近。”1、他很有才华,所有学生都配陵销不如他,培游最终...