v-model, components, modularization to get started with Vue

I. Use and Principles of v-model

1. Basic use of v-model

The v-model is used to practice the two-way binding of that form element and data

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="text" v-model="message"> <h1>{}</h1> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello,Vue' } }) </script> </body> </html>

2. Principle of v-model

v-bind binds a value property
The v-on directive binds an inpu event to the current element

(1) Mode 1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="text" v-model="message" @input="valueChange"> <h1>{}</h1> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello,Vue' }, methods: { valueChange(event) { this.message = event.target.value } } }) </script> </body> </html>

(2) Mode 2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="text" v-model="message" @input="message = $event.target.value"> <h1>{}</h1> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello,Vue' } }) </script> </body> </html>

3. v-model combined with radio type

There is no need to add the same name to two input s, they will be mutually exclusive

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <label for="male"> <input type="radio" id="male" v-model="sex" value="male">male </label> <label for="female"> <input type="radio" id="female" v-model="sex" value="female">female </label> <h1>Gender of your choice:{}</h1> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello,Vue', sex: 'male' } }) </script> </body> </html>

4. v-model combined with checkbox type

(1) checkbox

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <label for="agree"> <input type="checkbox" id="agree" v-model="isAgree">Agree to Agreement </label> <h2>You chose:{}</h2> <button :disabled="!isAgree">Next step</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello,Vue', isAgree: false } }) </script> </body> </html>

(2) checkbox

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="checkbox" v-model="habbies" value="Football">Football <input type="checkbox" v-model="habbies" value="blue ball">blue ball <input type="checkbox" v-model="habbies" value="Volleyball">Volleyball <input type="checkbox" v-model="habbies" value="Table tennis">Table tennis <h2>Your hobbies are:{}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello,Vue', habbies: [] } }) </script> </body> </html>

5. v-model combined with select type

(1) select radio

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <select name="" id="" v-model="fruit"> <option value="Apple">Apple</option> <option value="Banana">Banana</option> <option value="Durian">Durian</option> <option value="Grape">Grape</option> </select> <h2>The fruit you choose is:{}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello,Vue', fruit: 'Banana' } }) </script> </body> </html>

(2) select multiple selection

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <select name="" id="" v-model="fruits" multiple> <option value="Apple">Apple</option> <option value="Banana">Banana</option> <option value="Durian">Durian</option> <option value="Grape">Grape</option> </select> <h2>The fruit you choose is:{}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello,Vue', fruits: [] } }) </script> </body> </html>

6. Value Binding in input

By v-Bind:valueDynamic binding of values

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <label v-for="item in allHabbies" :for="item"> <input type="checkbox" :value="item" v-model="hobbies">{} </label> <h2>Your hobbies are: {}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello,Vue', hobbies: [], allHabbies: ['Basketball','Football', 'Table tennis'] } }) </script> </body> </html>

7. Use of v-model modifiers

(1)lazy

Data is not updated until it loses focus or gets into a car

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="text" v-model.lazy="message">{} </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello,Vue' } }) </script> </body> </html>

(2)number

Automatically convert the contents of the input box to a number type

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="number" v-model.number="age"> <h2>{}--{}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello,Vue', age: 0 } }) </script> </body> </html>

(3)trim

Filter the left and right spaces of the content

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="text" v-model.trim="name"> <h2>The name you entered:{}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello,Vue', name: '' } }) </script> </body> </html>

2. Components

1. Basic steps for registering components

1. Create Component Constructor
2. Register Components
3. Using Components

2. Basic use of componentization

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <my-cpn></my-cpn> <my-cpn></my-cpn> </div> <script src="../js/vue.js"></script> <script> // 1. Create Component Constructor Object const cpnC = Vue.extend({ template: ` <div> <h2>Title</h2> <p>Content One</p> <p>Content 2</p> </div> ` }); // 2. Register Components Vue.component('my-cpn', cpnC); const app = new Vue({ el: '#app', data: { message: 'hello,Vue' } }) </script> </body> </html>

3. Global and local components

(1) Global Components

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn></cpn> <cpn></cpn> </div> <div id="app1"> <cpn></cpn> </div> <script src="../js/vue.js"></script> <script> const cpnC = Vue.extend({ template: ` <div> <h2>Title</h2> <p>Content One</p> <p>Content 2</p> </div> ` }); Vue.component('cpn', cpnC); const app = new Vue({ el: '#app', data: { message: 'hello,Vue' } }); const app1 = new Vue({ el: '#app1', data: { message: 'hello,Vue' } }) </script> </body> </html>

(2) Local components

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn></cpn> <cpn></cpn> </div> <div id="app1"> <cpn></cpn> </div> <script src="../js/vue.js"></script> <script> const cpnC = Vue.extend({ template: ` <div> <h2>Title</h2> <p>Content One</p> <p>Content 2</p> </div> ` }); // Vue.component('cpn', cpnC); const app = new Vue({ el: '#app', data: { message: 'hello,Vue' }, components: { cpn: cpnC } }); const app1 = new Vue({ el: '#app1', data: { message: 'hello,Vue' } }) </script> </body> </html>

