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

文章目录一、mustache语法插值表达式v-once一、mustache语法插值表达式<body><div id='app'>{{firstName}}{{LastName}}{{firstName+LastName}}{{counter*2}}</div><scr

优雅哥cc

8192人浏览 · 2020-07-23 21:28:45

优雅哥cc · 2020-07-23 21:28:45 发布

文章目录

一、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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^