5 component write a component

introduce

This article is the last section of the previous articles. When you study this part, there will be many places you don't understand, which doesn't matter. As long as you type out these codes after class and can have the same effect as in the screenshot, you can complete the task.

How to write a component?

One of the most important features of Vue is that it allows you to use componentization for development.
Anything you see on the page can be written as a component.
Let's take a look at how to write a static Vue component and a title component.

Create a new Demo5.html file, and then copy all the contents of Demo4.html. To facilitate writing, declare a variable before the first line of the < script > tag, such as app. After declaring the variable, you can separate the mount part.

const app=Vue.createApp({
      //.....somting........
app.mount("#app")

With the app variable, you can easily customize components and use them.
For example, now write a component about the title.

app.component('my-title', {
    template: '<h1 style="text-align:center">Dabao sword City</h1>'
})

With this component, you can use it in the template part of the app. For example, we put it on the top of the template. The code is as follows:

template: `<div>
		       <my-title />
		        <!--...somting......-->
		    </div>`

The complete code is as follows:

<script>
    const app = Vue.createApp({
        data() {
            return {
                inputValue: '',
                list: []
            }
        },
        methods: {
            handleAddItem() {
                this.list.push(this.inputValue)
                this.inputValue = ''
            }
        },
        template: `<div>
            <my-title/>
            <input v-model="inputValue" />
            <button v-on:click="handleAddItem">Add beauty</button>
            <ul>
                <li v-for="(item, index) of list">[{{index}}]{{item}}</li>
            </ul>
        </div>`
    })

    app.component('my-title', {
        template: '<h1 style="text-align:center;">Dabao sword City</h1>'
    })

    app.mount("#app")
</script>

The effects are as follows:

Writing dynamic components

What is a dynamic component?

Maybe what I'm talking about is not standard. The dynamic component I'm referring to here is the content that is output through the parent component or program control without fixed display content.

Now I've learned the basic usage of static components. I'll separate the Jiali component we wrote before and write a component. This component will bind some props to accept the parameters passed by the parent component, and then display the content dynamically.

A key instruction of dynamic component is v-bind. In this way, the component can obtain the corresponding value through props.

The code is as follows:

app.component('my-jiali', {
    props: ['item', 'index'],
    template: `<li >[{{index}}]-{{item}}</li>`
})

props is an array that can accept multiple values.
Once you have the my Jiali component, you can use it in the template of the app as follows:

<my-jiali 
    v-for="(item,index) of list"  
    v-bind:item="item" 
    v-bind:index="index"  
/>

Take a look at the effect:


At this time, some small partners will think that this does not reduce the workload of the code,
First, our code is relatively simple,
Second, the meaning of components is to reduce the coupling of programs and make large-scale development and programming possible.
For example, a page is developed by several people. Each person writes different modules and puts them together after writing.
With components, this becomes very easy.

The content of this article is a little windy. It doesn't matter if you don't understand it. The key is to write the code. In order to facilitate learning, all the code of Demo5.html is given here.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                inputValue: '',
                list: []
            }
        },
        methods: {
            handleAddItem() {
                this.list.push(this.inputValue)
                this.inputValue = ''
            }
        },
        template: `<div>
            <my-title/>
            <input v-model="inputValue" />
            <button v-on:click="handleAddItem">Add beauty</button>
            <ul>
                <my-jiali
                    v-for="(item, index) of list"
                    v-bind:item="item"
                    v-bind:index="index"
                />
            </ul>
        </div>`
    })

    app.component('my-title', {
        template: '<h1 style="text-align:center;">Dabao sword City</h1>'
    })

    app.component('my-jiali',{
        props:['index','item'],
        template: `<li>[{{index}}]-{{item}}</li>`
    })

    app.mount("#app")
</script>

</html>

Tags: Linux Operation & Maintenance Vue server

Posted on Thu, 25 Nov 2021 23:18:09 -0500 by MartinGr