Table of Contents
1. Vue
1.1. Standard development method
1.2. Use of components
1.2.1. Global components
1.2.2. Local components
1.2.3. props transfer static data
1.2.4. props transfer dynamic data
1.2.5. Event delivery
1.2.6, slot slot
一、Vue
1.1. Standard development method
The standard development method of Vue is SPA (Single Page Application): a single-page web application, that is, there will be only one page (index.html) in future projects.
Why use SPA development method?
- Vue official recommendation: Only one Vue instance can exist in an application.
- Reuse: Vue provides the Component component, which not only reduces the amount of code for Vue instances, but also enables reuse.
- Decoupling: A group is responsible for completing a function or a group of functions in the project to achieve business isolation.
1.2. Use of components
1.2.1, Global Component
Global component: registered directly into the Vue root instance component.
Definition method: Vue.component(‘ ‘, {}), the first parameter is the component name, and the second parameter is the configuration object.
Ps: Whether you use global components or local components, you must add a unique root element to the component template.
The following code:
<div id="app">
<!-- Using components -->
<register></register>
</div>
<script src="../js/vue.js"></script>
<script>
//Define global components (the prerequisite for taking effect is that there is a Vue instance and it is used in the scope of the instance)
Vue.component('register', {
template: `<div><h1>Register</h1><span>{<!-- -->{msg}}</span><span>{<!-- -->{counterSqrt}}</ span><comp></comp></div>`,
data() { //Data defined in the component must be in the form of a function (the only difference from Vue instance definition)
return { //The return value is an object, and the data inside the object is
msg: "I am registering the data in the global component",
count: 2
}
},
methods: { //Define some methods for the component
test() {
console.log("I am a method in the component");
}
},
computed: { //Define some computed properties for the component
counterSqrt() {
return this.count * this.count;
}
},
components: { //Define some components in the component
comp: {
template: `<div>I am a child component of the global component</div>`
}
},
beforeCreate() { //Components also have their own life cycle
console.log("beforeCreate:", this.msg);//At this time msg should be undefine
}
//......
});
const app = new Vue({ //Without this, the component will not take effect
el: "#app"
});
The effect is as follows:
1.2.2, local components
Local components: Components can only be used within registered components.
code show as below:
<div id="app">
<login></login>
<reg></reg>
</div>
<script src="../js/vue.js"></script>
<script>
//Define local components (this is another way, now define it externally and then introduce it into the local registered component)
//Ps: The data of the parent component cannot be used in the child component! For example, parent data
const login = {
template: `<div><h1>Login</h1><div>{<!-- -->{ child }}{<!-- -->{ counterSqrt }}</div><comp></ comp></div>`,
data() {
return {
child: "I am the data in the login subcomponent of the registered component",
count: 3
}
},
methods: { //Define some methods for the component
test() {
console.log("I am a method in the component");
}
},
computed: { //Define some computed properties for the component
counterSqrt() {
return this.count * this.count;
}
},
components: { //Define some components in the component
comp: {
template: `<div>I am a child component of a child component</div>`
}
},
beforeCreate() { //Components also have their own life cycle
console.log("beforeCreate:", this.child);//At this time, child should be undefine
}
//......
}
let app = new Vue({
el: "#app",
data: {
parent: "I am the data in the parent component"
},
components: { //Register components
login, //You can also define the component separately outside and then introduce it
reg: {
template: `<div><div>{<!-- -->{ child }}</div></div>`,
data() { //Pay attention to how the data in the component is written
return {
child: "I am the data in the child component reg"
}
}
}
}
});
</script>
The effect is as follows:
1.2.3, props transfer static data
The parent component passes static data to the child component: on the component tag used, declare the static data key=value (the key is customized), and finally declare the corresponding key in the props of the child component.
code show as below:
<div id="app">
<!-- The parent component passes static data to the child component: on the component tag used, declare the static data key=value (the key is customized), and finally declare the corresponding key in the props of the child component -->
<login name="hello?" count="1"></login>
</div>
<script src="../js/vue.js"></script>
<script>
const login = {
template: `<div><h1>Login</h1><div>{<!-- -->{ name }} --- {<!-- -->{ count }}</div></ div>`,
data() {
return {
//This is equivalent to adding name: "hello?", count="1"
}
},
props: ['name', 'count'] //Used to receive data from the parent component, which is equivalent to adding this static data to the data of the child component.
}
const app = new Vue({
el: "#app",
components: {
login //Register component
}
});
</script>
The effect is as follows:
1.2.4, props transfer dynamic data
Pass dynamic data to child components:
- Declare key=value on the component label (key is customized, value is the data in the Vue instance), and use the props array inside the subcomponent to declare key
- The declared custom key can be dynamically bound to attributes through v-bind
Ps: Vue officially states that only one-way data flow is allowed, that is, it can only be passed from the parent to the child, otherwise a warning will be reported.
code show as below:
<div id="app">
<!-- Pass dynamic data to child components:
1. Declare key=value on the component label (key is customized, value is the data in the Vue instance), and the props array is used inside the subcomponent to declare key
2. The declared custom key can be dynamically bound to attributes through v-bind
Final effect:
1. Modify the value in input
2. Since v-model is dynamically bound to the data in the Vue instance, the count data also changes accordingly.
3. Since the attribute aa declared in the login component is dynamically bound to count, the attribute aa also changes accordingly.
Note: Vue officially states that only one-way data flow is allowed, that is, it can only be passed from the parent to the child, otherwise a warning will be reported.
-->
<login :aa="count"></login>
<input type="text" v-model="count">
</div>
<script src="../js/vue.js"></script>
<script>
const login = {
template: `<h1><div>Login</div><h2>{<!-- -->{ aa }}</h2><button @click="add()">Click me to add the number <button></h1>`,
data() {
return {
}
},
props: ['aa'],
methods: {
add() {
this.aa + + ;//The data declared by props is equivalent to adding the data directly to data
}
}
}
const app = new Vue({
el: "#app",
data: {
count: "1"
},
components: {
login
}
});
</script>
Final effect:
- Modify the value in input
- Since v-model is dynamically bound to data in the Vue instance, the count data also changes.
- Since the attribute aa declared in the login component is dynamically bound to count, the attribute aa also changes accordingly.
As shown below
1.2.5, event delivery
The parent passes the event to the child: define @key=value (@custom event name = event name in the parent component) on the component label.
code show as below:
<div id="app">
<!-- To pass events from parent to child: define @key=value (@custom event name = event name in parent component) on the component tag -->
<login @aa="testParent()" @bb="testParent2" @cc="testParent3"></login>
</div>
<script src="../js/vue.js"></script>
<script>
const login = {
template: `<div><h2>Login</h2><button @click="testChild()">Click to call the event in the parent component</button></div>`,
data() {
return {
count: 10
}
},
methods: {
testChild() {
alert("I am an event in a child component!");
//Call events in the parent component through this.$emit
//Parameter 1: The event name defined on the component label
//Subsequent parameters: Parameter 1 You can continue to pass parameters later as parameters in the parent component event
this.$emit("aa");
this.$emit("bb", this.count); //Vue officially says that it can only be passed in one direction (from father to son), but this method can be achieved
this.$emit("cc", { count: this.count, name: "cyk", isGood: true });
}
}
}
const app = new Vue({
el: "#app",
methods: {
testParent() {
alert("1.I am an event in the parent component!");
},
testParent2(count) {
alert("2.I am an event in the parent component!");
console.log("Get the value of the subcomponent:" + count);
},
testParent3(obj) {
alert("3.I am an event in the parent component!");
console.log("Get the value of the subcomponent: count=" + obj.count + ", name=" + obj.name + ", isGood=" + obj.isGood);
}
},
components: {
login
}
});
</script>
The effect is as follows:
1.2.6, slot slot
Slots are used to expand existing components.
code show as below:
<div id="app">
<!-- Slot: used to extend existing components -->
<login></login>
<!--Default: information will be filled in all slots -->
<login><span>hello</span></login>
<!-- Named slot: Add the name attribute to the slot tag as an identity -->
<login><button slot="aa" @click="parent()">Click me</button></login>
</div>
<script src="../js/vue.js"></script>
<script>
const login = {
template: `<div><slot name="aa"></slot><h1>Login</h1><slot name="bb"></slot></div>`,
}
const app = new Vue({
el: "#app",
methods: {
parent() {
alert("I am the event of the parent component");
}
},
components: {
login
}
});
</script>
The effect is as follows:
