美文网首页
Vue风格指南(A)

Vue风格指南(A)

作者: 好遠 | 来源:发表于2018-11-18 22:31 被阅读0次

优先级A(必要的)

组件名

除了App外,其他组件名应为多单词组成的,因为HTML元素都是单单词的,这样可以避免冲突
例如:
todo-item
TodoItem

组件中的data必须是一个返回一个对象的函数。

因为组件可以有多个实例,不同实例之间数据应该是独立的,如果data是对象,那么所有同一个组件的所有实例的数据都是相同的。不同函数的作用域相互独立,因此只要data由一个函数返回一个对象,就可以实现多个实例的相互独立。

例子:

data: function () {
  return {
    listTitle: '',
    todos: []
  }
}

Prop定义

Prop的定义要尽量详尽,至少指定其类型。

不推荐:

props:['title']

推荐:

props:{
  title: String
}

v-for设置键值

总是用key配合v-for

为组件样式设置作用于

顶级App组件的样式可以是全局的,而其他的组件样式应该要设置作用域。

方法:
scoped、css modules、”BEM约定“或者单纯加上自定义前缀pro-className。

例子:
不推荐:

<template>
  <button class="btn btn-close">X</button>
</template>

<style>
.btn-close {
  background-color: red;
}
</style>

推荐:

<template>
  <button class="button button-close">X</button>
</template>

<!-- 使用 `scoped` 特性 -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}

.button-close {
  background-color: red;
}
</style>
<template>
  <button :class="[$style.button, $style.buttonClose]">X</button>
</template>

<!-- 使用 CSS Modules -->
<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>
<template>
  <button class="c-Button c-Button--close">X</button>
</template>

<!-- 使用 BEM 约定 -->
<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>

私有属性名

在插件、混入等扩展中始终为自定义的私有属性使用 $_ 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_)。

详解
Vue 使用 _ 前缀来定义其自身的私有属性,所以使用相同的前缀 (比如_update) 有覆写实例属性的风险。即便你检查确认 Vue 当前版本没有用到这个属性名,也不能保证和将来的版本没有冲突。
对于 $ 前缀来说,其在 Vue 生态系统中的目的是暴露给用户的一个特殊的实例属性,所以把它用于_私有_属性并不合适。
不过,我们推荐把这两个前缀结合为 $_,作为一个用户定义的私有属性的约定,以确保不会和 Vue 自身相冲突。

不推荐:
updata: function(){}
_updata: function(){}
$updata: function(){}

推荐:
$_nameSpace_updata: function(){}

相关文章

  • Vue文档学习(第1遍)

    Vue教程: Vue API: Vue风格指南: Cookbook

  • VUE风格指南

    title: 风格指南type: style-guide 这里是官方的 Vue 特有代码的风格指南。如果在工程中使...

  • Vue 开发起步指南

    必须通读的文档 Vue 2.x 核心文档 Vuex 状态管理文档 Vue router 路由文档 Vue 风格指南...

  • vue学习第一课之vue的推荐风格指南

    vue推荐风格指南: 先把思维导图记下来了,后期再继续补充相关的吧 官方风格指南:https://cn.vuejs...

  • vue开发规范

    来自掘金的分享JS规范css规范vue风格指南官方文档

  • Vue风格指南

    风格指南官方文档 一、优先级A 1、组件名为多个单词 避免跟html元素相冲突。根组件除外。 2、组件data必须...

  • Vue风格指南(A)

    优先级A(必要的) 组件名 除了App外,其他组件名应为多单词组成的,因为HTML元素都是单单词的,这样可以避免冲...

  • VUE风格指南

    组件名为多个单词必要组件名应该始终是多个单词的,根组件 App 除外。 组件数据必要组件的 data必须是一个函数...

  • Vue风格指南

    a.优先级A -- 私有属性名 在插件、混入等扩展中始终为自定义的私有属性使用 $_ 前缀。并附带一个命名空间以回...

  • vue风格指南

    规则分为四大类:1.必要的: 2.强烈推荐的: 3.推荐的 4.谨慎使用

网友评论

      本文标题:Vue风格指南(A)

      本文链接:https://www.haomeiwen.com/subject/qqdnfqtx.html