2021-08-16 vue笔记-基础(三) 计算属性和监听属性,methods,过滤器,自定义指令,生命周期

这篇Vue笔记详细探讨了计算属性`computed`、监听属性`watch`、方法`methods`的使用,以及过滤器和自定义指令的创建。文章通过实例展示了它们的用法,并介绍了`computed`与`methods`的区别,以及如何实现对象的深度监听。同时,讲解了Vue组件的生命周期,帮助理解不同阶段的回调函数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.computed的用法
例子:
<div id="app">
    {{msg}}
    {{num}}
<!--    写在methods里:带括号()-->
    {{fn()}}
<!--    写在computed里:不带括号-->
    {{computedNum}}
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"双击",
            num:6
        },
        methods:{
            fn(){
                return this.num
            }
        },
        computed:{
            computedNum(){
                return this.num;
            }
        }
    });
</script>
结果:

双击 6 6 6

2.computed和methods的用法与格式的异同

写在methods里:带括号()
写在computed里:不带括号
(计算属性可以当data用)

代码:
<div id="app">
    {{msg}}
    {{computedMsg}}
    <button type="button" @click="fn">点击改变</button>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"hello",
        },
        methods:{
            fn(){
                this.msg="world"
            }
        },
        computed:{
            computedMsg(){
                return this.msg.split('').reverse().join('');
            }
        }
    });
</script>
结果:

点击前: hello olleh
点击后:world dlrow

3.监听属性watch的基本用法

用法详见:菜鸟官网

例子:
<div id="app">
    <input type="text" v-model="msg"/>
    {{copyMsg}}
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:'hello',
            copyMsg:''
        },
        watch:{
            msg:{
                handler:"fn",//不是handle
                immediate:true//文本框内容尚未改变时先输出一次"watching now...,",若是false则一开始不会输出,内容改变时才输出"watching now..."
            }
        },
        methods:{
            fn(value){
                console.log("watching now...");
                this.copyMsg=value;
            }
        }
    });
</script>
结果:

实现了文本框内容和copyMsg双向绑定

总结:
    1.watch的immediate属性: immediate:false在第一次绑定时不会执行监听函数,而immediate:true可以让第一次监听就执行
    2.watch的handler方法: watch中需要具体执行的方法
        设置immediate:true后,会先执行handler的方法  
上例简化(常用写法):
new Vue({
        el:"#app",
        data:{
            msg:'hello',
            copyMsg:''
        },
        watch:{
            msg(value){
                console.log("watching...");
                this.copyMsg=value;
            }
        }
    });   
4.deep

如果是监听的是对象类型,当手动修改对象的某个属性时,发现是无效的
这时候就需要deep
html:

<div id="app">
    <p><input type="text" v-model='userinfo.firstname' placeholder=""></p>
    <p><input type="text" v-model='userinfo.lastname' placeholder=""></p>
    <p><input type="text" v-model='userinfo.fullname' placeholder="全名"></p>
</div>

js:

		var app = new Vue({
            el: '#app',
            data: {
                userinfo: {
                    firstname: '',
                    lastname: '',
                    fullname: ''
                }
            },
            // watch的深度监听
            watch:{
                // 先写深度监听的对象
               userinfo:{
                //     处理函数
                   handler(val) {
                        console.log('val',val)
                        this.userinfo.fullname = val.firstname +' ' +val.lastname
                   },
                //    立即监听
                  immediate:true,
                //    深度监听参数
                deep:true
               }
            }
        })
5.局部过滤器和全局过滤器

用来格式化数据,处理数据格式
理解:就是密码加密输出,
(常见:大小写转换)

例子:
    <div id="app">
        {{msg|upupup}} {{msg2|lowlowlow}}
    </div>
    <script>
        //全局过滤器
        Vue.filter('upupup', val => {
            return val.toUpperCase();
        })
        new Vue({
            el: "#app",
            data: {
                msg: "hello",
                msg2: "World",
            },
            //局部过滤器
            filters: {
                lowlowlow: function(val) {
                    return val.toLowerCase()
                }
            }
        });
    </script>
注意格式:
 	全局过滤器: 
 	     *注意:是| 不是 ||
    局部过滤器:  
    	*注意:是filters不是filter6.
6.自定义指令

写法:

  • 通过 Vue.directive() 函数注册一个全局指令
  • 通过组件的 directives 属性,对该组件添加一个局部指令

注:上面的过滤器(filter)也可以总结为类似的语言

6.1.自定义全局指令v-red:
<h1 v-red>我是标题</h1>
Vue.directive('red', {
    // 绑定元素的时候自动调用
    inserted: function (el) {
        console.log('el', el)
        el.style.color = 'red'
    }
})
6.2.自定义全局指令v-color(动态颜色)
<h1 v-color="'green'">我是标题2动态颜色</h1>
Vue.directive('color', {
    inserted: (ele, binding) => {
        ele.style.color = binding.value;
        //此处的value是指v-color="value"中填入的颜色
    }
})
6.3.以上是全局,自定义局部指令v-color:
directives: {
   color: {//要自定义v-color,就在这里包一层color:{}
       inserted: function(ele, binding) {
           ele.style.color = binding.value;
       }
   }

6.4.自定义指令的拓展:定义一个复合指令 v-many_css

注:此处自定义指令名只能写成下划线many_css,不能写成驼峰名称manyCss,会报错

<div v-many_css>{{msg}}</div>

全局:

Vue.directive('many_css', {
    inserted: function(ele) {
        //就是在函数体里多写一些动态样式
        ele.style.color = "white";
        ele.style.backgroundColor = "blue";
        ele.style.borderTop = "red solid 3px";
    }
})

局部:

directives: {
    many_css: {
        inserted: function(ele) {
            ele.style.color = "white";
            ele.style.backgroundColor = "blue";
            ele.style.borderTop = "red solid 3px";
        }
    }
}`
7.vue生命周期
1.生命周期的定义

在一个应用 创建到消亡阶段 在某一时刻 会自动调用的回调函数就叫做生命周期

2.有哪些生命周期
    2.1.beforeCreate() 实例创建之前,内部:new操作符初始化
    2.2.create() 实例创建之后,内部:new操作符初始化
   			 这个阶段向服务器发送ajax请求,调用数据和方法
  		     此处不能进行dom操作,因为渲染没有完全
				console.log(document.getElementById('hh'))
    2.3.beforeMount() dom渲染(挂载)之前
    2.4.mounted() dom渲染(挂载)之后
      		  这个阶段适合进行dom操作
    2.5.beforedUpdate() 更新之前 
        数据和视图联系的数据,更新之前会自动调用
    2.6.updated() 更新之后
        数据和视图联系的数据,更新之后会自动调用
    2.7.beforeDestroy() 销毁之前
    2.8.destroyed() 销毁之后
        跳转完页面:上移页面的无用变量或函数进行null赋值处理
    新增:
    actived() 组件激活时
    deactived() 组件停用时
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值