Vue specification guide

This article mainly summarizes some specifications and optimization in the development of Vue, in order to reduce the initial development of the project developers in writing code appear some doubts, and provide some optimization schemes; Of course, this article is mainly some personal summary and reference, readers who have different opinions are welcome to leave a comment.

Standard classification

  • * * * * *: Five stars, must obey
  • * * * *: four stars for improved readability and development experience
  • * * *: Samsung, offering the best of many solutions

* * * * *

The component’s data must be a function

When data is used in any component (except new Vue), the return value must be an object.

Description:

When data is just an object, its component is shared among all instances, rather than each component instance having its own state. To meet current requirements, each instance needs to generate its own data, so calling a function to return an object can solve this problem.

export default {
	// ...
	data () {
		return {
    		// ...}}}// In main.js, new Vue is the root instance, and you can use the object directly
new Vue({
    data: {
    	// ...}})Copy the code

The use of Props

At the time of project development, prop declarations should be as detailed as possible

  • In a development environment, Vue will issue a warning when a data format error is provided to help catch the source of the error
  • Easier to read

  1. Type: String, Number, Boolean, Array, Object, Date, Function, Symbol

  2. Required

  3. Default: indicates the default value

  4. Validator: a function that validates data

props: {
    name: String.name: {
    	type: String.required: true
    },
    name: {
    	type: String.default: 'lv'
    },
    name: {
    	type: String.validator: function (value) {
        	// value must match one of the following strings
        	return ['joy'.'anger'.'sadness'].indexOf(value) ! = = -1}},obj: {
    	type: Object.required: true
    },
    Obj: {
    	type: Object.// Default values for the types of Object and Array must be obtained from a factory function
        default: funtion () {
        	return {
            	msg: 'vue prop'.status: 0.// ...}}}}Copy the code

V-for Sets the key value

A key must always be used in conjunction with v-for on components

<ul>
	<li
    	v-for="item in todos"
        :key='item.id'
    >
    	{{ item.txt }}
    </li>
</ul>

data () {
	return {
    	todos: [{id: 'yhg'.txt: 'asdvlkanlv'
            },
            {
            	id: 'arg'.txt: 'zdnfn'
            },
            // ...]}}Copy the code

V-if and V-for are never in the same boat

Never apply v-if and V-for to the same element

  • If the following situation occurs, the original data should be processed first, and then used on the page
<li v-for="item in users" v-if="item.isActive">
{{item.name}}
</li>

// -----------------------------------------------
/ / recommend
<ul>
	<li v-for="item in activeUsers" :key="item.id">
		{{item.name}}
	</li>
</ul>

data () {
	return {
    	users: [{id: '789'.name: 'vue'.isActive: true
            },
            {
            	id: '456'.name: 'lv'.isActive: true
            },
         	{
            	id: '123'.name: 'an'.isActive: false}}}]computed: {
    activeUsers () {
    	return this.users.filter(item= > {
           return item.isActive === true)}}Copy the code

The CSS style setting scope of the component

In real project development, styles for App components, layout components, global components, etc., can be global, and other components should have their own scoped. And when setting styles, use class instead of just relying on scoped.

<template>
	<input class='search-input search-txt' />
</template>

<! -- Using scoped -->
<style scoped>
.search-input {
	border-radius: 4px;
}
.sezrch-txt {
	color: blue;
}
</style>
<! - * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -- >
<template>
	<input :class="[$style['search-input'], $style['search-txt']]" />
</template>

<! -- Use CSS Modules -->
<style module>
.search-input {
	border-radius: 4px;
}
.sezrch-txt {
	color: blue;
}
</style>
Copy the code

The custom tag name cannot be a single word

Custom tag names should always be multiple words. This avoids conflicts with existing and future HTML elements, because all HTML element names are single words

Vue.component('base-btn', { // ... }) export default { name: 'BaseBtn', // ... } <! -- ********************* --> <template> <base-btn></base-btn> </template>Copy the code

* * * *

Component naming rules

It is best to name groups by name and be case-sensitive. Mixing file names may cause problems in case-insensitive file systems, or use horizontal lines

  • See of knowledge meaning

  • Component name rule

    1. Always keep words uppercase (PascalCase)
    2. Always maintain horizontal connection (kebab-case)
components/ |- MyComponent.vue <! -- ******************** -> components/ |- my-compoment.vueCopy the code

The case of component names in templates

For actual project development specifications, component names in single-file components and string templates should always be PascalCase; But always kebab-case in DOM templates.

  • HTML is case-insensitive and must be named kebab-case in DOM templates
  • Kebab-case naming is more visually distinguishable from single-word HTML elements
<template>
	<! -- Applies everywhere -->
	<my-compoment></my-compoment>
</template>
Copy the code

JS/JSX component name case

Component names in JS/JSX should always be PascalCase, although kebab-case strings can be used in simpler applications where only Vue.com Ponent is used for global component registration

Vue.component("MyComponent", { // ... })

Vue.component("my-component", { // ... })

import MyComponent from './MyComponent.vue'
export default {
	name: 'MyComponent'.// ...
}
Copy the code

Prop named case

When declaring a prop, it should always be named camelCase, and kebab-case should always be used in templates and JSX

<my-component is-load='true'></my-component>

props: {
	isLoad: Boolean
}
Copy the code