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>{{message}}</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>{{message}}</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>{{message}}</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:{{sex}}</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:{{isAgree}}</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:{{habbies}}</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:{{fruit}}</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:{{fruits}}</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">{{item}}
    </label>
    <h2>Your hobbies are: {{hobbies}}</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">{{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>{{age}}--{{typeof age}}</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:{{name}}</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{{title}}</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:{{counter}}</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">{{item}}</li>
        </ul>
        {{cmessage}}
    </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>{{cInfo}}</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>
<!--Parent Component-->
<div id="app">
    <cpn @itemclick="cpnClick"></cpn>
</div>
<template id="cpn">
    <div>
        <button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
    </div>
</template>
<script src="../js/vue.js"></script>
<script>
    // Subcomponents
    const cpn = {
        template: '#cpn',
        data() {
            return {categories: [
                {id:'a', name:'Popular Recommendations'},
                {id:'a', name:'Mobile phone digital'},
                {id:'a', name:'Computer Office'}
            ]
        }},
        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:{{number1}}</h2>
        <h2>data:{{dnumber1}}</h2>
        <!--<input type="text" v-model="dnumber1">-->
        <input type="text" :value="dnumber1" @input="num1Input">
        <h2>props:{{number2}}</h2>
        <h2>data:{{dnumber2}}</h2>
        <!--<input type="text" v-model="dnumber2">-->
        <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 v-for="item in slot.data">{{item}} - </span>-->
            <span>{{slot.data.join(' - ')}}</span>
        </template>
    </cpn>
</div>
<template id="cpn">
    <div>
        <slot :data="pLanguages">      <!--data Customizable modifications-->
            <ul>
                <li v-for="item in pLanguages">{{item}}</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 {flag, sum} 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);

Tags: Vue Mobile Javascript Java

Posted on Wed, 10 Jun 2020 20:46:27 -0400 by paegn