Vue 代码规范 template

vienceTang
1,073 阅读2分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

代码是写给人看的, 顺便给机器运行 !

前言

上文中介绍 vue 中的 script 部分，本文介绍 template 部分的代码规范，仅攻参考，请轻喷！

正文

  • 单文件组件最外层 div 的 class 的值须是该 vue 文件名称的短横拼写法。

    短横拼写法：kebab-case

    帕卡拼写法/大骆驼拼写法：PascaCase

    驼峰拼写法：camelCase

    // TodoItem.vue 文件
<template>
  <div class="todo-item">
    
  </div>
</template>

<script>
export default {
  name: 'TodoItem',
}
</script>

  • 指令缩写，统一使用简写形式。

    • 动态绑定属性 v-bind === :
    • 动态绑定事件 v-on === @
    • 动态绑定插槽 v-slot === #
    // 动态绑定属性
<input
  :value="newTodoText"
  :placeholder="newTodoInstructions"
>

// 动态绑定事件
<input
  @input="onInput"
  @focus="onFocus"
>

// 动态绑定插槽
<template #header>
  <h1>Here might be a page title</h1>
</template>

  • 元素 attribute 的顺序

    • 定义 (提供组件的选项)

      is

    • 列表渲染 (创建多个变化的相同元素)

      v-for

    • 条件渲染 (元素是否渲染/显示)

      v-if v-else-if v-else v-show v-cloak

    • 渲染方式(改变元素的渲染方式)

      v-pre v-once

    • 全局感知(需要超越组件的知识)

      id

    • 唯一的属性(需要唯一值的 attribute)

      ref key

    • 双向绑定 (把绑定和事件结合起来)

      v-model

    • 其他属性 attribute (所有普通的绑定或未绑定的 attribute)

    • 事件(组件事件监听器)

      v-on

    • 内容(覆写元素的内容)

      v-html v-text

    // 下面是以一个项目中的一个页面部分
<el-form
ref="ruleForm"
:model="form"
:rules="rules"
inline
style="margin: 8px 0 0 8px;"
>
<el-form-item label="镜像ID" prop="mirrorId">
  <el-select
    v-model="form.mirrorId"
    placeholder="请选择镜像ID"
    style="width:200px"
    @change="handleChange"
  >
    <el-option
      v-for="item in mirrorIdOptions"
      :key="item"
      :label="item"
      :value="item"
    >
    </el-option>
  </el-select>
</el-form-item>
<el-form-item label="版本" prop="version">
  <el-select
    v-model="form.version"
    clearable
    placeholder="请选择版本"
    style="width:200px"
    no-data-text="请先选择镜像ID"
  >
    <el-option
      v-for="item in versionOptions"
      :key="item"
      :label="item"
      :value="item"
    >
    </el-option>
  </el-select>
</el-form-item>
<el-form-item label="开发单编号" prop="reqId">
  <el-input
    v-model="form.reqId"
    clearable
    placeholder="请输入开发单编号"
    ></el-input>
</el-form-item>
<el-form-item>
  <el-button type="primary" @click="onSearch('ruleForm')"> 查  询 </el-button>
</el-form-item>
</el-form>
<el-row
v-if="nodeList.length > 0"
type="flex"
style="padding-left:10px;"
>
<div v-for="item in nodeList" :key="item">
    <div class="grid-title">
    {{ item }}
  </div>
</div>
</el-row>

  • 多个 attribute 的元素应该分多行撰写，每个 attribute 占一行，案例同上。

    attribute 小于 3个时，可以在一行内进行书写， 但是注意，在开始标签结束前的> 或自动闭合标签结束前的 />，不能有空格

  • 非空 HTML atttibute 的值须始终带有双引号

    <el-table
  border
  :data="detailList"
  :header-cell-style="{ backgroundColor: '#94e1e1', borderBottom: '1px #94e1e1 solid' }"
  style="width:100%"
>
</el-table>

  • v-for 必须设置 key值，且尽量不使用 index。

    在v-for渲染的列表不进行增删操作时，可以使用 index 作为 key 值，但是首选使用 id

    <el-row
  v-if="nodeList.length > 0"
  type="flex"
  style="padding-left:10px;"
>
  <div v-for="item in nodeList" :key="item">
      <div class="grid-title">
      {{ item }}
    </div>
  </div>
</el-row>

  • v-if 和 v-for 不能同时用在同一个元素上，案例同上。

    当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级

    v-for 与 v-if 分开 使用， 一般将 v-if 放在 v-for 的最外层

  • 行内样式 style 中冒号 : 后和分号 ; 后必须有空格。（单个样式分号 ; 后不需要空格）

    <div style="width: 100px; height: 100px; backgroundColor: shyblue;"></div>

  • 与 script 标签中相反， template 标签使用单引号，不使用双引号（特使情况除外），案例同上。

  • 当相同的 DOM 节点超过两次，则需要使用 v-for 遍历生成。

    // Bad
<el-option
  label="成功"
  value="1" 
  key="1"
>
</el-option>
<el-option
  label="失败"
  value="0" 
  key="0"
>
</el-option>
<el-option
  label="待定"
  value="-1" 
  key="-1"
>
</el-option>

// Good
export const statusOptions = [
  { label: '成功', value: '1' },
  { label: '失败', value: '0' },
  { label: '待定', value: '-1' }
]
<el-option
  v-for="item in statusOptions"
  :key="item.value"
  :label="item.label"
  :value="item.value"
>
</el-option>

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

参考:

Vue 官网风格指南

avatar
文章
阅读
粉丝