Vue属性、生命周期、过滤器

最新推荐文章于 2024-07-11 10:59:33 发布
最新推荐文章于 2024-07-11 10:59:33 发布
阅读量255 收藏 6
点赞数 4
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwdkkk/article/details/136974614
版权
本文详细介绍了Vue.js中computed计算属性的使用规则，以及watch监听属性的监听机制，包括简写和深度监听。同时对比了两者之间的区别，并通过示例展示了在实际项目中的应用，以及生命周期函数和过滤器的运用。
摘要由CSDN通过智能技术生成

Vue属性

computed计算属性

定义：要用的属性不存在，需要通过已有的计算属性得来

  规则：
    1.用已有的属性计算不存在的属性
    2.默认调用一次get()
    3.简写：只有值不发生改变才可以是用简写（函数），值发生改变必须使用对象，才可以配置set()方法
    4.底层原理使用Object.definproperty(目标对象,键名,{get(){},set(value){}})

 computed:{
            str(){
                return this.bool?"炎热":"凉爽"
            }
        },

watch监听属性

规则：
1.监听已存在的属性
2.immediate:true默认调用一次，false不会
3.简写：只有handler方法才可以简写。写法:监听的属性(新值,旧值){}
4.监听对象中的值需要深度监听，deep:true

   watch:{
            obj:{
                immediate:false,
                deep:true,
                handler(newVlaue,oldValue){
                    console.log("--------obj-------");
                    console.log(newVlaue);
                    console.log(oldValue);
                }
            },
            bool:{
                immediate:true,
                handler(newVlaue,oldValue){
                    console.log(newVlaue);
                    console.log(oldValue);
                    if(newVlaue==true){
                        this.userName = "张三";
                        this.obj.id = 100;
                    }else{
                        this.userName = "李四";
                        this.obj.id = 99;
                    }
                }
            },
            str(newVlaue,oldValue){
                console.log(newVlaue);
                console.log(oldValue);
                console.log(this);
            }
        },

computed计算和watch监听属性的区别

区别：
1.computed能做的watch都可以做，watch可以做的，computed不一定能做
2.使用vm.$watch方法时，需要使用普通函数
3.对于定时器，函数回调，ajax回调,promise回调,建议使用箭头函数

综合案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <h1>今天的天气{{str}}</h1>
            <h2>{{userName}}</h2>
            <h3>{{obj.id}}</h3>
            <button @click="func()">点击切换天气</button>
        </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                bool:true,
                userName:"",
                obj:{
                    id:99,
                }
            }
        },
        methods: {
            func(){
                this.bool = !this.bool;
            }
        },
        computed:{
            str(){
                return this.bool?"炎热":"凉爽"
            }
        },
        watch:{
            obj:{
                immediate:false,
                deep:true,
                handler(newVlaue,oldValue){
                    console.log("--------obj-------");
                    console.log(newVlaue);
                    console.log(oldValue);
                }
            },
            bool:{
                immediate:true,
                handler(newVlaue,oldValue){
                    console.log(newVlaue);
                    console.log(oldValue);
                    if(newVlaue==true){
                        this.userName = "张三";
                        this.obj.id = 100;
                    }else{
                        this.userName = "李四";
                        this.obj.id = 99;
                    }
                }
            },
            str(newVlaue,oldValue){
                console.log(newVlaue);
                console.log(oldValue);
                console.log(this);
            }
        },
        directives:{

        }
    })
    // vm.$watch("userName",{
    //     immediate:false,
    //     handler(newVlaue,oldValue){
    //         console.log("--------userName---------");
    //         console.log(newVlaue);
    //         console.log(oldValue);
    //         console.log(this);
    //     }
    // })
    vm.$watch("userName",function(newVlaue,oldValue){
            console.log("--------userName---------");
            console.log(newVlaue);
            console.log(oldValue);
            console.log(this);
            console.log(this.bool);
    })
</script>
</html>

生命周期

解释：
1.生命周期函数，钩子函数
2.生命周期函数命名不能修改
3.this指向Vue实例(vm)

八大生命周期

beforeCreate初始化之前,不能获取data中的数据

