当前位置：网站首页>6. common instructions (upper) v-cloak, v-once, v-pre

6. common instructions (upper) v-cloak, v-once, v-pre

2022-06-25 23:53:00 【Rice bowl on the other side】

v-cloak

v-cloak The function of instruction is vue End of association after sample rendering

The double brace interpolation syntax will display the precompiled text when encountering network delay

<body>
    <div id="app">
        <p>{
   {a}}</p>
    </div>
    <script src="vue.js"></script>
    <script> var vue=new Vue({
      el:"#app", data:{
      a:" I am the instruction of rendering  v-cloak" }, }) </script>
</body>

Here it is , We can use v-cloak combination CSS Solve the problem of double brace rendering

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> [v-cloak]{
      display: none; } </style>
</head>
<body>
    <div id="app">
        <p v-cloak>{
   {a}}</p>
    </div>
    <script src="vue.js"></script>
    <script> var vue=new Vue({
      el:"#app", data:{
      a:" I am the instruction of rendering  v-cloak" }, }) </script>
</body>

[v-cloak]css The selector selects html In the structure v-cloak Properties of , The element setting with this attribute display by none, because v-cloak This attribute is in vue After the instance of is loaded, the results are associated , So you need the hidden state of this element , The result is , Or blank , Or display the compiled text .

v-once

v-once The function of is to render the corresponding element only once , Data updates do not cause view updates , The goal is to optimize the page .

<body>
    <div id="app">
       <h2 v-once>{
   {a}}</h2>
       <button @click="add"> I'll add one </button>
       <button @click="minus"> Point I minus one </button>
    </div>
    <script src="vue.js"></script>
    <script> var vue=new Vue({
      el:"#app", data:{
      a:100 }, methods:{
      add(){
      this.a++ console.log(this.a) }, minus(){
      this.a-- console.log(this.a) } } }) </script>
</body>

Insert picture description here Usage scenarios usually have no dynamic element content , For example, some articles , Some fixed titles

v-pre

v-pre The function of attributes ： Skip the compilation of this element , Directly display the text inside the element , The function is to skip a large number of nodes without instructions .

<h2 v-pre>{
   {a}}</h2>

Insert picture description here
What the browser shows is that it has not been compiled h2 The text content in the element ,v-pre The advantage of property is to optimize the loading performance of the page