Configuration description and componentization development steps of various documents in the scaffold

Single file component

    1、 First create a components Folder , Used to place components defined later （ Configuration object ）
    2、 Where the code is written , Generally, you need to create a App.vue The file of , It is used to assemble defined components ,App In essence, it is also a component
    3、vm Finally, the instance only needs to be App Just register the component and render it
     One .vue file , It contains the structural style and behavior of components , In fact, the essence is to configure objects （ file ）
     Spelling highlight It's quite clear   But modularity is needed   You need to build an environment

eslint Disabled

 1.    // Partially disable an error prompt , You can only disable eslint error
    /* eslint-disable no-unused-vars */

 2.    //package.json Found in eslintConfig term , Global configuration disables some error prompts , Only fixed error types can be configured , If you need to configure later , There are many error types to configure
    "rules": {
        "no-unused-vars":"off"
        }

3.   // The development phase is closed directly eslint The prompt function of

    vue.config.js among
    module.exports = {
        //   Write what you want to configure to cover the system's own
        // close ESLint The rules of
         lintOnSave: false
    }

Component template parsing  

Vue There are two ways to render ：

1.

  adopt render Function to render App Components , It internally calls a method ,h, Inside this method

  I wrote a parser function

  This version is used later , Because it has no parser , Later, the code size will be small

render：h => h(App)

  // render:(h) => {

  //   return h(App)

  // }

2. components Certified components

It is necessary to introduce... With template parser vue edition , Then it will cause the later packaging volume to be too large , Browser loading efficiency is low  

import Vue from 'vue'    // This is introduced by default vue The version does not include a template parser

import Vue from 'vue/dist/vue.esm'    // Manually introduced with template parser Vue edition

  // components:{

  //   App

  // },

  // template:'<App/>'

  Component development steps

Static page

Split components

Assemble the components （ Defining components 、 Certified components 、 Use components ）

Rendering Components

Dynamic pages

1. Initialize the dynamic display page

        （1） Design data

                  Design data specification

                      What is the format of the data ？

                           See the function of the page , Lists are generally arrays , Generally, it is an array of objects

                      Where is the data ？

                           It depends on which component the data is used in or which components
                            If the data is only used in which component , Then the data is defined in the data among
                           If the data is used in which components , Then the data should be written in the public parent component of these components

        （2） Data presentation ：  Data that can be directly displayed

                                      Data that needs calculation to be displayed

2. Interaction  

v-bind

If the attribute is written in html The tag is bound to data , With or without v-bind

If the attribute is written on the component tag , So that is props To transfer data , With or without v-bind

If you don't write a colon, pass a string , If it is written, it is dynamic data

After passing data in the component , You need to declare the receipt in another component

<Main :todoList="todoList"></Main>


props:['todoList'], 

checked

A single checkbox Can read but write There are two options

      1、 Use checked Late cooperation click   Realize readable and writable

      2、 Use vmodel With calculated attributes get and set Realize readable and writable