beforeCreate() {
            // console.log(this.userName);
            // console.log(this.sum());
        },

created初始化之后,获取data中的数据

created() {
            // console.log(this.userName);
            // console.log(this.sum());
        },

beforeMount解析前|挂载前


>  beforeMount() {
            // this.bool = false;
            // document.getElementsByClassName("box")[0].style.color = "red";
        },

mounted解析后|挂载后（常用）

// this.userName = "王五";
        // document.getElementsByClassName("box")[0].style.color = "red";
        this.timeValue = setInterval(()=>{
            this.opacity-=0.01;
            if(this.opacity<=0){
                this.opacity=1;
            }
        },10)
    },

beforeUpdate更新前

beforeUpdate() {
            // setTimeout(()=>{
            //     this.userName = "李四";
            // },1000)
        },

updated更新后（常用）

 updated() {
            // this.userName = "王五";
        },

beforeDestroy销毁前

>    beforeDestroy() {
>             clearInterval(this.timeValue);
>             console.log("触发了销毁前");
>         },

destroyed销毁后（常用）

destroyed() {
            console.log("触发了销毁后");
        },
八大生命周期综合案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{time}}</h1>
        <h1>{{time|times}}</h1>
        <h1>{{time|times|myTime}}</h1>
        <h1 v-show="bool" class="box">{{userName}}</h1>
        <button @click="func()">点击</button>
        <hr>
        <h1 :style="{opacity}">我是测试文本</h1>
        <button @click="opacity=1">点击显示</button>
        <button @click="stop()">停止</button>
    </div>
</body>
<script src="../vue.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script> -->
<script>
    Vue.config.productionTip = false;
    // 生命周期
    // 1.生命周期函数，钩子函数
    // 2.生命周期函数命名不能修改
    // 3.this指向Vue实例(vm)
    // ----------------------
    Vue.filter("myTime",function(value){
        // console.log(value);
        // return value.slice(0,11);
        // return value.substring(0,11);
        return value.substr(0,11);
    })
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                time:Date.now(),
                userName:"张三",
                bool:true,
                // opacity:"opacity:1",
                opacity:1,
                timeValue:"",
            }
        },
        methods: {
            sum(){
                return 100;
            },
            func(){
                this.userName = "9999"
            },
            stop(){
                this.$destroy();
            }
        },
        // beforeCreate初始化之前,不能获取data中的数据
        beforeCreate() {
            // console.log(this.userName);
            // console.log(this.sum());
        },
        // created初始化之后,获取data中的数据
        created() {
            // console.log(this.userName);
            // console.log(this.sum());
        },
        // beforeMount解析前|挂载前
        beforeMount() {
            // this.bool = false;
            // document.getElementsByClassName("box")[0].style.color = "red";
        },
        // mounted解析后|挂载后
        mounted() {
            // this.userName = "王五";
            // document.getElementsByClassName("box")[0].style.color = "red";
            this.timeValue = setInterval(()=>{
                this.opacity-=0.01;
                if(this.opacity<=0){
                    this.opacity=1;
                }
            },10)
        },
        // beforeUpdate更新前
        beforeUpdate() {
            // setTimeout(()=>{
            //     this.userName = "李四";
            // },1000)
        },
        // updated更新后
        updated() {
            // this.userName = "王五";
        },
        // beforeDestroy销毁前
        beforeDestroy() {
            clearInterval(this.timeValue);
            console.log("触发了销毁前");
        },
        // destroyed销毁后
        destroyed() {
            console.log("触发了销毁后");
        },
    })
</script>
</html>

过滤器

定义：对要显示的的数据进行特定的格式化后再显示

1.局部过滤器new Vue({filters:{名称(value){}}})，
全局过滤器Vue.filter(“名称”,function(value){})
2.返回一个新的数据
3.使用时|名称, 多个过滤器串联，拿取的值是前一个

过滤器综合案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{time}}</h1>
        <h1>{{time|times}}</h1>
        <h1>{{time|times|myTime}}</h1>
        <h1 v-show="bool" class="box">{{userName}}</h1>
        <button @click="func()">点击</button>
        <hr>
        <h1 :style="{opacity}">我是测试文本</h1>
        <button @click="opacity=1">点击显示</button>
        <button @click="stop()">停止</button>
    </div>
