This is the first day of my participation in the August Text Challenge.More challenges in August

V-text instruction is one of the instructions we often use in the project, so how to implement this instruction, in Vue3 and Vue2 they are used in a different way, let’s look at it.

How to use

V-text is an instruction for binding data.

The most common form is text interpolation using “Mustache” syntax (double curly braces) or direct V-text instructions.

Given a Vue instance with data title=’hello world’, to display it in text, use the following methods:

<h1>{{ title }}</h1>
或
<h1 v-text="title"></h1>
Copy the code

There is no difference between using V-text in Vue3 and Vue2, but the initialization data of Vue3 is somewhat different from that of Vue2. We can use the setup function to initialize data, which is not extended in this article. Let’s take a look at how data is initialized in Vue3.

<div id="app">
    <h1>{{title}}</h1>
</div>

<script src=".. /dist/vue.global.js"></script>
<script>
    const { createApp, ref } = Vue
    createApp({
        setup() {
            const title = ref('hello world')
            return {
                title
            }
        }
    }).mount("#app")
</script>
Copy the code

Vue3 is a dependency file of Vue3, you can package it yourself. The above code shows the basic initialization of Vue3, which is completely different from the initialization of Vue2. The method in it will not be explained, and the following article will explain it.

Custom instruction

How to customize an instruction in Vue3?

Vue3 still uses the directive method to customize instructions, which is a little different from the life cycle in Vue2. The following is a simple custom command to imitate the function of the V-text command V-ctext.

<div id="app">
    <h1>{{title}}</h1>
    <h1 v-ctext="title"></h1>
</div>

<script src=".. /dist/vue.global.js"></script>
<script>
    const { createApp, ref } = Vue
    const app = createApp({
        setup() {
            const title = ref('hello world')
            return {
                title
            }
        }
    })
    // Customize the V-ctext binding data
    app.directive('ctext', {mounted(el,{value}){
            el.textContent=value;
        }
    })
    app.mount("#app")
</script>
Copy the code

In the above cases, the operation result is the same as the function of V-text, but there are many situations that are not considered, such as monitoring data changes, whether there is a label destruction, etc., you can try it according to your own needs.

textContent

El. From the above code textContent = value, you can see that when we change the text changes for el with textContent, rather than the innerText, though when we in use at ordinary times feeling less than their differences, but they still have certain differences.

  1. TextContent gets the content of all elements, including script and style elements. In contrast, innerText shows only elements that are “human-readable.”
  2. TextContent returns each element in the node. In contrast, innerText knows the style and does not return the text of the “hidden” element.

You need to look at more differences

conclusion

  1. The use of V-text in Vue3 is no different than in Vue2, but data initialization has changed.

  2. In our study, we can first learn to use, and then learn to simulate the corresponding functions, and finally in-depth understanding of the source code, corresponding to you will have harvest, of course, learning methods vary from person to person.

For more articles, the portal has opened: Look back at the Vue3 catalogue!