二、VUE基础学习篇（插值操作）-Mustache语法、v-once、v-text、v-pre、v-html、v-cloak

最新推荐文章于 2022-09-20 16:43:22 发布

IT_CREATE

最新推荐文章于 2022-09-20 16:43:22 发布

阅读量431

点赞数 1

分类专栏： Vue学习文章标签： vue Mustache语法 v-once/v-text v-pre/v-html v-cloak

本文链接：https://blog.csdn.net/IT_CREATE/article/details/106578844

版权

Vue学习专栏收录该内容

13 篇文章 5 订阅

订阅专栏

码云实时更新学习demo地址：https://gitee.com/dxl96/vuexuexi

VUE基础篇（插值操作）

1、Mustache语法

Mustache语法 ，也就双大括号 {{ }} ，包裹的数据是响应式的，也就是可以实时替换 ,当vue实例中对应数据改变，页面渲染的值也会改变，它的作用范围是在内容中，不是在标签上，替换成的是vue实例对象中data属性对应的数据对象中的相应的属性值
Mustache语法支持：
----普通值替换
----简单的表达式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue插值操作</title>
</head>
<body>
<div id="app">

  <!-- ■【Mustache语法，也就双大括号，包裹的数据数据是响应式的，也就是可以实时替换 ,它的作用范围是在内容中，不是在标签上】-->

  <!--  mustache语法中普通值替换-->
  <h2>{{message}}</h2>
  <h2>{{message}} , 世界</h2>

  <!--  mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
  <h2>{{firstName + lastName}}</h2>
  <h2>{{firstName + "," + lastName}}</h2>
  <h2>{{firstName}}{{lastName}}</h2>
  <h2>{{counter * 2}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "你好呀",
      firstName: "篮球",
      lastName: "鸡你太美",
      counter: 100,
    }
  });
</script>
</body>
</html>

效果
在这里插入图片描述

2、v-once

v-once 会让标签里的内容只加载一次，如代码中的例子只在第一次加载该message的值，后续vue实例对象中message属性值的改变不会刷新标签里的内容,意思是标签中的message的值不会随着js中vue实例对象data中message属性值的变化而变化，也就是说，加了v-once的标签只在第一次加载对应的数据值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue插值操作</title>
</head>
<body>
<div id="app">
  <!--  ■v-once会让标签只在第一次加载该message的值，后续message改变不会随着数据改变进行实时响应式改变,意思是message的值不会随着vue实例对象data中message属性值的变化而变化-->
  <h2 v-once>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "你好呀"
    }
  });
</script>
</body>
</html>

效果
在这里插入图片描述

3、v-html

利用 v-html 标签属性，可以清晰的告诉vue标签的内容替换成html式的标签，并能够被解析识别后渲染出效果，意思是加了v-html的标签会把标签里的内容替换成能够被识别的对应的html式的标签，而不是普通文本

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue插值操作</title>
</head>
<body>
<div id="app">
  <!--  只是简单的替换成文本值，并不会去识别到该标签-->
  <h2>{{url}}</h2>
  <!--  ■利用v-html标签属性，可以清晰的告诉vue这里标签里的内容替换成html式的标签，并能够被解析识别后渲染出效果-->
  <h2 v-html="url"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      url: "<a href='http://www.baidu.com'>百度一下</a>"
    }
  });
</script>
</body>
</html>

效果
在这里插入图片描述

4、v-text

v-text 标签属性，会把标签里的内容替换成vue实例对象data属性中对应的属性值(名字相同的值)，比如下面代码中的v-text标签属性会获得message的值，并把标签里的内容替换成message的值，v-text会覆盖原本存在标签中的内容，v-text不够灵活，一般不使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue插值操作</title>
</head>
<body>
<div id="app">

  <!--  ■v-text标签属性会获得message的值，并把标签里的内容替换成message的值,并且会覆盖标签里的内容，v-text不够灵活，一般不使用-->
  <h2 v-text="message">世界</h2>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "你好呀"
    }
  });
</script>
</body>
</html>

效果
在这里插入图片描述

5、v-pre

v-pre 标签属性会将原封不动显示标签里的内容，也就是并不会去解析它，标签里怎么写的就怎么显示，就是把标签里的文本内容视作普通文本

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue插值操作</title>
</head>
<body>
<div id="app">
  <!--  ■v-pre标签属性会将原封不动显示标签里的内容，也就是并不会去解析它，标签里怎么写的就怎么显示，就是把标签里的文本内容视作普通文本-->
  <h2 v-pre>{{message}},世界</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "你好呀"
    }
  });
</script>
</body>
</html>

效果
在这里插入图片描述

6、v-cloak

v-cloak 标签的作用就是在程序执行过程中，执行到这里的时候，不会去显示标签里的内容，因为在css已经指定了v-cloak标签属性所在的标签下的内容不显示，也就是display: none,表示不进行显示，这么做的好处是什么呢，因为程序是至上而下的执行，刚开始的时候，html标签里的内容最开始会按照传统html的方式进行显示，之后在到达js时,新建了vue对象，才对之前的内容进行一个解析，也就是替换之前已经显示的内容，说明这里显示了两次，这个v-cloak标签属性的作用就是在第一次不去显示，当vue开始真正开始解析时，就会去掉所有的v-cloak这个标签属性，之前针对这个标签的css就不起作用了,然后显示解析后的内容，也就不会显示两次，因为显示两次之间时间比较快，所以我们可能没感觉，但是这就是它的显示过程，很明显这种不符合要求，要是计算机或者什么情况导致浏览器刷新变慢，你就会看到这种前后闪烁替换的刷新效果，影响体验。
总结一句话：v-cloak标签属性会在vue实例解析替换标签内容之前不渲染显示标签里的内容，当vue实例解析的时候会移除v-cloak标签渲染显示标签里的内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue插值操作</title>
  <style>
    /*隐藏*/
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
<!--
■v-cloak标签的作用就是在程序执行过程中，执行到这里的时候，会不去显示标签里的内容，因为上面css已经指定了v-cloak标签属性所在的标签下的内容不显示，也就是
display: none,表示不进行显示，这么做的好处是什么呢，因为程序是至上而下的执行，刚开始的时候，html标签里的内容最开始会按照传统html的方式进行显示，之后在
到达js时,新建了vue对象，才对之前的表亲内容进行一个解析，也就是替换之前已经显示的内容，说明这里显示了两次，这个v-cloak标签属性的作用就是在第一次不去显示，当
vue开始真正开始解析时，就会去掉所有的v-cloak这个标签属性，之前针对这个标签的css就不起作用了,然后显示解析后的内容，也就不会显示两次，因为显示两次之间时间比较快，
所以我们可能没感觉，但是这就是它的显示过程，很明显这种不符合要求，要是计算机或者什么情况导致浏览器刷新变慢，你就会看到这种前后闪烁替换的刷新效果，影响体验
-->
<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "你好呀"
    }
  });
</script>
</body>
</html>