V-once is used for basic purposes

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
     <h2>{{message}}</h2>
     <h2 v-once>{{message}}</h2>
</div>

<script src=".. /js/vue.js"></script>
<script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello vue'
            }
        })
</script>

</body>
</html>
Copy the code

V-once: does not change as the data changes and only displays the data for the first time

Basic use of V-HTML

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
    <h2>{{url}}</h2>
    <h2 v-html="url">{{url}}</h2>
</div>


<script src=".. /js/vue.js"></script>
<script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello vue',
                url: '
            }
        })
</script>

</body>
</html>
Copy the code

V-html converts THE HTML code into the corresponding content

V-text is basically used

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app"> <h2>{{message}}, </h2> <h2 v-text="message"</h2> </div> <script SRC =".. /js/vue.js"></script>
<script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello vue'
            }
        })
</script>

</body>
</html>
Copy the code

V-text will overwrite the following HTML

Basic use of v-Pre

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>
</div>

<script src=".. /js/vue.js"></script>
<script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello vue'
            }
        })
</script>

</body>
</html>
Copy the code

The V-Pre will display the text exactly as it was written, without parsing it

The basic use of V-CLOAK

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<div id="app" v-cloak>
        {{message}}
</div>

<script src=".. /js/vue.js"></script>
<script>
    Div has an attribute v-clock before vue parsed it
    // After vue parsing, there is no attribute v-clock in div
    setTimeout(function () {
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello vue'}})},1000)

</script>

</body>
</html>
Copy the code