4. Parent and child components

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn2></cpn2> </div> <script src="../js/vue.js"></script> <script> // 1. First Component Constructor (Sub-Component) const cpnC1 = Vue.extend({ template: ` <div> <h2>Heading One</h2> <p>Content One</p> <p>Content 2</p> </div> ` }); // 2. Second Component Constructor (Parent Component) const cpnC2 = Vue.extend({ template: ` <div> <h2>Heading Two</h2> <p>Content One</p> <p>Content 2</p> <cpn1></cpn1> </div> `, components: { cpn1: cpnC1 } }); const app = new Vue({ el: '#app', data: { message: 'hello,Vue' }, components: { cpn2: cpnC2 } }) </script> </body> </html>

5. Grammatical sugar registration for components

OmittedVue.extendInstead of using an object directly

(1) Global Registration

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn1></cpn1> </div> <script src="../js/vue.js"></script> <script> Vue.component('cpn1',{ template: ` <div> <h2>Title</h2> <p>Content One</p> <p>Content 2</p> </div> ` }); const app = new Vue({ el: '#app', data: { message: 'hello,Vue' } }) </script> </body> </html>

(2) Local registration

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn1></cpn1> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello,Vue' }, components: { 'cpn1': { template: ` <div> <h2>Title</h2> <p>Content One</p> <p>Content 2</p> </div> ` } } }) </script> </body> </html>

6. Separate Writing of Component Templates

(1) through script tags

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn></cpn> </div> <script type="text/x-template" id="cpn"> <div> <h2>Heading One</h2> <p>Content One</p> <p>Content 2</p> </div> </script> <script src="../js/vue.js"></script> <script> Vue.component('cpn',{ template: '#cpn' }); const app = new Vue({ el: '#app', data: { message: 'hello,Vue' }, }) </script> </body> </html> </body> </html>

(2) through template tags

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn></cpn> </div> <template id="cpn"> <div> <h2>Heading One</h2> <p>Content One</p> <p>Content 2</p> </div> </template> <script src="../js/vue.js"></script> <script> Vue.component('cpn',{ template: '#cpn' }); const app = new Vue({ el: '#app', data: { message: 'hello,Vue' }, }) </script> </body> </html> </body> </html>

7. Data storage in components

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn></cpn> </div> <template id="cpn"> <div> <h2>Heading One{}</h2> <p>Content One</p> <p>Content 2</p> </div> </template> <script src="../js/vue.js"></script> <script> Vue.component('cpn',{ template: '#cpn', data() { return { title: 'yyy' } } }); const app = new Vue({ el: '#app', data: { message: 'hello,Vue' }, }) </script> </body> </html> </body> </html>

8. Why is component data a function

With functions, new memory objects are generated each time, so that each component is not related to each other

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn></cpn> <cpn></cpn> </div> <template id="cpn"> <div> <h1>Current count:{}</h1> <button @click="increment">+</button> <button @click="decrement">-</button> </div> </template> <script src="../js/vue.js"></script> <script> Vue.component('cpn',{ template: '#cpn', data() { return { counter: 0 } }, methods: { increment() { this.counter++ }, decrement() { this.counter-- } } }); const app = new Vue({ el: '#app', data: { message: 'hello,Vue' } }) </script> </body> </html>

9. Communication between parent and child components

(1) Communication methods

1. Transfer data to subcomponents via props
2. Send messages to parent components via events ($emit Events)

(2) The parent component passes data to the child component

