Vue学习5

最新推荐文章于 2024-06-27 22:42:30 发布

aneyal

最新推荐文章于 2024-06-27 22:42:30 发布

阅读量471

点赞数 1

分类专栏：前端学习文章标签：学习前端 javascript vue

本文链接：https://blog.csdn.net/aneyal/article/details/124223100

版权

前端学习专栏收录该内容

47 篇文章 2 订阅

订阅专栏

内置指令

vue内置的一些指令，之前的v-on、v-bind等都属于内置指令

v-text指令

作用类似于插值语法

<body>
    <!-- 阻止Vue在启动时生成生产提示 -->
    <div class="root">
        <!-- 使用插值语法 -->
        <div>{{name}}</div>
        <!-- 使用v-text -->
        <div v-text='name'></div>
    </div>
    <script>
        Vue.config.productionTip=false
        new Vue({
            el:'.root',
            data:{
                name:'yes'
            }
        })
    </script>
    
</body>

作用：向所在节点中渲染文本内容

区别是v-text会将数据代替整个标签元素里的内容，所以插值语法更灵活

v-html

基本使用

v-html和v-text使用方法基本相同，不同点是v-html可以解析内容里面的html结构，v-text不能。

安全性问题

v-text存在安全性问题

在网站上动态渲染任何html是非常危险的，容易导致XSS攻击

所以要在可信内容上使用v-html，不要在用户提交的内容上使用

v-clock指令

防止闪现表达式，常与css配合

使用方法是在节点标签内加入v-clock，然后设置css样式：[v-clock]{display:none;}，表示具有v-clock属性的节点隐藏。在运行时，当vue创建完毕后，v-clock会自动从节点内删去，节点显示

v-once

v-once也是作为一个属性加入节点

v-once所在的节点在初次动态渲染之后，就被视为静态内容，以后数据的改变不会再引起v-once所在结构的更新。

v-pre

也是作为一个属性加入节点，可以让所在节点跳过编译过程。所以可以利用其来跳过没有使用指令语法、没有使用插值语法的节点，加快编译速度

自定义指令

Vue中我们可以根据我们的实际需求，定义我们所需要的指令

定义自定义属性有两种方法——函数式、对象式

函数式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div class="root">
        <h3>当前n值是：<span v-text='n'></span></h3>
        <!-- 定义一个自定义属性v-big，其作用和v-text相似，只是会把N的值放大十倍 -->
        <h3>放大十倍后，当前n值是：<span v-big='n'></span></h3>
        <!-- 点击按钮，n++ -->
        <button @click='n++'>点击增加n</button>
    </div>
    <script>
        Vue.config.productionTip=false
        new Vue({
            el:'.root',
            data:{
                n:1,
            },
            // 使用directives表示自定义属性
            directives:{
                // 函数式
                // 会收到两个参数
                // 一个是调用指令的真实DOM元素
                // 一个是一个对象，其中的属性value的值就是调用自定义属性时传入的值
                // 指令和元素绑定成功时会调用该函数、指令所在的模版被重新解析时也会被调用
                big(element,binding){
                    element.innerText=binding.value*10
                }
            }

        })
    </script>
    
</body>
</html>

对象式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div class="root">
        <!-- 定义一个自定义属性v-fbind，其作用和v-bind相似，但其可以让其绑定的元素获取焦点 -->
        <input type="text" v-fbind:value='n'>
    </div>
    <script>
        Vue.config.productionTip=false
        new Vue({
            el:'.root',
            data:{
                n:1,
            },
            // 使用directives表示自定义属性
            directives:{
                // 对象式
                fbind:{
                    // 对象中可以写多个函数
                    // 每个函数都会在特定时间被调用，其名字不能更改
                    // 函数的参数和使用函数式定义自定义指令是一样
                    // bind()函数表示当指令和元素绑定时调用
                    bind(element,binding){
                        element.value=binding.value;
                    },
                    // inserted()函数在指令所在元素被插入页面时调用
                    inserted(element,binding){
                        element.focus();
                    },
                    // update()函数在指令所在模版被重新解析时调用
                    update(){
                        element.focus();

                    }
                }
            }
        })
    </script>   
</body>
</html>