2021-11-03 Vue的计算属性与钩子函数

最新推荐文章于 2024-07-25 11:26:35 发布

YPX_早起的鸟儿

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量79

点赞数

文章标签： html

本文链接：https://blog.csdn.net/YPX_YGWW/article/details/121131180

版权

计算属性--computed

为什么要使用计算属性?

视图层是用来展示数据的 但是我们却在视图层中处理数据 不太合适

<!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="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demoDiv">
        <h1>{{text}}</h1>
        <h1>大写展示:{{text.toUpperCase()}}</h1>
        <h1>大写加截取展示:{{text.toUpperCase().substr(1,4)}}</h1>
        <!-- 一般处理数据不在v层,即视图层,为了处理数据,后面引出计算属性 -->
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
                text:"abcdefghijk"
            },
            
        })
    </script>
    
</body>
</html>

什么是计算机属性

计算属性它是一个Vue实例下的属性这个属性是带有计算(data数据的)功能的他会时时刻的盯着data中的数据当data的数据改变了它也会知道重新计算并且在返回出计算之后的结果

一条数据在不同的位置展示不同形态的时候使用

语法:

computed:{

你计算之后返回的数据变量(){

return 你处理数据的逻辑

}

<!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="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="oDiv">
        <h1> {{text}} </h1>
        <h1>  大写: {{ upptext}} </h1>

    </div>
    <script>
        new Vue({
            el:"#oDiv",
            data:{
                text:"abcdefghijk"
            }, 
            methods:{

            },
            watch:{

            }, 
            computed:{
                upptext(){
                    return this.text.toUpperCase();
                }
            }
            // 注意写法
        })
    </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="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="oDiv">
        <h1> {{text}} </h1>
        <h1>  大写: {{ upptext}} </h1>
        <hr>
        <h1>{{fun()}}</h1>

    </div>
    <script>
        new Vue({
            el:"#oDiv",
            data:{
                text:"abcdefghijk"
            }, 
            methods:{
                fun(){
                    console.log("我是方法");
                   return this.text.toUpperCase();
                }

            },
            watch:{

            }, 
            computed:{
                upptext(){
                    console.log("我是计算属性");
                    return this.text.toUpperCase();
                }
            }
            // 注意写法
        })
    </script>
    
</body>
</html>

计算属性是依赖于缓存的也就是说计算属性处理的数据在第一次处理好之后就会把结果存储在内存中只要处理的数据不变那么无论我们调用多少次它的数据都是从缓存中读取出来

方法方法只要被调用就会执行方法比较消耗性能

计算属性与watch的区别

watch 监听一个data数据当这个data数据改变的时候 watch就会触发一个函数完成一些指定的功能（异步操作开销较大的逻辑）

计算属性依赖一个data的数据当这个数据改变了他会重新计算这个数据返回结果

vue的事件对象

$event 来描述事件对象

<!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="../node_modules/vue/dist/vue.min.js"></script>
    <style>
         .content{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="demoDiv">
        <h1>事件对象的使用</h1>
        <button @click="fun($event)"> 点我得到事件对象</button>
        <hr>
        <input type="text" @keydown="change($event)">
        <input type="text" @keydown.enter="changeb($event)">
        <hr>
        <button @click.once="funb()"> 点我触发事件</button>
        <hr>
        <div class="content" @click="divClick()">
            <button @click.stop="btnClick()">点我</button>
        </div>


    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{

            },
            methods:{
                divClick(){
                    console.log("div");
                },
                btnClick(){
                    console.log("btn");
                },
                funb(){
                    console.log("你好");
                },
                change(xiaoming){
                    if(xiaoming.keyCode==65){
                        console.log("a被按下了");
                    }
                },
                changeb(){
                    console.log("回车");
                },
                fun(xiaoming){
                    console.log(xiaoming.target);
                }


            },
            watch:{

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

事件修饰符

就是帮助我们来修饰一些在触发事件过程中的一些细节

修饰符: @事件:修饰符

按键修饰符

.prevent 阻止事件默认行为

.stop 阻止冒泡

.captrue 设置当前为捕获事件

.once 当前事件只触发一次

.self 只会触发自身的事件不包含子元素

过滤器与全局局部

全局与局部

全局就是所有Vue实例中都可以使用

局部就是只能在当前实例中使用

自定义过滤器---filter

在不改变原始数据的情况下格式化展示内容

全局过滤器----filter

写在创建vue实例之前

Vue.filter( "过滤器的名字", (你要过滤的数据)=>{

return 你过滤的逻辑

} )

<!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="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiva"> {{text|xiaoming}}</div>

    <div id="demodivb">{{text|xiaoming}} </div>
    <script>
        // 写在实例之前
        Vue.filter("xiaoming",(val)=>{
            return "<<"+val+">>"
        })


        new Vue({
            el:"#demodiva",
            data:{
               text:"红楼梦"
            }
        })
        new Vue({
            el:"#demodivb",
            data:{
               text:"西游记"
            }
        })
 </script>

    
</body>
</html>

使用:

| 管道符来进行使用数据|过滤器的名字

  <div id="demodiva"> {{text|xiaoming}}</div>

局部过滤器---filters

写在想使用这个过滤器的实例中与el data methods watch computed 同级

filters:{

过滤器的名字（val 你要过滤的数据会自动传入）{

return 你过滤的逻辑

}

<!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="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiva">{{text|xiaoming}} </div>

    <div id="demodivb"> {{text|xiaoming}} </div>
    <script>
        new Vue({
            el:"#demodiva",
            data:{
                text:"我是第1个"
            },
            filters:{//局部过滤器
                xiaoming(val){
                    return "<<"+val+">>"
                }
            }
        })
        new Vue({
            el:"#demodivb",
            data:{
                text:"我是第2个"
            }
        })
    </script>
</body>
</html>

扩展--内置过滤器

在vue2x之后内置过滤器已经移除了所以在vue2.0之后就没有内置过滤器了

钩子函数

在特定阶段内被自定执行的函数就叫做钩子函数

YPX_早起的鸟儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-11-03 Vue的计算属性与钩子函数

计算属性--computed为什么要使用计算属性?视图层是用来展示数据的但是我们却在视图层中处理数据不太合适<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="...
复制链接

扫一扫