1. Initialize scaffolding

1. What is scaffolding

It is a tool to help us better manage code, package code and other resources, ensure project specifications and some rules

  1. Vue scaffolding is a standardized development tool (development platform) officially provided by Vue.
  2. The latest version is 4.x.
  3. Documentation: cli.vuejs.org/zh/.

2. Install VUE scaffolding

You need to install nodeJS and WebPack before installing VUe-CLI

Step 1 (first time only) : Install @vue/ CLI globally.

Enter the command NPM install -g@vue /cli

Step 2: Switch to the directory where you want to create the project and use the command to create the project

Reopen CMD as an administrator and enter the command: vue create XXXX

The first one is selected by default

Step 3: Start the project NPM Run

Switch to the folder you created and type: npm run serve

To access the project has been created: http://localhost:8080/ or http://192.168.43.86:8080/

3. Scaffold structure

4. The render function

About the different versions of Vue:

1. The difference between vue.js and vue.runtime.xxx.js:

(1) Vue. Js is a complete version of Vue, including: core functions + template parser.

(2) Vue.runtime.xxx. js is a running version of Vue, which only contains: core functions; There is no template parser.

Since vue.runtime.xxx.js does not have a template parser, we cannot use the template configuration item. We need to use the createElement function received by the render function to specify the specific content.

3. Benefits of using the run version (lite version)Vue: Easy webPack packaging, saving code and space

5. Modify the default Settings

  • Use vue inspect >out.js to see the default configuration of vue scaffolding
  • Scaffolding can be customized using vue.config. js at cli.vuejs.org/zh

2. Ref and props

1. Ref attribute

Function: Used to register reference information for an element or child (natively retrieving an element’s substitute by id)

Usage:

  1. Play logo:<h1 ref="xxx"></h1>
  2. Access to:this.$refs.xxx

Example:

