Vue指令概述

Posted 2021-05-23 MikrokosmosRun

Vue指令概述

• • v-cloak指令
  • 数据绑定指令
  • • 1.v-text
    • 2.v-html
    • 3.v-pre
  • 数据响应式
  • • v-once

v-cloak指令

1.提供样式

 [v-clock]{
​        display: none;
​ }

2.在插值表达式所在的标签中添加v-clock指令

背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果。

<style type="text/css">
        [v-cloak] {
            display: none;
        }
</style>

<div id="app">
        <div>{{msg}}</div>

        <!-- v-cloak:防闪烁 -->
        <div v-cloak>{{msg}}</div>
</div>

<script>
        var vm = new Vue({
            el: '#app', 
            data: { 
                msg: 'Hello Vue'
            }
        });
</script>

数据绑定指令

1.v-text

用于填充纯文本。

没有闪烁问题，相比插值表达式v-cloak更加简洁好用。

<div id="app">
      <div v-text='msg'></div>
</div>

<script>
        var vm = new Vue({
            el: '#app', 
            data: { 
                msg: 'Hello Vue'
            }
        });
</script>

2.v-html

用于填充HTML片段。

1.存在安全问题

2.本网站内部数据可以使用，来自第三方的数据不可以用。

<div id="app">
      <div v-html='msg'></div>
</div>

<script>
        var vm = new Vue({
            el: '#app', 
            data: { 
                msg: '<h1>HTML</h1>'
            }
        });
</script>

3.v-pre

用于填充原始信息。

显示原始信息，跳过编译过程（分析编译过程）。

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

<script>
        var vm = new Vue({
            el: '#app', 
            data: { 
                msg: 'Hello Vue'
            }
        });
</script>

数据响应式

v-once

显示一次之后不再具有响应式的功能，即后续不会再修改其值。

v-once的应用场景：如果显示的信息后续不需要再修改，可以使用v-once，这样可以提高性能。

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

<script>
        var vm = new Vue({
            el: '#app', 
            data: { 
                  info: 'Hello!'
            }
        });
</script>