vue：指令（插值操作、指令（v-once、v-html、v-text、v-pre、v-cloak））

2020-08-13 08:01:10 阅读：174 来源： 互联网

标签：pre el vue const app 指令 new message data

1、插值操作（显示data中的数据）

（1）Mustache

Mustache也就是双大括号

（2）Mustache的基本使用

<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2>{{message+'  '+name}}</h2>
    <h2>{{num*2}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:document.querySelector("#app"),
        data:{
            message:'你好',
            name:'zhai',
            num:23,
        }
    })
</script>
</body>

不仅可以取出数据，还可以对取出的数据进行一些简单的计算。

2、基础指令

（1）v-once指令

<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:document.querySelector("#app"),
        data:{
            message:'你好',
        }
    })
</script>
</body>

将响应式变成了非响应式，只会在第一次展示数据，不会随着数据的改变而改变

（2）v-html

<body>
<div id="app">
    <h2>{{url}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:document.querySelector("#app"),
        data:{
            url:'<a href="https://www.cnblogs.com/zhai1997/"></a>'
        }
    })
</script>
</body>

不添加标签的时候被解析为文本

<body>
<div id="app">
    <h2>{{url}}</h2>
    <h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:document.querySelector("#app"),
        data:{
            url:'<a href="https://www.cnblogs.com/zhai1997/">博客园</a>'
        }
    })
</script>
</body>

添加v-html后url可以被解析为地址

（3）v-text

<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2 v-text="message"></h2>

</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:document.querySelector("#app"),
        data:{
            message:"你好",
        }
    })
</script>
</body>

能够显示数据，但是与Mustache相比，v-text不够灵活

（4）v-pre

<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:document.querySelector("#app"),
        data:{
            message:"你好",
        }
    })
</script>
</body>

用于跳过这个元素和它的子元素的编译过程，用于显示原本的Mustache语法

（5）v-cloak

在vue解析之前，div中有一个属性v-cloak，当vue解析之后该属性就消失了

标签：pre,el,vue,const,app,指令,new,message,data
来源： https://www.cnblogs.com/zhai1997/p/13494201.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue：指令（插值操作、指令（v-once、v-html、v-text、v-pre、v-cloak））