<template> <div> <h1 v-text=" MSG "ref="title"></h1> <button ref=" BTN" @click="showDOM" Ref =" SCH "/> </div> </template> <script> Name :'App', components:{School}, data() {return {MSG :' welcome! ' } }, methods: {showDOM(){console.log(this.$refs.title) // Real DOM element console.log(this.$refs.btn) // Real DOM element console.log(this.$refs.sch) //School component (vc)}},} </script>Copy the code

When applied to HTML tags, you get real DOM elements. When applied to component tags, you get component instance objects (VC).

console.log(this.$refs.sch)

2. The props configuration

Function: Enables a component to receive external data

1. Data transmission:

<Student name="xxx" :age="xxx" /> 
Copy the code

2. Receiving data:

The first way (simple reception):

props:['name','age']
Copy the code

Second way (restriction type) :

props:{
  name:String
  age:number
}
Copy the code

Third way (restrict type, restrict necessity, specify default) :

Props {name{type:String,// Specify type required:true// necessary}, age{type:number, default:18// Default value}}Copy the code

Note: The props is read-only, and the Vue low-level will monitor any changes you make to the props and issue a warning if any changes are made. If the business requirement does need to be modified, copy the content of props into a copy of data and then modify the data in data. The name of the property to be modified in data cannot be the same as that in props. Otherwise, it takes precedence over that in props. Example: Data {myAge:this.age}

3.Scoped style

Effect: Lets styles work locally, preventing naming conflicts

3. A mixin (with)

Function: Can extract configurations common to multiple components into a mixin object

Usage:

Step 1: Define

// create a folder to store the common configuration, such as minxin.js export const hunhe = {methods: {alert(this.name)}}, mounted() {console.log(' hello! ') }, } export const hunhe2 = { data() { return { x:100, y:200 } }, }Copy the code

Step 2: Use blend

1. Global mixing

//mian.js
Vue.mixin(hunhe)
Vue.mixin(hunhe2)
Copy the code

2. Local mixing

export default {
        name:'School',
        ...
        mixins:[hunhe,hunhe2],
}
Copy the code

4. The plugin

Features: Used to enhance Vue

Essence: An object that contains the install method. The first argument to Install is Vue(the creator of the VM) and the second subsequent argument is data passed by the plug-in consumer.

Usage:

Step 1: Define the plug-in

Create a js file in the SRC directory, usually named plugins.js

Const obj = {install = function(Vue,options){// Can add a lot of powerful features, such as //1. Add global filter vue.filter (...) //2. Add the global directive vue.directive (...) //3. Configure global mixin(combined) vue.mixin (...) }... }Copy the code

Step 2: Use plug-ins

Vue.use(obj)
Copy the code

5. Custom events in Vue

Custom events for the component

1. A communication mode between components, applicable to: child components ==> parent components

2. Usage scenario: A is the parent component and B is the child component. If B wants to send data to A, it should bind A custom event to B in A (the event callback is in A).

3. Usage:

(1) Bind custom events (parent component) :

The first way (more flexible)

<Demo ref="xxx"/>   
methods{
    deom(){alter('hhh')}
}
mounted(){
    this.$refs.xxx.$on('haoyue',this.demo)
}
Copy the code

The second way

<Demo v-on:haoyue ="demo"/>
Copy the code

If you want a custom component event to fire only once, you can use the once modifier. Or the $once method.

Emit custom event (sub component) : this.$emit(‘haoyue’, data) the first argument is the event name and the second argument is the data to be passed

$this.$off(‘haoyue’)

4. Note:

$refs.xxx.$on(‘haoyue’, callback); otherwise, this pointer will fail

2. Customize the event name. The event name cannot be hump

3. If you define a component event, the event is bound to the corresponding component tag

4. Native DOM events can also be bound to components, requiring the use of native modifiers.

5. Instance: Child component passes data to parent component

The parent component:

<template> <div> // bind a haoyue event to the component's instance object <Student V-on :haoyue="demo"/> </div> </template> <script> import Student from './components/Student.vue' export default { name:'App', components: { Student }, methods: {demo(name){console.log('demo was called ', name)}},}Copy the code

Child components:

<template> <div> < button@click ="sendStudentlName"> </button> </div> </template> <script> export default { Name :'Student', data(){return{name:'Student'}} methods: $emit('haoyue',this.name)}},}Copy the code

6. Global event bus

1. What is global event Bus?

A method of communication between components, applicable to communication between any component 2. InstallGlobal event bus

//main.js new Vue({ ... BeforeCreate (){vue.prototype.$bus = this,... })Copy the code

3. Use the event bus:

(1) Receiving data (binding event) :

If the A component wants to receive data, it gives $bus A custom event in the A component. The callback of the event stays with the A component.

//A module methods(){demo(data){... }}... mounted(){ this.$bus.$on('xxx',this.demo) }Copy the code

(2) Provision of data (distribution event) :

This.$bus.$emit(' XXX ', data)Copy the code

(3) Untying event:

It is best to use $off in the beforeDestory hook to unbind events used by the current component.

beforeDestory(){
    this.$bus.$off('xxx')
}
Copy the code

7. Message subscription and publishing

1. A communication mode between components, applicable to communication between any components

Similar to the global event bus:

  1. Subscribe message – corresponds to bind event listener
  2. Publish message – corresponds to the distribution event
  3. Unsubscribe messages – Unbind event listeners

2. Use steps:

(1) Install pubsub: NPM I pubsub-js

Import pubsub from ‘pubsub-js’

(3) Receiving data (subscription) : If component A wants to receive data, it subscribes messages in component A, and the callback of subscription remains in component A itself.

Methods (){// The first argument is the message name, the second argument is the data demo(msgName, data){... }} mounted(){this.pid = subscribe(' XXX ',this.demo)}Copy the code

Pubsub.publish (‘ XXX ‘, data)

(5) It is best to unsubscribe with pubsub.unsubscribe(PID) in beforeDestory hooks

8. Transitions and animation

1. Function: When inserting, updating, or removing DOM elements, add style class names to the elements as appropriate

2. Here,

3. The writing:

(1) Prepare the style:

The style in which the element enters:

1. V-enter: indicates the entry point

2. V-enter-active: Indicates the entering process

3. V-enter-to: the end of entry

The style in which the element leaves:

E.g. < 1 > It’s a v-leave

2. V-leave-active: Indicates the process of leaving

E.g. < 1 > It was a v-leave-to

2. Wrap the element with
and configure the name attribute:

<transition name="hello"> <h1 V-show ="isShow"> hello </h1> </transition>Copy the code

3. Note: If you need to oversize how tall an element is, use:
and specify a key for each element