Vue core knowledge summary (super classic, real-time update)

1. Getting started with Vue Basics

1.1 scaffold environment installation Vue

Installation of scaffold

# Install @ vue/cli
cnpm i -g @vue/cli

1.2. Create Vue project

Create a project folder locally, such as d:\project, run cmd in this directory, and then execute the following command:

# Create project
vue create myapp

# Select the installation configuration as prompted

# After the project is created successfully
cd myapp
npm run serve

After the project is successfully started, access it in the browser http://localhost:8080

1.3. Simplify project code

Project directory structure

- public The root directory of the local server
- src Source code
	- assets  Static resource files, such as pictures, videos, etc
	- components Manage directories for common components
	- router Directory for managing routes
	- store Directory of management status
	- views Manage the catalog of view components
	- App.vue Root component
	- main.js Entry file
- package.json npm Configuration file for

Streamlining:

Yes, app Vue reduction

<template>
  <router-view></router-view>
</template>
<style>
    html,body{
        margin: 0;
        padding: 0;
        height: 100%;
    }
</style>

The remaining directories are deleted according to the project requirements.

2. Core concepts of Vue

2.1 instructions

2.1.1 text instruction

v-text
v-html

2.1.2 process control

v-if
v-else-if
v-else
v-for
- What does the key attribute mean?
- When used with < template >, the key attribute should be declared on the child element
- ```
<template v-for="i in 10">
  <div :key="i">{{i}}</div>
</template>
```

2.1.3 display and hiding

v-show
- Difference from v-if:
  - v-show uses the display attribute to control the display and hiding of elements
  - When the v-if value is false, it will not be rendered to the page
  - Execution efficiency analysis

2.1.4. Attribute binding

v-bind
- The value of v-bind must be a variable or js expression declared in data

style binding

: style = "" value is the object, and the attribute of the object is the style element of css (style attribute name is named in the form of small hump)

: style = "" how to write:

<template>
	<!-- Method 1: the value is a literal object -->
	<div :style="{color:'red',fontSize:'18px'}">
    </div>

	<!-- Write method 2. The value is an array -->
	<div :style="[s1,s2]">
    </div>

	<!-- Write two, and the value is a variable -->
	<div :style="big">
    </div>
</template>
<script>
 export default {
	data(){
        return {
            s1:{color: 'red'},
            s2:{fontSize: '18px'},
            big: {
                fontSize: '20px'
            }
        }
    }
 }
</script>

class binding

: class = "" value is the style name defined in css

: class = "" value is written as follows:

<template>
   <div>
     <!-- Write method 1. The value is an alphabetic string -->
     <div :class="'red'"></div>

     <!-- Write two, value as object -->
     <div :class="{red: true}"></div>

     <!-- Writing method 3: the value is an array -->
     <div :class="[s1,s2]"></div>

     <!-- Write four, and the value is a variable -->
     <div :class="s1"></div>
   </div>
</template>

<script>
  export default {
    data(){
      return {
        s1: 'red',
        s2: 'big'
      }
    }
  }
</script>

<style scoped>
.red{
  color: red;
}
.big{
  font-size: 20px;
}
</style>

2.1.5 event handling

v-on

Abbreviation@

Gets the event object of the current element

<template>
  <div>
    <button @click="handleClick($event)">Button</button>
    <input type="text" @keypress="handleInput($event)">
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(e){
      //Gets the event object of the current element
      console.log(e)
      //Gets the DOM object of the clicked element
      console.log(e.target)
    },
    handleInput(e){
      //Gets the value of the current input box
      console.log(e.target.value)
      //Gets the currently entered status code
      console.log(e.keyCode)
    }
  }
}
</script>

Event modifier

<template>  <div>    <!-- Prevent event bubbling -->    <button @click.stop="add">Button</button>    <!-- When its own element is triggered, the event function will be executed. If the event is passed by bubbling, it will not be triggered -->    <button @click.self="add">Button</button>    <!-- Priority execution in event bubble -->    <button @click.capture="add">Button</button>    <!-- Block browser default behavior -->    <button @click.prevent="add">Button</button>    <!-- After this rendering is completed, it will be triggered only once -->    <button @click.once="add">Button</button>    <!-- ignore event.preventDefault() Behavior, not with prevent Modifiers are used at the same time -->    <button @click.passive="add">Button</button>  </div></template>

Key modifier
- .enter
- .tab
- . delete (capture delete and backspace keys)
- .esc
- .space
- .up
- .down
- .left
- .right
System modifier
- .ctrl
- .alt
- .shift
- .meta

