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() 组件停用时