Vue指令概述

Posted MikrokosmosRun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue指令概述相关的知识,希望对你有一定的参考价值。

Vue指令概述

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>

以上是关于Vue指令概述的主要内容,如果未能解决你的问题,请参考以下文章

Vue指令概述

Vue指令概述

Vue指令概述

Vue简介及基本指令

Vue简介及基本指令

Vue简介及基本指令