Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Code is written for people to see, incidentally to the machine to run!

preface

Vue in the introduction of the script part, this article introduces the template part of the code specification, only for reference, please spray!

The body of the

  • The value of the class of the outermost div of a single-file component must be a short horizontal spelling of the vUE file name.

    Short horizontal spelling: kebab-case

    Paca spelling/big camel spelling: PascaCase

    Spelling: camelCase

    // todoitem. vue <template> <div class="todo-item"> </div> </template> <script> export default {name: 'TodoItem', } </script>Copy the code

  • Abbreviate instructions. Use abbreviations.

    • Dynamically bound propertiesv-bind === :
    • Dynamically bound eventsv-on === @
    • Dynamically bound slotv-slot === #
    // dynamic binding attribute <input :value="newTodoText" :placeholder="newTodoInstructions" > // dynamic binding event <input @input="onInput" <template #header> <h1>Here might be a page title</h1> </template>Copy the code

  • The order of element attributes

    • Define (provide options for components)

      is

    • List rendering (creating multiple variations of the same element)

      v-for

    • Conditional rendering (whether the element is rendered/displayed)

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

    • Render (Change how elements are rendered)

      v-pre v-once

    • Global awareness (requires knowledge beyond components)

      id

    • Unique attributes (attributes that require unique values)

      ref key

    • Bidirectional binding (combining bindings with events)

      v-model

    • Other attribute attributes (all plain bound or unbound attributes)

    • Events (Component event listeners)

      v-on

    • Content (overrides the content of the element)

      v-html v-text

    <el-form ref="ruleForm" :model="form" :rules="rules" inline style="margin: 8px 0 0 8px;" <el-select V-model ="form.mirrorId" placeholder=" 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=" version" prop="version"> <el-select V-model ="form.version" clearable placeholder=" select version" style="width:200px" no-data-text=" select image 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=" placeholder "> </el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSearch('ruleForm')">  </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>Copy the code

  • The elements of multiple attributes should be written in multiple lines, with each attribute on the same line.

    If the number of attributes is smaller than three, you can write attributes in a line. However, the > before the end of the start label or the /> before the end of the automatic close label cannot contain Spaces

  • Values of non-empty HTML atttibute must always have double quotation marks

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

  • V-for must set the key value and do not use index.

    When v-for renders the list without adding or deleting, index can be used as the key, but ID is preferred

    <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>
Copy the code

  • V-if and v-for cannot be used on the same element at the same time. Same case.

    When Vue processes instructions, V-for has a higher priority than V-if

    V-for is used separately from V-if, usually put v-if in the outermost layer of V-for

  • Inline style colon: trailing and semicolon; Must be followed by a space. (Single style semicolon; Don’t need space after)

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

  • In contrast to script tags, template tags use single quotes, not double quotes (except in special envoy cases), as above.

  • When the same DOM node is generated more than twice, you need to use V-for traversal.

    // Bad <el-option label=" success "value="1" key="1" > </el-option> <el-option label=" failure" value="0" key="0" > </el-option> <el-option label=" pending "value="-1" key="-1" > </el-option> // Good export const statusOptions = [{label: 'successful ', value: '1'}, {value: label: 'failure', '0'}, {label: 'pending' value: '-1' } ] <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" > </el-option>Copy the code

  • Templates contain only simple expressions; complex expressions should be refactored to evaluate properties or methods.

Reference:

Vue official website style guide