学习vue的第八天

最新推荐文章于 2024-07-25 17:51:45 发布

Kuala_

最新推荐文章于 2024-07-25 17:51:45 发布

阅读量159

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Kuala_/article/details/126235531

版权

过滤器

定义：对要显示的数据进行特点格式化后再显示（适用于一些简单的逻辑处理）。

语法：

注册过滤器：Vue.filter(name,callback)或new Vue{filters:{}}
使用过滤器：{{ ××× | 过滤器名}} 或 v-bind:属性 = “××× |过滤器名"
备注：

过滤器也可以接收额外参数、多个过滤器也可以串联

并没有改变原来的数据，是产生新的对应数据

<!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>过滤器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.4/dayjs.min.js"></script>
</head>
<body>
    <div id="root">
     <h3>现在是 :{{time | timeFormater('YYYY_MM_DD ') | mySlice()}}</h3>
    </div>
</body>
<script>
    Vue.filter('mySlice',function(value){
        return value.slice(0,4)
    })
    new Vue({
        el:'#root',
        data:{
            time:1659935901660,
        },
        //局部过滤器
        filters:{
            timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
                return dayjs(value).format(str)
            },
            // mySlice(value){
            //     return value.slice(0,4)
            // }
        }
    })
</script>
</html>

v-cloak

本质是一个特殊的属性，Vue实例创建完毕并接管容器后，会删除v-cloak属性。
使用css配合v-cloak可以解决网速慢时页面展现出{{×××}}的问题。

v-once

加入v-once属性之后，插值语法便不会改变数值
v-once没有值

v-pre

跳过其所在节点的编译过程。
可利用它跳过不需要Vue渲染的节点，可加快编译。

自定义指令

顾名思义就是自己定义的指令，要自己操控DOM元素定义指令，有两种形式

函数式

<!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>自定义指令—函数式</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="root">
     <h2>{{name}}</h2>
     <h2>当前的值是：<span v-text="n"></span></h2>
     <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
     <button @click="n++">点我n+1</button>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            name:'lq',
            n:1
        },
        directives:{
            //big函数什么时候被调用？1.指令与元素成功绑定时（一上来）2.指令所在的模板被重新解析时。
            big(element,binding){
                element.innerText = binding.value * 10
            }
        }
    })
</script>
</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>自定义指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="root">
     <h2>{{name}}</h2>
     <h2>当前的值是：<span v-text="n"></span></h2>
     <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
     <button @click="n++">点我n+1</button>
     <input type="text" v-fbind:value = "n">
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            name:'lq',
            n:1
        },
        directives:{
            //big函数什么时候被调用？1.指令与元素成功绑定时（一上来）2.指令所在的模板被重新解析时。
            big(element,binding){
                element.innerText = binding.value * 10
            },
            fbind:{
                //指令与元素成功绑定时
                bind(element,binding){
                element.value = binding.value
                },
                //指令所在的元素被插入页面时
                inserted(element,binding){
                element.focus()
                },
                //指令所在的模板被重新解析时
                update(element,binding){
                    element.value = binding.value
                    element.focus()
                }
            }
        }
    })
</script>
</html>

总结：

定义语法：

局部指令：函数式和对象式

全局指令：

Vue.directive(指令名，配置对象)或Vue.directive(指令名，回调函数)
配置对象中常用的三个回调：

（1）.bind:指令与元素成功绑定时调用。

（2）.inserted:指令所在的元素插入页面时调用。

（3）.update:指令所在的模板被重新解析时调用。
备注：

（1）.指令定义时不加v-，但使用时要加v-。

（2）.指令名如果是多个单词建议用 — 连接，但是定义时要加’ ‘。

（3）.directives里面的this都是指向window。