Detailed explanation of Vue components

insert image description here

<body>
    <div id="root">
        <h2>{{name}}</h2>
        <hr>
        <school></school>
        <hr>
        <student></student>
        <hr>
        <!-- <h2>Student name: {{name}}</h2>
        <h2>Student age: {{age}}</h2> -->
    </div>
    <div id="root2">
        <hello></hello>
    </div>
    <script>
        Vue.config.productionTip = false;
        //Create school component//el:'#root'
        //When defining a component, be sure not to write the el configuration item, because ultimately all components will be managed by a vm, which will decide which container to serve const school = Vue.extend({
            template: `
            <div>
                <h2>School name: {{schoolName}}</h2>
                <h2>School address: {{address}}</h2>
               <button @click="showName">Click me to show the school name</button>
                </div>
           `,
            data() {
                return {
                    schoolName: 'Second Middle School',
                    address: 'Beijing',
                }
            },
            methods: {
                showName() {
                    alert(this.schoolName)
                }
            }
        })
        //The first step: create components //Create student components const student = Vue.extend({
            template: `
         <div>  
        <h2>Student name: {{name}}</h2>
        <h2>Student age: {{age}}</h2>
        </div>
           `,
            data() {
                return {
                    name: 'Xiao Wang',
                    age: 20,
                }
            }
        })
        //Create vm
        new Vue({
            el: '#root',
            data: {
                name: 'Hello, World! '
            },
            //Step 2: Register components (local registration)
            components:
                school,
                student
            }
        })

        const hello = Vue.extend({
            template: `
            <div><h2>Hello! Student Wang</h2></div>
            `
        })
        Vue.component('hello', hello)
        new Vue({
            el: '#root2'
        })
    </script>
</body>

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Detailed explanation of custom events of Vue components
Detailed explanation of value transfer between parent and child components in Vue3
Detailed explanation of various methods of Vue component communication
Vue components dynamic components detailed explanation
Detailed explanation of the use of Vue image drag and drop zoom component
Detailed explanation of the use of router-view components in Vue

<<: Simple example of using Docker container

>>: CSS hacks \9 and \0 may not work for hacking IE11\IE9\IE8