Vue-学习笔记-02 指令详解

最新推荐文章于 2022-03-11 20:25:21 发布

优雅哥cc

最新推荐文章于 2022-03-11 20:25:21 发布

阅读量8.1k

点赞数 1

分类专栏： Vue学习笔记文章标签： vue指令 v-cloak原理 v-text v-html

本文链接：https://blog.csdn.net/weixin_43742708/article/details/107546732

版权

Vue学习笔记专栏收录该内容

23 篇文章 8 订阅

订阅专栏

文章目录

一、mustache(胡子、胡须)语法插值表达式
二、v-once 只执行一次
三、v-html 可以执行HTML代码
四、v-text 将数据显示在界面中
五、v-pre 原样输出
六、v-cloak 可以解决插值表达式暴露的问题

一、mustache(胡子、胡须)语法插值表达式

<body>
    <div id='app'>
        {{firstName}}{{LastName}}
        <!-- mustache不仅可以下变量 还可以写简单的表达式 -->
        {{firstName+LastName}}
        {{counter*2}}
    </div>
    
    <script src='../../js/vue.js'></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                firstName:'Peng',
                LastName:'Sir',
                counter:100
            }
        })
    </script>
</body>

效果：
在这里插入图片描述

二、v-once 只执行一次

数据不会因为更新了而更新页面
实际应用效果是：数据更新了，页面不更新

<body>
    <div id='app'>
        <h2>{{message}}</h2>
        <h2 v-once>{{message}}</h2>
    </div>
    
    <script src='../../js/vue.js'></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                message:'test'
            }
        })
    </script>
</body>

效果：
在这里插入图片描述

三、v-html 可以执行HTML代码

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，
绝不要对用户提供的内容使用v-html。

<body>
    <div id='app'>
        <h2>{{message}}</h2>
        <h2 v-html='url'></h2>
    </div>
    
    <script src='../../js/vue.js'></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                message:'<a href="www.baidu.com">百度</a>',
                url:'<a href="www.baidu.com">百度</a>'
            }
        })
    </script>
</body>

效果：在这里插入图片描述

四、v-text 将数据显示在界面中

v-text作用和Mustache比较相似：都是用于将数据显示在界面中
v-text通常情况下，接受一个string类型

但是该方法不够灵活，实际开发中用插值表达式多一些

<body>
    <div id='app'>
        <h2>{{message}}测试文本1</h2>
        <h2 v-text='message'>测试文本2</h2>
    </div>
    
    <script src='../../js/vue.js'></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                message:'test'
            }
        })
    </script>
</body>

效果;
在这里插入图片描述

五、v-pre 原样输出

不过我们就想原样输出插值表达式或特殊符号，可以使用 v-pre

<body>
    <div id='app'>
        <h2>{{message}}</h2>
        <h2 v-pre>{{message}}</h2>
    </div>
    
    <script src='../../js/vue.js'></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                message:'test'
            }
        })
    </script>
</body>

效果：
在这里插入图片描述

六、v-cloak 可以解决插值表达式暴露的问题

配合:

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

原理：vue在解析之前是有v-cloak这个指令的，在解析完成之后会删除v-cloak这个指令。
所以可以说是解决了插值闪动的问题，实际就是一个隐藏与显示的原理。

<body>
    <div id='app'>
        <h2>{{message}}</h2>

        <!-- vue解析完成之后，会删除v-cload指令 -->
        <!-- <h2 v-cloak>{{message}}</h2> -->
    </div>
    
    <script src='../../js/vue.js'></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                message:'test'
            },
            methods:{
                
            }
        })
    </script>
</body>