2.1.6 form binding

v-model

Modifier
- . trim remove leading and trailing spaces
- . number if it starts with a number, if there is non numeric content in the middle of the content, only the number in the first part will be retained; If it starts with a non number, it is processed as a string type
- . lazy bidirectional binding is performed only when the focus is lost
If you want to bind multiple elements of the checkbox, the v-model="array" value should be the array type

<template>  <div>    <!-- Text input box -->    <input type="text" v-model="val">    <!-- Text field -->    <textarea v-model="vals"></textarea>    <!-- radio button -->    <input type="radio" v-model="sex" value="male">male    <input type="radio" v-model="sex" value="female">female    <!-- check box -->    <input type="checkbox" v-model="hobby" value="Basketball">Basketball    <input type="checkbox" v-model="hobby" value="Football">Football    <input type="checkbox" v-model="hobby" value="Volleyball">Volleyball    <!-- Drop down box -->    <select v-model="word">      <option value="A">A</option>      <option value="B">B</option>      <option value="C">C</option>    </select>  </div></template><script>export default {  data(){    return {      val: '',      vals: '',      sex: 'male',      hobby: ['Basketball'], //If there is a value, this item is selected by default. Word: ''}} < / script >

2.1.7 compilation processing

v-pre
- Skip the current element and its child elements without compiling
v-once
- Render only once
v-cloak
- It will remain on the element until Vue is compiled and disappears automatically

2.1.8 slot

v-slot

Abbreviation#
Use only on < template > components

Example: custom component Src / components / goodcard vue

<template>  <div>      <hr>      <h2>Commodity card</h2>      <hr>      <div>          Item title:<slot name="title"></slot>      </div>      <hr>      <div>          Commodity price:<slot name="price"></slot>      </div>  </div></template>

Use goodcard Vue component

<template>  <div>      <goods-card>        <template v-slot:price>          100        </template>        <template #Title > < span style = "color: Red" > this pair of jeans < / span > < / template > < / goods card > < / div > < / template > < script > Import goodcard from '/ components/GoodsCard. vue'export default {  components: {    GoodsCard  }}</script>

2.2 options

2.2.1 data options

data
- Within a component, it must be a function that returns the initial object
- In order to ensure that multiple instances of the current component will not directly share the data in data
props
- Receive value passed by parent component
- An object that defines the prop attribute of. The object has four attributes:
  - Type: sets the data type of the current attribute. You can specify multiple types in the form of an array, for example: [String,Number]. Eight types are supported, namely String,Number, Boolean, object, function, array, date and symbol
  - Default: set the default value, any type
  - Required: set whether the current property is required. It is required when the value is true
  - validator: sets the verification function of the current attribute value. When the return value of the function is true, it passes the verification. Code example:
  - ```
  props: {    type: {        validator: function(val){            return ['success','danger','error'].includes(val)        }    }}
```
methods
- Used to define functions

watch

Used to listen for changes in responsive data

export default {	data(){		return {            i: 0,            obj: {                a: {                    b: {                        c: 0                    }                }            }        }	},    watch: {        i(){            //Listen for changes in i}, obj: {handler() {/ / listen for changes in the object}, deep: true / / listen deeply. You can only listen for changes in the object}}

computed
- Calculation properties
- There is a cache. When the dependent responsive data changes, it will be recalculated

2.2.2 DOM options

el
- Use the css selector or htmldomdocument object method to get the DOM element that already exists in the page and take it as the mount target of the Vue instance.
template
- Used to create VNode templates in custom components
- In the declared VNode template, the outermost layer can only have one root element

2.2.3 life cycle

beforeCreate
- Unable to get the properties and methods of vue instance
- Cannot get DOM object
created
- Can get the properties and methods of vue instances
- Cannot get DOM object
beforeMount
- Get the properties and methods of vue instance
- Cannot get DOM object
mounted
- Can get the properties and methods of vue instances
- Can get DOM objects
beforeUpdate
- When the responsive data in data changes, the page rendering will be triggered. This method will be called before page rendering
- The value of the response data obtained by this method is the modified value
updated
- Responsive data update triggers page rendering. This method will be called after page rendering
- Here you can get the updated DOM element object
beforeDestroy
destroyed
activated
deactivated
errorCaptured

2.2.4 resource options

filters
- filter
directives
- Custom instruction
- Hook function
  - bind
  - inserted
  - update
  - componentUpdated
  - unbind
- Parameters of hook function
  - el
  - binding
  - vnode
  - oldVnode
components

Programming VIP