Vue component usage

Time:2021-2-19

The program of this paper is as follows

  • Introduce the concept of Vue component
  • Explain the usage of Vue components

Vue components: Introduction

  1. Official document:Component application construction
  2. What is a component: component is a reusable Vue instance and one of the most powerful functions of Vue. Component can expand HTML elements and encapsulate reusable code (including HTML, CSS and JS). At a higher level, a component is a custom element, and Vue compiler provides it with special functions. To sum up, a component is a set of custom HTML tags to complete specific functions. It can be understood as a predefined ViewModel class.
  3. A component can pre define many contents, but the core ones are:
    • TemplateThe template reflects the mapping relationship between the data and the DOM finally presented to the user, which is what we want to reusehtml template
    • Initial data: the initial data state of a component. For reusable components, it is usually private.
    • Received external parameters (props): components can transfer and share data through parameters. Parameters are one-way binding by default, but they can also achieve two-way binding.
    • Life cycle (hook function): a component can trigger multiple life cycle functions, and some custom logic can be encapsulated in these hook functions.
  4. Classification of components:
    • Global component, local component, nested component and single file component

Three steps of component: definition, registration and use

Global component

  1. Brief introduction to global components:
    • Global components are components that all Vue instances can use.
    • How to register global components:
      Vue.component ('component name '{
            'templates and methods'
       }) // Note: do not use capital letters for component names. Multiple words should be separated by middle line '-'
    • ComponenttemplateThe template must have one and only one root label, that is, in thetemplateAll content is wrapped with a label.
    • Application scenario: if the function of the component needs to be referenced in any tag mounted by the Vue instance, it is recommended to use the global component
    • Note: the global component must be written before the Vue instance is created to take effect in the reference, otherwise an error will be reported
  2. There are three uses of global components:
    <!DOCTYPE html>
     <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <! -- import Vue package -- >
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        </head>
        <body>
            <! -- trilogy of components: definition, registration, reference -- >
            <h1>Global component</h1>
            <hr >
        <! - = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
            <div id="A">
                < compon1 > < / compon1 > <! -- use -- >
                <hr >
            </div>
            <script type="text/javascript">
                Vue.component ('compon1 ', {// register
                    Template: '< H2 > reference global component: mode 1 < / H2 >' // definition
                })
                var A = new Vue({
                    el: '#A',
                })
            </script>
        <! - = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
            <div id="B">
                < compon2 > < / compon2 > <! -- use -- >
            </div>
            <script type="text/template" type="text/javascript" id="compon2">
            /*Define components (this div is the root tag)*/
                <div>
                    <h2>Reference global component: mode 2</h2>
                    <p>I define it through the 'script' tag</p>
                    <hr >
                </div>
            </script>
            <script type="text/javascript">
                Vue.component ('compon2 ', {// register
                    Template: '# compon2' // definition
                })
                var B = new Vue({
                    el: '#B',
                })
            </script>
        <! - = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
            <div id="C">
                < compon3 > < / compon3 > <! -- use -- >
            </div>
            <template id="compon3">
                <! -- definition (this div is the root tag) - >
                <div>
                    <h2>Reference global component: mode 3</h2>
                    <p>I define it through the 'template' tag</p>
                    <hr >
                </div>
            </template>
            <script type="text/javascript">
                Vue.component ('compon3 ', {// register
                    Template: '# compon3' // definition
                })
                var C = new Vue({
                    el: '#C',
                })
            </script>
        </body>
     </html>

