Data display, event triggering and method construction reference in Vue

Posted by FrankA on Mon, 07 Oct 2019 18:47:08 +0200

I. Several Ways of Displaying Data on Pages

0. Interpolation expression

<body>
    <div id="root">
        <h2>{{number}}</h2>

    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                msg:"hello world",
                number:123
            }
        })
    </script>
</body>

Operation results:

Number in data is a numerical value, and the interpolation expression {number} is needed to display the value on the page. This is no stranger, there is nothing to say.

1. v-text instruction

<body>
    <div id="root">
        <h2 v-text="number"></h2>

    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                msg:"hello world",
                number:123
            }
        })
    </script>
</body>

This directive is used to tell the page what to display is the number variable.
Operation results:

2. v-html instructions

<body>
    <div id="root">
        <h2 v-html="number"></h2>

    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                msg:"hello world",
                number:123
            }
        })
    </script>
</body>

Operation results:

It can be seen that these three methods have the same effect on displaying numerical values.

The difference between v-text and v-html

0,v-text

<body>
    <div id="root">
        <div v-text="content"></div>

    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                content:"<h1>hello world</h1>"
            }
        })
    </script>
</body>

Operation results:

As you can see, the v-text instruction will escape the h1 tag and output it.

1,v-html

<body>
    <div id="root">
        <div v-html="content"></div>

    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                content:"<h1>hello world</h1>"
            }
        })
    </script>
</body>

Operation results:

At this time, the output is html format content, that is, the h1 tag has not been escaped, playing the role of the tag itself.

III. v-on Template Instructions and Methods

When coding, v-on: can be abbreviated as@
Content Description: Bind a trigger event with v-on template instruction, so that the corresponding warning can be popped up by clicking on the content data in the page.
Analytical thinking:
A. v-on binds a trigger event click and executes the corresponding function handleClick after it is triggered.
B. Functions are written in the parameter methods of vue instances. This parameter is mainly used to construct method functions.
C. Write the work to be performed after the event is triggered in the body of the function method
The code is as follows:

<body>
    <div id="root">
        <div v-on:click="handleClick">{{content}}</div>

    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                content:"hello"
            },
            methods: {
                handleClick:function(){
                    alert('world')
                }
            }
        })
    </script>
</body>

Operation results:

When you click hello, a world warning pops up

Content Description: Another requirement is to click hello on the page and change it to world, that is, to change the value of content.
Analytical thinking:
It's basically the same as the previous question, just change alert ("world") to this.content = world.
The code is as follows:

<body>
    <div id="root">
        <div @click="handleClick">{{content}}</div>

    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                content:"hello"
            },
            methods: {
                handleClick:function(){
                    this.content='world'
                }
            }
        })
    </script>
</body>

The results of the operation are not demonstrated.

Topics: Vue

Programmer Think