vue学习笔记总结（Mustache, v-once, v-html, v-text, v-pre, v-cloak）

最新推荐文章于 2024-08-04 16:33:59 发布

summer_zhh

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量136

点赞数

文章标签： vue javascript css

本文链接：https://blog.csdn.net/summer_zhh/article/details/107979245

版权

vue中的插值操作

1. Mustache语法

mustache大括号语法。

在vue对象挂载的dom元素中，{{}}不仅可以直接写变量，还可以写简单表达式。

<body>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{message}},vue</h2>
    <!-- Mustache的语法不仅可以直接写变量，还可以写简单表达式 -->
    <h2>{{firstName + lastName}}</h2>
    <h2>{{firstName + " " + lastName}}</h2>
    <h2>{{firstName}}{{lastName}}</h2>
    <h2>{{count * 2}}</h2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        firstName:"zhang",
        lastName:"huihui",
        count:100
      }
    })

  </script>
</body>

2. v-once

v-once表示该dom元素只渲染一次，之后数据改变，不会再次渲染。

  <div id="app">
    <h2>{{message}}</h2>
    
    <!-- 只会渲染一次，数据改变不会再次渲染 -->
    <h2 v-once>{{message}}</h2>
  </div>

3. v-html

在某些时候我们不希望直接输出<a href='http://www.baidu.com'>百度一下</a>这样的字符串，而输出被html自己转化的超链接。此时可以使用v-html。

<div id="app">
    <!--不使用v-html，直接解析成字符串-->
    <h2>{{url}}</h2>
    <!--使用v-html，直接插入html-->
    <h2 v-html="url"></h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    const app = new Vue({
      el:"#app",
      data:{
        url:"<a href='http://www.baidu.com'>百度一下</a>"
      }
    })
</script>

4. v-text

v-text会覆盖dom元素中的数据，相当于js的innerHTML方法。

  <div id="app">
    <!--不使用v-text-->
    <h2>{{message}}，内容不会被覆盖</h2>
    <!--使用v-text，以文本形式显示,会覆盖-->
    <h2 v-text="message">，内容被覆盖</h2>
  </div>

使用{{message}}是拼接变量和字符串，而是用v-text是直接覆盖字符串内容。

5. v-pre

有时候我们希望直接输出{{message}}这样的字符串，而不是被{{}}语法转化的message的变量值，此时我们可以使用v-pre标签。

<div id="app">
    <!--不使用v-pre>-->
    <h2>{{message}}</h2>
    <!--使用v-pre,内容不会解析，显示字符串-->
    <h2 v-pre>{{message}}</h2>
</div>

6. v-cloak

在某些情况下，可能会出现页面加载延时的问题，造成页面显示从{{message}}到“你好啊”的闪动变化，严重影响用户体验。

此时可以使用v-cloak指令，在vue解析之前，div属性中有v-cloak这个标签，在vue解析完成之后，v-cloak标签被移除。类似div开始有一个css属性display:none;，加载完成之后，css属性变成display:block，元素显示出来。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-cloak指令的使用</title>
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <h2>{{message}}</h2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    //在vue解析前，div中有一个属性cloak
    //在vue解析之后，div中没有一个属性v-cloak
    setTimeout(() => {
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好啊"
        }
      })
    }, 1000);
  </script>
</body>

</html>

这里通过延时1秒模拟加载卡住的状态，结果一开始不显示message的值，div元素中有v-cloak的属性，1秒后显示message变量的值，div中的v-cloak元素被移除。

summer_zhh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记总结（Mustache, v-once, v-html, v-text, v-pre, v-cloak）

vue中的插值操作1. Mustache语法 mustache大括号语法。在vue对象挂载的dom元素中，{{}}不仅可以直接写变量，还可以写简单表达式。<body> <div id="app"> <h2>{{message}}</h2> <h2>{{message}},vue</h2>  <
复制链接

扫一扫