Data types supported by props validation: String, Number, Boolean, Array, Object, Date, Function, Symbol

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn :cmovies="movies" :cmessage="message"></cpn> </div> <template id="cpn"> <div> <ul> <li v-for="item in cmovies">{}</li> </ul> {} </div> </template> <script src="../js/vue.js"></script> <script> const cpn = { template: '#cpn', // props: ['cmovies', 'cmessage'], props: { // 1. Type Restrictions // cmovies: Array, // cmessage: String // 2. Provide default values cmessage: { type: String, default: 'aaaa', required: true //Must pass }, //When the type is an object or an array, the default value must be a function cmovies: { type: Array, default() { return {} } } }, data() { return {} } } const app = new Vue({ el: '#app', data: { message: 'hello,Vue', movies: ['One Piece', 'Naruto','Haier brothers'] }, components: { cpn } }) </script> </body> </html>

(3) Component communication - parent-descendant (hump identification in props)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn :c-info="info"></cpn> </div> <template id="cpn"> <div> <h1>{}</h1> </div> </template> <script src="../js/vue.js"></script> <script> const cpn = { template: '#cpn', props: { cInfo: { type: Object, default() { return {} } } } }; const app = new Vue({ el: '#app', data: { info: { name: 'yyy', age: 18 } }, components: { cpn } }) </script> </body> </html>

(4) Component Communication - Child Father (Custom Event)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>  <div id="app"> <cpn @itemclick="cpnClick"></cpn> </div> <template id="cpn"> <div> <button v-for="item in categories" @click="btnClick(item)">{}</button> </div> </template> <script src="../js/vue.js"></script> <script> // Subcomponents const cpn = { template: '#cpn', data() { return , , ] }}, methods: { btnClick(item){ //Launch custom events this.$emit('itemclick',item) } } }; const app = new Vue({ el: '#app', data: { }, components: { cpn }, methods: { cpnClick(item) { console.log('cpnClick',item); } } }) </script> </body> </html>

(5) Component Communication - Parent-Child Communication Cases

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change"></cpn> </div> <template id="cpn"> <div> <h2>props:{}</h2> <h2>data:{}</h2>  <input type="text" :value="dnumber1" @input="num1Input"> <h2>props:{}</h2> <h2>data:{}</h2>  <input type="text" :value="dnumber2" @input="num2Input"> </div> </template> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { num1: 1, num2: 2 }, methods: { num1change(value) { this.num1 = parseInt(value) }, num2change(value) { this.num2 = parseInt(value) } }, components: { cpn: { template: '#cpn', props: { number1: Number, number2: Number }, data() { return { dnumber1: this.number1, dnumber2: this.number2 } }, methods: { num1Input(event) { // 1. Assign value s from input to dnumber this.dnumber1 = event.target.value; // 2. To allow parent components to modify values, issue an event this.$emit('num1change', this.dnumber1); // 3. Simultaneously modify the value of dnumber2 this.dnumber2 = this.dnumber1 * 100; this.$emit('num2change', this.dnumber2) }, num2Input(event) { this.dnumber2 = event.target.value; this.$emit('num2change', this.dnumber2) //Simultaneously modify the value of dnumber1 this.dnumber1 = this.dnumber2 / 100; this.$emit('num1change', this.dnumber1) } } } } }) </script> </body> </html>

(6) Component Access-Parent Access-Child-refs

refs are typically used and children are used whenever access is required

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div> <cpn ref="aaa"></cpn> <button @click="btnClick">Button</button> </div> </div> <template id="cpn"> <div>I am a child component</div> </template> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello,Vue' }, methods: { btnClick() { console.log(this.$children); // 1,$children // this.$children[0].showMessage(); // 2,$refs console.log(this.$refs.aaa.showMessage()); } }, components: { cpn: { template: "#cpn", methods: { showMessage() { console.log('showMessage'); } } } } }) </script> </body> </html>

3. Advanced Componentization

1. Basic use of slot-slot

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn></cpn> <cpn><span>1111</span></cpn> </div> <template id="cpn"> <div> <h1>I am a child component</h1> <slot><button>Button</button></slot> </div> </template> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello,Vue' }, components: { cpn: { template: '#cpn' } } }) </script> </body> </html>

2. Use of slot-named slots

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn><span slot="center">Title</span></cpn> </div> <template id="cpn"> <div> <slot name="left"><span>left</span></slot> <slot name="center"><span>Middle</span></slot> <slot name="right"><span>Right</span></slot> </div> </template> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello,Vue' }, components: { cpn: { template: '#cpn' } } }) </script> </body> </html>

3. What is a compilation scope

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn v-show="isShow"></cpn> </div> <template id="cpn"> <div> <h2>I am a child component</h2> <p>Ha-ha</p> <button v-show="isShow">Button</button> </div> </template> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello,Vue', isShow: true }, components: { cpn: { template: '#cpn', data() { return { isShow: false } } } } }) </script> </body> </html>

4. Scope slot case

The label of the parent component replacing the slot, but the content is provided by the child component

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn></cpn> <cpn> <template slot-scope="slot">  <span>{}</span> </template> </cpn> </div> <template id="cpn"> <div> <slot :data="pLanguages">  <ul> <li v-for="item in pLanguages">{}</li> </ul> </slot> </div> </template> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello,Vue', }, components: { cpn: { template: '#cpn', data() { return { pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python'] } } } } }) </script> </body> </html>

4. Front-end modularization

1. Modularization of ES6

(1)index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="aaa.js" type="module"></script> <script src="bbb.js" type="module"></script> <script src="mmm.js" type="module"></script> </body> </html>

(2)aaa.js

var name = 'Xiao Ming'; var age = 18; var flag = true; function sum(num1, num2) { return num1 + num2 } if (flag) { console.log(sum(20, 30)); } // 1. Way everywhere export { flag,sum } // 2. Export mode 2 export var height = 1.88 //3. Functions/classes everywhere export function mul(num1, num2) { return num1 + num2 }

(3)bbb.js

var name = 'Little Red'; var flag = false;

(4)mmm.js

import from './aaa.js'; if (flag) { console.log('Xiao Ming'); console.log(sum(20, 30)); } import addr from './aaa.js'; console.log(addr); // Unified Import // import * as aaa from './aaa.js' // console.log(aaa.flag);