VUE指令篇_不常用指令

标题没错，就是几个不常用指令，T_T，先来说一下什么是指令，vue的指令是指以 v- 为前缀，具有特殊含义、拥有特殊功能的特性，可以直接使用data中的数据

1.v-pre

v-pre的作用是跳过这个元素和它的子元素的编译过程。可以用来显示原始的Mustache(插值表达式)标签，跳过大量没有指令的节点会加快编译

<div id="app"><div>{{ name }}</div><div v-pre>{{ age }}</div>
</div>

const vm = new Vue({el: '#app',data:{name: 'jwh',age: 18}
});

【结果】

2.v-cloak

v-cloak 指令保持在元素上直到关联实例结束编译，与 css 的 display 属性结合使用可以解决闪烁问题，即隐藏未编译的 mustache 标签，直到实例准备完毕。

闪烁问题：对于这个问题由于JavaScript去操作DOM，都会等待DOM加载完成（DOM ready）。对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template，所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。（这里引用了马优晨的博文，原文点击这里），下图就是页面闪烁的过程

v-cloak解决的代码如下

[v-cloak] {display: none;
}

<div id="app"><div v-cloak>{{ name }}</div>
</div>

const vm = new Vue({el: '#app',data: {name: 'jwh',}
});

【结果】

3.v-once

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

<div id="app"><div v-once><div>{{ name }}</div><div>{{ age }}</div></div>
</div>

const vm = new Vue({el: '#app',data: {name: 'jwh',age: 18}
});

【结果】可以看到修改name值后，该元素并没有重新渲染

4.v-text

v-text 的作用是更新textContent，与 {{ }} 不同的是，v-text 替换元素中所有的文本，而 mustache 只替换自己，不清空元素内容，举个栗子

<div id="app"><div>my name is {{ name }}</div><!-- 以上代码渲染为 my name is jwh --><div v-text='name'>my name is </div><!-- 以上代码渲染为 jwh -->
</div>

const vm = new Vue({el: '#app',data:{name: 'jwh',}
});

【结果】

【注】v-text的优先级高于 {{ }}

textContent 与innerText 比较

设置文本替换时，两者都会把指定节点下的所有子节点也一并替换掉
textContent 会获取所有元素的内容，包括 <script> 和 <style> 元素，而 innerText 不会
innerText 受 css 样式的影响，并且不会返回隐藏元素的文本，而 textContent 会
由于 innerText 受 css 样式影响，它会触发重排（reflow），但 textContent 不会
innerText 不是标准制定出来的 API，而是 IE 引入的，所以对 IE 支持更友好；textContent 虽然作为标准方法但是只支持 IE8+ 以上的浏览器，在最新的浏览器中，两个都可以使用
综上，Vue 这里使用 textContent 是从性能的角度考虑的

5.v-html

v-html 的作用是更新元素的 innerHTML

【注】内容按普通 HTML 插入，不会作为 Vue 模板进入编译，在网站上动态渲染任意 HTML 是非常威胁的，因为容易导致XSS攻击。只在可信内容上使用 v-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><input type="text" /><button>点击</button><div id="app"><div v-html="msg"></div></div>
</body>
<script>const vm = new Vue({el: '#app',data: {msg: 'hellow beauty'}});const oInput = document.getElementsByTagName('input')[0];const oButton = document.getElementsByTagName('button')[0];let msg = null;oButton.onclick = function () {vm.msg = oInput.value}
</script>
</html>

【结果】当我们在输入框输入一个input标签时，div中会出现一个输入框，我们是不希望发生这种情况的