您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

vue规范风格指南学习

文章目录

  • vue规范-风格指南
    • 1、**组件名应该始终是多个单词的**
    • 2、**组件的 `data` 必须是一个函数。**
    • 3、**Prop 定义应该尽量详细。**
    • 4、**总是用 `key` 配合 `v-for`。**
    • 5、[避免 `v-if` 和 `v-for` 用在一起](https://cn.vuejs.org/v2/style-guide/#避免-v-if-和-v-for-用在一起必要)
    • 6、使用scoped作用域
  • 强烈推荐
    • **把每个组件单独分成文件。**
    • **[单文件组件](https://cn.vuejs.org/v2/guide/single-file-components.html)的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)**
    • **应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 `Base`、`App` 或 `V`。**
    • **只应该拥有单个活跃实例的组件应该以 `The` 前缀命名,以示其唯一性。**
    • **和父组件紧密耦合的子组件应该以父组件名作为前缀命名。**
  • 推荐优先级B
    • 1、把每个组件单独分成文件
    • 2、单文件组件名称:大写开头或者横线连接
    • 3、**和父组件紧密耦合的子组件应该以父组件名作为前缀命名。**
    • 4、**对于绝大多数项目来说,在[单文件组件](https://cn.vuejs.org/v2/guide/single-file-components.html)和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。**
    • 5、**在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 [JSX](https://cn.vuejs.org/v2/guide/render-function.html#JSX) 中应该始终使用 kebab-case。**
    • 6、传递方法时,都用短横线命名。
    • 7、**多个 attribute 的元素应该分多行撰写,每个 attribute 一行。**
    • 8、js中驼峰命名会自动转换成横线命名。
    • 9、**组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法。**
    • 10、**应该把复杂计算属性分割为尽可能多的更简单的 property。**
        • 好例子
    • 11、**指令缩写 (用 `:` 表示 `v-bind:`、用 `@` 表示 `v-on:` 和用 `#` 表示 `v-slot:`) 应该要么都用要么都不用。**
    • 12、**元素 (包括组件) 的 attribute 应该有统一的顺序。**
    • 13、一个理想的 Vue 应用是 prop 向下传递,事件向上传递的

vue规范-风格指南

1、组件名应该始终是多个单词的

避免跟现有的以及未来的 HTML 元素相冲突,因为所有的 HTML 元素名称都是单个单词的。

eg. TodoItem

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

data: function () {  
    return {
        foo: 'bar'   
    } 
}

避免共享组件data,让每个组件独立管理自己的数据

3、Prop 定义应该尽量详细。

在你提交的代码中,prop 的定义应该尽量详细,至少需要指定其类型。

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

4、总是用 key 配合 v-for

5、避免 v-ifv-for 用在一起

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

<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

6、使用scoped作用域

强烈推荐

把每个组件单独分成文件。

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

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

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

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue

只应该拥有单个活跃实例的组件应该以 The 前缀命名,以示其唯一性。

这不意味着组件只可用于一个单页面,而是每个页面只使用一次。这些组件永远不接受任何 prop,因为它们是为你的应用定制的,

components/
|- TheHeading.vue
|- TheSidebar.vue

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

如果一个组件只在某个父组件的场景下有意义,这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件,所以这样做可以把相关联的文件排在一起。

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

推荐优先级B

1、把每个组件单独分成文件

2、单文件组件名称:大写开头或者横线连接

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

4、对于绝大多数项目来说,在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。

由于 HTML 是大小写不敏感的,在 DOM 模板中必须仍使用 kebab-case。

Vue.component('MyComponent', {
  // ...
})
Vue.component('my-component', {
  // ...
})
import MyComponent from './MyComponent.vue'
export default {
  name: 'MyComponent',
  // ...
}

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

props: {
  greetingText: String
}
<WelcomeMessage greeting-text="hi"/>

6、传递方法时,都用短横线命名。

7、多个 attribute 的元素应该分多行撰写,每个 attribute 一行。

8、js中驼峰命名会自动转换成横线命名。

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

10、应该把复杂计算属性分割为尽可能多的更简单的 property。

好例子

computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}

11、指令缩写 (用 : 表示 v-bind:、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。

12、元素 (包括组件) 的 attribute 应该有统一的顺序。

  1. 定义 (提供组件的选项)
    • is
  2. 列表渲染 (创建多个变化的相同元素)
    • v-for
  3. 条件渲染 (元素是否渲染/显示)
    • v-if
    • v-else-if
    • v-else
    • v-show
    • v-cloak
  4. 渲染方式 (改变元素的渲染方式)
    • v-pre
    • v-once
  5. 全局感知 (需要超越组件的知识)
    • id
  6. 唯一的 attribute (需要唯一值的 attribute)
    • ref
    • key
  7. 双向绑定 (把绑定和事件结合起来)
    • v-model
  8. 其它 attribute (所有普通的绑定或未绑定的 attribute)
  9. 事件 (组件事件监听器)
    • v-on
  10. 内容 (覆写元素的内容)
    • v-html
    • v-text

13、一个理想的 Vue 应用是 prop 向下传递,事件向上传递的


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进