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
- Vue scaffolding is a standardized development tool (development platform) officially provided by Vue.
- The latest version is 4.x.
- 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:
- Play logo:
<h1 ref="xxx"></h1>
- 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:
- Subscribe message – corresponds to bind event listener
- Publish message – corresponds to the distribution event
- 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
<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: