Vue学习—深入剖析相关指令

一、v-相关指令

1.v-pre

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

vue的渲染数据的规则
将dom里<div id="app">{{ msg }}</div>的内部编译成<div id="app">天气真好！</div>替换原来的<div id="app">{{ msg }}</div>

<div id="app" v-pre>
    {{ msg }}
    <span>{{ msg }}</span>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg: '天气真好！'
        }
    })
</script>

<div id="app">
    {{ str }}
    <span v-pre>{{ str }}</span>
</div>

2.cloak

• 这个指令保持在元素上直到关联实例结束编译（1.中讲述的vue渲染数据的规则）
• 可以解决闪烁的问题(当某些原因，vue还未加载完成，页面会显示出‘{{ *** }}’等，加载完成后会闪烁一下渲染我们设置的数据)
• 和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

<style>
    [v-cloak]{
        display: none;
    }
</style>

<div id="app" v-cloak>{{ msg }}</div>//加载出vue.js前不会显示{{ msg }}，直到加载完成后直接渲染成数据

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg: '天气真好！'
        }
    })
</script>

3.v-once

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

<div id="app" v-once>{{ msg }}
    <span>{{ msg }}</span>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg: '天气真好！'
        }
    })
</script>

页面不会响应，div#app和子元素span都不会重新渲染

如果：

<div id="app">{{ msg }}
    <span v-once>{{ msg }}</span>
</div>

4.v-text

• 更新元素的 textContent

<div id="app">
    -+{{ msg }}+-      //插值表达式-+不会被替换渲染
    <span v-text='msg'>-+{{ msg }}+-</span>   //v-text元素内所有文本被替换
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg: '天气真好！'
        }
    });
</script>

• v-text 优先级高于 {{ 插值表达式 }}

textContent VS innerText

1. 设置文本替换时，两者都会把指定节点下的所有子节点也一并替换掉。
2. textContent 会获取所有元素的内容，包括 <script>和 <style>元素，然而 innerText 不会。

<div id="demo">
    ---+++
    <script>
        const a = 1;
    </script>
    <style>
        #demo{border: 1px solid red}
    </style>
</div>
<script>
    console.log(demo.textContent);
    console.log(demo.innerText);
</script>

3. innerText 受 CSS 样式的影响，并且不会返回隐藏元素的文本，而textContent会。
4. 由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但textContent 不会。

<div id="demo">
    <span style="display: none;">
        span元素
    </span>
</div>
<script>
    console.log(demo.textContent);
    console.log(demo.innerText);
</script>

5. innerText 不是标准制定出来的 api，而是IE引入的，所以对IE支持更友好。textContent虽然作为标准方法但是只支持IE8+以上的浏览器，在最新的浏览器中，两个都可以使用。
6. 综上，Vue这里使用textContent是从性能的角度考虑的。

5.v-html

• 更新元素的innerHTML
• 注意：内容按普通 HTML 插入，不会作为 Vue 模板进行编译
• 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

<input type="text" />
<button>点击</button><!-- 放在vue模板外面，防止渲染数据时被替换 -->

<div id="app">
    <div v-html="msg"></div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg: '今天阳光明媚！'
        }
    });
    const oInput = document.getElementsByTagName('input')[0];
    const oButton = document.getElementsByTagName('button')[0];
    oButton.onclick = function () {
        vm.msg = oInput.value;
    };
</script>

如果被XSS注入攻击：

二、条件渲染

1.v-if

• 用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

<div id="app">
    <span v-if='A'>今天天气怎么样？</span>
    <span v-else-if='B'>阳光明媚！</span>
    <span v-else-if='C'>鬼的，风雨大作！</span>
    <span v-else='D'>你们怕是中邪了！</span>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg: '天气真好！',
            A: undefined,
            B: null,
            C: '',
            D: []
        }
    })
</script>

• 切换多个元素：因为 v-if 是一个指令，所以必须将它添加到一个元素上，但是如果想切换多个元素呢？此时可以把一个 <template>元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template>元素

<template v-if="ok">//其它元素包裹会使页面多一个元素，使用template则不会
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

2.v-else

• 为 v-if 或者 v-else-if 添加“else 块”。
• 注意：前一兄弟元素必须有 v-if 或 v-else-if

<div id="app">
    <span v-if='A'>今天天气怎么样？</span>//A:null,为真则显示该文本值
    <span>阳光明媚！</span>
    <span v-else='C'>鬼的，风雨大作！</span>
</div>

3.v-else-if

• 表示 v-if 的 “else if 块”。可以链式调用。
• 注意：前一兄弟元素必须有 v-if 或 v-else-if

<div id="app">
    <span v-if='A'>今天天气怎么样？</span>//A:null,为真则显示该文本值
    <span>阳光明媚！</span>
    <span v-else-if='C'>鬼的，风雨大作！</span>
</div>

4.v-show

• 根据表达式之真假值，切换元素的 display CSS 属性。

<div id="app">
    <span v-show='B'>你能看见我吗？</span>
</div>

5.v-if VS v-show

1. v-if 是惰性的，如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。v-show则不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

<div id="app">
    <span v-if='A'>A为null</span>
    <span v-show='B'>你能看见我吗？</span>
</div>

2. v-if 有更高的切换开销，v-show 有更高的初始渲染开销，如果需要非常频繁地切换，则使用 v-show 较好，如果在运行时条件很少改变，则使用 v-if 较好
3. v-show不支持<template>元素，因为它是通过改变元素的style
4. v-show不支持v-else/v-else-if