</body>
<script src="../vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
<script>
    Vue.config.productionTip = false;
    Vue.filter("myTime",function(value){
        // console.log(value);
        // return value.slice(0,11);
        // return value.substring(0,11);
        return value.substr(0,11);
    })
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                time:Date.now(),
                userName:"张三",
                bool:true,
                // opacity:"opacity:1",
                opacity:1,
                timeValue:"",
            }
        },
        methods: {
           
        },
       
        // 局部过滤器
        filters:{
            times(value,str="YYYY年MM月DD日 HH:mm:ss"){
                // console.log(value);
                return dayjs(value).format(str);
                // return new Date(value);
                // let a = new Date(value);
                // return a.toISOString();
                // let day = parseInt(value/1000/60/60/24);
                // let days = day;
                // let year = 1970;
                // while (day>=366) {
                //     if(year%4==0){
                //         day-=366;
                //     }else{
                //         day-=365;
                //     }
                //     year+=1;
                // }
                // let month = 1;
                // while(day>=28){
                //     if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
                //         if(day<31){
                //             break;
                //         }
                //         day-=31;
                //     }else if(month==4||month==6||month==9||month==11){
                //         if(day<30){
                //             break;
                //         }
                //         day-=30;
                //     }else if(month==2&&year%4==0){
                //         if(day<29){
                //             break;
                //         }
                //         day-=29;
                //     }else{
                //         if(day<28){
                //             break;
                //         }
                //         day-=28;
                //     }
                //     month+=1;
                // }
                // console.log(year+"年"+month+"月"+(day+1)+"日");
            }
        }
    })
    console.log(vm);
