Vue2.0学习笔记-1、v-cloak作用以及{{}}(插值表达式)、v-text和v-html的共同点和不同点

最新推荐文章于 2023-04-18 01:38:06 发布

不收藏找不到我

最新推荐文章于 2023-04-18 01:38:06 发布

阅读量201

点赞数

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_41364246/article/details/109562867

版权

vue学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1、v-cloak的作用:
让我们看下面这段代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{msg}}</div>
  </body>
  <script>
    setTimeout(function () {
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "第一个vue实例",
        },
      });
    }, 2000);
  </script>
</html>

(1)在不使用v-cloak指令的情况下：
定时器内的函数执行前:

页面上会渲染{{msg}}
2秒后，定时器内函数执行时，则显示如下：
在这里插入图片描述
(2)使用v-cloak指令后:
代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>{{msg}}</div>
  </body>
  <script>
    setTimeout(function () {
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "第一个vue实例",
        },
      });
    }, 2000);
  </script>
</html>

定时器内函数执行前:
在这里插入图片描述
结论:使用v-cloak指令可以解决使用插值表达式时出现的插值表达式闪烁问题。
我的发现:上面的结论只是v-cloak指令的一个应用之一，实际上，v-cloak的作用是给元素定义一个vue实例解析之前的元素样式。
代码更改成下面这样：

    <style>
      [v-cloak] {
        display: block;
        background-color: red;
        width: 200px;
        height: 200px;
      }
    </style>

那么此时，定时器内函数执行前的页面渲染情况如下：
在这里插入图片描述
2、v-text的作用:
结论:使用v-text指令不会出现上面提及到的文字内容闪烁问题，即不需要使用v-cloak指令也不会出现上面的问题。
但是和插值表达式相比，它不支持文字混入：
示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app1">混入{{msg1}}</div>
    <div id="app2" v-text="msg2">混入</div>
  </body>
  <script>
    setTimeout(function () {
      var vm1 = new Vue({
        el: "#app1",
        data: {
          msg1: "app1,第一个vue实例",
        },
      });
      var vm2 = new Vue({
        el: "#app2",
        data: {
          msg2: "app2,第一个vue实例",
        },
      });
    }, 2000);
  </script>
</html>

其执行结果如下：
在这里插入图片描述
并且v-text指令和插值表达式都不会解析html标签：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app1">混入{{msg1}}</div>
    <div id="app2" v-text="msg2">混入</div>
    <div id="app3">{{msg3}}</div>
    <div id="app4" v-text="msg4">混入</div>
  </body>
  <script>
    setTimeout(function () {
      var vm1 = new Vue({
        el: "#app1",
        data: {
          msg1: "app1,第一个vue实例",
        },
      });
      var vm2 = new Vue({
        el: "#app2",
        data: {
          msg2: "app2,第一个vue实例",
        },
      });
      var vm3 = new Vue({
        el: "#app3",
        data: {
          msg3: "<h1>app3,第一个vue实例</h1>",
        },
      });
      var vm4 = new Vue({
        el: "#app4",
        data: {
          msg4: "<h1>app4,第一个vue实例</h1>",
        },
      });
    }, 2000);
  </script>
</html>

执行效果：
在这里插入图片描述
我的发现:v-text指令在vue实例被解析前，混入的文字会显示出来，即上面的代码在定时器内函数执行前的效果是下面这样的：即实际上，如果html标签内有内容，那么也会出现文字闪烁问题

3、v-html
结论:v-html指令的效果和v-text指令相同，除此之外，它能解析html标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app1" v-html="msg1">混入</div>
  </body>
  <script>
    setTimeout(function () {
      var vm1 = new Vue({
        el: "#app1",
        data: {
          msg1: "<h1>app1,第一个vue实例</h1>",
        },
      });
    }, 2000);
  </script>
</html>

效果：

总结

指令	是否出现文字闪烁	是否支持文字混入	是否能够解析html标签
{{}}(插值表达式)	是	是	否
v-text	否，标签内有内容也会出现闪烁	否	否
v-html	否，标签内有内容也会出现闪烁	否	是

不收藏找不到我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue2.0学习笔记-1、v-cloak作用以及{{}}(插值表达式)、v-text和v-html的共同点和不同点

1、v-cloak的作用:让我们看下面这段代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <scrip
复制链接

扫一扫

专栏目录