Vue 中 v-pre、v-once、v-cloak 标签的深度解析与案例展示

目录

v-pre

v-once

​​​​​​​v-cloak

​​​​​​​v-cloak介绍

​​​​​​​插值表达式闪烁问题


v-pre


        当使用 v-pre 指令时,不会进行编译操作。所有的 Vue 模板语法都将得以完整保留,并会按照其初始的形态进行渲染。其中,最为常见的应用场景便是用于展示原始的双大括号标签及其包含的内容。

        示例代码如下:

<body>  
    <div id="app">  
        <p v-pre>{
  {msg}}</p>  
        <p>{
  {msg}}</p>  
    </div>  
</body>  
<script>  
    const {createApp}=Vue;  
    const app=createApp({  
        data(){  
            return{  
                msg:'v-pre'  
            }  
        }  
    })  
    app.mount('#app');  
</script>  

        分析:<p v-pre>{ {msg}}</p> 中运用了 v-pre 指令。这表明此元素及其内部的内容 { {msg}} 不会被 Vue 编译器解析,也不会进行数据绑定,而是会原原本本地呈现在页面上。

        最终在页面上所显示的文字将会是“{ {msg}}” ,并非将 { {msg}} 替换为 data 中相对应的属性值“v-pre”。

        运行结果,如下:

{ {msg}}

v-pre

​​​​​​​v-once


        使指定的元素或组件只渲染一次,在首次完成动态渲染后,便被视作静态内容,此后数据的变更不会导致 v-once 所在结构的更新。即便数据有所变化,它也不会被重新渲染。

        该指令无需表达式,能够应用于任何元素或组件,涵盖元素或组件的全部子节点。

        使用场景:适用于部分在初始化渲染完成后不再需要变动的元素或组件,诸如一些静态的展示内容。运用 v-once 能够规避不必要的重复渲染操作,进而对性能进行优化。

相关推荐

  1. Go语言Select:深度解析实战案例

    2024-07-12 18:06:03       54 阅读
  2. Vue组件v-model(深入解析

    2024-07-12 18:06:03       36 阅读
  3. 深入解析Memcached:C#应用实战案例

    2024-07-12 18:06:03       18 阅读
  4. Vue 防止页面闪烁 v-cloak

    2024-07-12 18:06:03       53 阅读
  5. HTML<br>、<hr>和<pre标签使用指南

    2024-07-12 18:06:03       25 阅读
  6. Vue v-if v-show 区别

    2024-07-12 18:06:03       48 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-12 18:06:03       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-12 18:06:03       71 阅读
  3. 在Django里面运行非项目文件

    2024-07-12 18:06:03       58 阅读
  4. Python语言-面向对象

    2024-07-12 18:06:03       69 阅读

热门阅读

  1. 大整数加法C++

    2024-07-12 18:06:03       19 阅读
  2. 【云原生】AWS云平台,ECR推送Helm chart包

    2024-07-12 18:06:03       20 阅读
  3. docker(一)

    2024-07-12 18:06:03       20 阅读
  4. TCP和HTTP之间的关系

    2024-07-12 18:06:03       18 阅读
  5. sql盲注

    sql盲注

    2024-07-12 18:06:03      23 阅读
  6. 数据库之锁

    2024-07-12 18:06:03       24 阅读
  7. kotlin distinctBy 使用

    2024-07-12 18:06:03       23 阅读
  8. 嵌入式Qt开发C++编程基础部分万字总结

    2024-07-12 18:06:03       19 阅读
  9. Oracle PL/SQL 循环批量执行存储过程

    2024-07-12 18:06:03       22 阅读
  10. 做支付需要了解哪些行业知识

    2024-07-12 18:06:03       21 阅读