</script>
</html>
zwwkkkkk
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 生命周期函数&过滤器
weixin_45735361的博客
03-27 197
生命周期函数 生命周期函数代表的是Vue实例，或者是Vue组件，在网页中各个生命阶段所执行的函数。生命周期函数可以分为创建阶段和运行期间以及销毁期间。 其中创建期间的函数有beforeCreate、created、beforeMount、mounted； 运行期间的函数有beforeUpdate、updated； 销毁期间有beforeDestroy、destroyed。 以下是官方文档给到的一张...
vue的生命周期
丹
10-31 754
概念 借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。 可以理解vue生命周期就是指vue实例从创建到销毁的过程，在vue中分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。 一、创建（实例） 1、beforeCreate：这个阶段实例已经初始化，只是数据观察与事件机制尚未形成，不能获取DOM节点（没有data，没有el） 使用场景：因为此时dat
Vue的过滤器和生命周期
zag666的博客
08-20 593
过滤器 对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。 语法： 1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}} 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名” 备注： 1.过滤器也可以接收额外参数、多个过滤器也可以串联 2.并没有改变原本的数据, 是产生新的对应的数据 ...
Vue中的过滤器、拦截器、生命周期
WuJiangang5112的博客
09-30 3129
Vue中的过滤器、拦截器、生命周期 一、Vue的过滤器 1.1、Vue过滤器的作用和使用场景 ​ 主要用来实现数据的筛选、过滤、格式化。通常用于时间戳转时间，价格标签的转换等。过滤器分为全局过滤器和局部过滤器； Vue 1.x 版本借鉴了 angular , 提供 10 个过滤器， 包括有： 日期 小数点位数保留 货币 大小写 等 Vue 2.x 废弃了这 10个过滤器，但是它提供了自定...
vue那个生命周期函数操作dom_vue生命周期
weixin_39819671的博客
12-22 4298
1. What ？Vue生命周期简单来说就是vue实例对象从创建之初到销毁的过程。vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。其中具体分为8个阶段，分别是：beforeCreate(创建前) ------- created(创建后)beforeMount(载入前) -------- mounted(载入后)b...
vue2生命周期
2202_75871191的博客
03-24 943
console.log('1.beforeCreate--执行')console.log('1.beforeCreate--执行')console.log('3.beforeMount--执行');console.log('1.beforeCreate--执行')console.log('3.beforeMount--执行');console.log('beforeUpdate--执行');console.log('2.created--执行');console.log('2.created--执行');
vue什生命周期？过滤器？
Agcdlkh的博客
03-24 83
1.局部过滤器new Vue({filters:{名称(value){}}})，全局过滤器Vue.filter("名称",function(value){})3.使用时|名称, 多个过滤器串联，拿取的值是前一个。3.this指向Vue实例(vm)1.生命周期函数，钩子函数。2.生命周期函数命名不能修改。2.返回一个新的数据。
vue 生命周期及watch、计算属性等等的理解
zeng092210的博客
08-21 1519
以下属于个人理解，如果不足请各位大佬多多提点 记忆单词 有d无d 有ed等等细节、彻底理解弄懂 Tips:components、watch、computed、methods是以:{}的方式引入， 其他是已(){}的方法引入 <template> <div>{{b}}</div> </template> <script> export default{ //data 下面要加return是局部定义变量 //d.
Vue2 与 Vue3 生命周期对比
青山不改，绿水长流。
09-22 3300
内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。这个钩子函数获取的数据是更新后的数据，生成新的虚拟dom，跟上一次的虚拟dom结构进行比较，比较出来差异（diff算法）后再渲染真实dom，当数据引发dom重新渲染的时候，在updated钩子函数里面就可以获取最新的真实dom了。vue 实例的 $el 和 data 都已初始化，dom节点马上要被渲染出来了，但是还没有真正的渲染出来,挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。
过滤器+拦截器+vue的生命周期
jinqianwang的博客
09-21 1342
目录   1过滤器 全局过滤器 局部过滤器 2拦截器 3生命周期 创建 创建之前--beforeCreate 创建之后--created 挂载之前beforeMount 挂载之后mounted 修改之前beforeUpdate 修改之后updated 销毁之前beforeDestroy 销毁之后beforeDestroy 1过滤器 全局过滤器         格...
Vue 图书管理案例：包含过滤器，自定义指令，计算属性，侦听器，生命周期知识点
01-08
必要知识点： => 箭头函数：函数里面的this指向父级作用域 this.books.some(function(item){})//里面的this指向window this.books.some((item)=>{})//指向父级作用域 2.filter返回的是数组类型 ...
Vuejs入门教程之Vue生命周期，数据，手动挂载，指令，过滤器
10-20
在本文中，我们将深入探讨Vue.js的基础概念，包括Vue实例的生命周期、数据绑定、手动挂载、指令以及过滤器。 1. **Vue实例的生命周期**： Vue实例从创建到销毁的过程称为生命周期。包括`beforeCreate`、`created`...
vue学习笔记之过滤器的基本使用方法实例分析
10-15
Vue.js 是一款流行的轻量级前端框架，它提供了一种机制叫做过滤器（filters），用于在模板中对数据进行转换，比如格式化日期、货币等。在本篇Vue学习笔记中，我们将深入探讨Vue过滤器的基本使用方法，通过实例来展示...
vue基础语法——表单绑定语法、计算属性、侦听器、过滤器、vue生命周期
12-09
对vue基础语法一些简单的总结和案例，适合新手小白哦~
vue详解
m0_46702681的博客
07-08 1155
指令:HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能常用指令:v-for 列表渲染，遍历容器的元素或者对象的属性v-bind 为HTML标签绑定属性值，如设置 href，css样式等v-if/y-else-if/v-else 条件性的渲染某元素，判定为true时渲染，否则不渲染v-show 根据条件展示某元素，区别在于切换的是display属性的值。
vue + element ui 实现侧边栏导航栏折叠收起
爱敲代码的卡拉米的博客
07-08 416
通过 row 和 col 组件，并通过 col 组件的。属性我们就可以自由地组合布局。
基于若依的文件上传、下载
谁说自己不可以
07-06 1139
基于若依的文件上传、下载、详细步骤。
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
最新发布
xiejunlan的博客
07-11 1242
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
Vue的学习之class与style绑定
人生苦短
07-07 281
本节对class与style的绑定内容就学习完毕了！
vue过滤器和计算属性
07-29
- *3* [Vue过滤器、计算属性以及生命周期](https://blog.csdn.net/sj1255897381/article/details/107400254)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值