Vue learning series - 05 - most detailed learning process (full of dry goods)
preface
04 - Portal
This chapter will advance to a new chapter! Start with componentization We all know that the rainbow can't be seen until the wind and rain. But we all hope to sit directly in the rainbow. Others have arranged a beautiful world for you. Its song is high and its harmony is few. Thank you for your exploration experience along the way Remember gratitude and step on the pit for the latecomers
Tip: the following is the main content of this article. The following cases can be used for reference
1, What is componentization? (Advanced)
How people deal with complex problems:
Anyone's logical ability to process information is limited
Therefore, when facing a very complex problem, we are unlikely to deal with a lot of content at one time.
However, we have a natural ability to disassemble problems.
If you divide a complex problem into many small problems that can be handled, and then put it into the whole, you will find that the big problems will be solved easily.
Componentization is a similar idea:
If we put all the processing logic in a page together, the processing will become very complex and is not conducive to subsequent management and expansion.
However, if we say that a page is divided into small function blocks, and each function block completes its own independent functions, then the management and maintenance of the whole page will become very easy. 0
Quoted here
Application of componentization: with the idea of componentization, we should make full use of it in future development.
Split the page into small and reusable components as much as possible.
This makes our code more convenient to organize and manage, and more extensible.
Component is a very important chapter in Vue development. You should study it carefully!
2, Basic steps for registering components
1. The use of components is divided into three steps:
Create component constructor
Register components
Use components
What do the steps here mean?
1.Vue.extend(): call Vue Extend () creates a component constructor.
Usually, when creating a component constructor, the template passed in represents the template of our custom component.
The template is the HTML code to be displayed where the component is used.
In fact, this is written in vue2 X is almost invisible in the document. It will directly use the syntax sugar we will talk about below, but this method will still be mentioned in many materials, and this method is the basis for learning the following methods.
2.Vue.component() :
Call Vue Component () is to register the component constructor as a component and label it with a component name.
Therefore, two parameters need to be passed: 1. Register the tag name of the component; 2. Component constructor
3. The component must be mounted under a Vue instance, otherwise it will not take effect. (see the figure below) let's look at the mouth. I used it three times
The third time did not actually take effect:
2. Component code instance steps
(1) 01 basic use of Vue componentization
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<script src="js/vue.js"></script>
<script>
/**ES6
* Supports the ` ` definition above the tab key,
* It can support line feed definition// 1. Create a component constructor object
*/
const cpnContructor = Vue.extend({
template: `<cpn>
<h2>The way of University</h2>
<p>What a long long road!</p>
<p>I will ask up and down</p>
</cpn>`
});
//2. Register components
Vue.component(`my-cpn`,cpnContructor)
const app = new Vue({
el: '#app',
data: {
message: 'Hello World!',
}
})
</script>
</body>
</html>
`<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
(2) Global and local components
(3) Parent child component
cpn2 is the parent component and cpn1 is the child component
Parent child component error usage:
Used in Vue instances as child tags
Because when the child component is registered with the components of the parent component, Vue will compile the modules of the parent component
The content of the template has determined the HTML to be rendered by the parent component (equivalent to the content in the child component already exists in the parent component)
Is only recognized in the parent component.
Similar usage will be ignored by the browser.
(4) Syntax and registration method of component
The way to register components above may be a little cumbersome.
To simplify this process, Vue provides a syntax sugar for registration.
The main reason is to omit calling Vue Instead, you can directly use an object instead.
(5) Component template extraction writing method
First:
Type must be: text/x-template
Second:
The component is the package of a single functional module:
This module has its own HTML template and its own data attribute
We find that we can't access it, and even if we can access it, if we put all the data in the Vue instance, the Vue instance will become very bloated.
Conclusion: Vue components should have their own place to save data.
The component object also has a data attribute (it can also have attributes such as methods, which we can use below)
Only the data attribute must be a function
And this function returns an object, which holds data
(6) Use functional components Will duplicate components use the same data?
3. Parent child component communication
(1) Father to son props
In the previous section, we mentioned that child components cannot reference the data of parent components or Vue instances.
However, during development, some data often needs to be transferred from the upper layer to the lower layer:
For example, in a page, we request a lot of data from the server.
Some of the data is not displayed by the large components of our whole page, but by the following sub components.
At this time, the sub component will not send a network request again, but directly let the large component (parent component) pass the data to the small component (sub component)
How to communicate between parent and child components?
Vue officials mentioned:
Pass data to subcomponents through props
Send messages to parent components through events
For example, chestnuts:
In order to avoid each component frequently sending data requests to the server and increasing the pressure on the server Therefore, the largest component is set to allow sending requests
In the following code, I directly regard the Vue instance as the parent component and include child components to simplify the code.
In the component, use the option props to declare the data to be received from the parent.
There are two ways to the value of props:
Method 1: string array. The string in the array is the name when passing.
Method 2: object. The object can set the type during transmission, or set the default value, etc.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="js/vue.js"></script>
<!--Presentation template-->
<div id="app">
<fcpn :cmovies="movies" :cmessage="message"></fcpn>
</div>
<!--Template-->
<template id="cpn">
<div>
<p>{{cmovies}}</p>
<p>{{cmessage}}</p>
</div>
</template>
<!--Template rendering loading-->
<script>
//Create fcpn component parent to child: props
const fcpn = {
template: `#cpn`,
props: ['cmovies',`cmessage`],
}
//root component
const app = new Vue({
el: '#app',
data: {
message: 'Hello World!',
movies: ['dominant sea power','Yuanjie','One Piece','Haier brothers ','The daughter of the sea']
},
//Register local components
components: {
fcpn,
}
})
</script>
</body>
</html>
Earlier, our props option was to use an array.
We said that in addition to arrays, we can also use objects. When we need to verify the type of props, we need object writing.
What data types are supported for validation?
String
Number
Boolean
Array
Object
Date
Function
Symbol
props object writing: constraint types
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="app">
<cpn :cmovies="movies" ></cpn>
</div>
<template id="cpn">
<div>
<p>{{cmovies}}</p>
<p>{{cmessage}}</p>
</div>
</template>
<script>
//Father to son: props
const cpn = {
template: `#cpn`,
props: {
cmessage: {
type: String,
default: 'no end for learning',//Default display without value transfer
required: true,//Required value
},
cmovies: {
type: Array,
//default: [] //vue2. Above 5.1x, this writing method will report an error (when the type is object or array, the default value must be a function)
default() {
return [];
}
}
},
}
const app = new Vue({
el: '#app',
data: {
message: 'Hello World!',
movies: ['dominant sea power','Yuanjie','One Piece','Haier brothers ','The daughter of the sea']
},
components: {
cpn,
}
})
</script>
</body>
</html>
(2)props hump identification
According to custom, our props content label should be written as hump logo But vue2 6.14 there is no hump recognition mechanism at present (there may be in the future)
However, hump identification can be written in scaffold CRL
(3) Child to parent (custom event)
Actual project display
coderwhy teacher practical project
A template template cannot have parallel box models
summary
This chapter mainly introduces the methods of component development and parent-child component communication. The next chapter will start with the combination of parent-child components and other functions
.