Local component

  1. Brief introduction to local components:
    • I think the advantage of local component is relative to global component. For example, when you use a component system such as webpack, if you register a global component, it means that no matter whether you use it or not, this component will exist in your component system, causing unnecessary damage JS loading, and local components only need to call this defined component in your root instance.
    • As with global components, thetemplateThe template must have one and only one root label, that is, in thetemplateAll content is wrapped with a label.
  2. There are three uses of local components:
    <!DOCTYPE html>
     <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <! -- import Vue package -- >
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        </head>
        <body>
            <! -- trilogy of components: definition, registration, reference -- >
            <h1>Local component -- defined on a Vue instance</h1>
            <hr >
        <! --- = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
            <div id="A">
                < compon1 > < / compon1 > <! -- Reference -- >
                <hr >
            </div>
            <script type="text/javascript">
                var A = new Vue({
                    el: '#A',
                    Components: {// register
                        'compon1': {// definition
                            Template: '< H2 > reference local component: mode 1 < / H2 >'
                        }
                    }
                })
            </script>
        <! - = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
            <div id="B">
                < compon2 > < / compon2 > <! -- Reference -- >
                <hr >
            </div>
            <script type="text/template" id="compon2">
                //Define components (this div is the root tag)
                <div>
                    <h2>Referencing local components: mode 2</h2>
                    <p>I define it through the 'script' tag</p>
                </div>
            </script>
            <script type="text/javascript">
                var B = new Vue({
                    el: '#B',
                    Components: {// register
                        'compon2': {// definition
                            template: '#compon2'
                        }
                    },
                })
            </script>
        <! - = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
            <div id="C">
                < compon3 > < / compon3 > <! -- Reference -- >
                <hr >
            </div>
            <template id="compon3">
                <! -- define the component (this div is the root tag) - >
                <div>
                    <h2>Referencing local components: mode 3</h2>
                    <p>I define it through the 'template' tag</p>
                </div>
            </template>
            <script type="text/javascript">
                var C = new Vue({
                    el: '#C',
                    Components: {// register
                        Compon3: {// definition
                            template: '#compon3',
                        }
                    }
                })
            </script>
        </body>
     </html>

Component nesting

  1. Introduction: as shown in the figure below, components can be nested with each other
    Vue component usage
  2. Method of nesting child components in parent component:
    <div id="container">
        <h3>What fruits do I like to eat</h3>
        <ol>
            < todolist > < / todolist > <! -- Reference -- >
        </ol>
     </div>
     <script type="text/javascript">
        //Define subcomponents
        var child = Vue.extend({
            Template: "< div > nested subcomponents < / div >",
        });
        //Define parent component
        var todolist = Vue.extend({
            template:'<div><li v-for="item in datas">{{item.text}}</li><child></child></div>',
            data(){
                return{
                    datas: [
                        {ID: 0, text: 'Apple'},
                        {ID: 1, text: 'Banana'},
                        {ID: 2, text: 'Sydney'},
                    ]
                }
            },
            components: {
                'child': child,
            }
        });
        //Define a Vue instance
        var app = new Vue({             
        el: '#container',
            data: {},
            Components: {// register (of course, you can also use“ Vue.component ('todolist ', todolist); "global registration"
                'todolist': todolist,
            }
        })
     </script>
    • Note: before using a subcomponent, you must define the subcomponent first, otherwise an error will be reported
  3. Data in a component must be a function. The definition of data in a component is as follows:
    'component name':{
        template: "...",
        data: function(){
            return {
                Key: value,
            }
        }
    }
    • Why are you heredataThe value of is a function, because the component defined here is likely to be reused. If it is like an ordinary Vue instance, changing one place will cause the whole component to change
      But each time we reuse the build, it may be different, so we use onefunctionTo return the object
      • In other words, thedataIt’s private. It’s privatedataThe data in can only be used in the corresponding component template

This work adoptsCC agreementReprint must indicate the author and the link of this article

Recommended Today

NLP in financial market — emotional analysis

By Yuki TakahashiCompile VKSource: towards Data Science Since the launch of alexnet on Imagenet, the deep learning of computer vision has been successfully applied to various applications. On the contrary, NLP has been lagging behind in the application of deep neural network. Many applications that claim to use artificial intelligence usually use some rule-based algorithm […]