Vue_Study03

2023-11-30 19:09:38 浏览数 (2)

Get新知识:

vue 表单域修饰符

vue 提供了 number trim 和 lazy 三种表单修饰符,其中number 修饰符是将表单标签中的数据转换成数值,默认情况下是 字符串类型的数据,不适合作为计算,转换后更适合计算。trim 修饰符可以去除数据的两端的空格,其中的空格去除不了,需要注意。lazy 修饰符则是将标签默认的 input 事件转换成 change 事件。(input 事件是当输入框内的数据发送变化时就触发事件,change 事件则是当焦点离开输入框时触发。)

vue 自定义指令

当vue 内置指令满足不了需求时就需要自定义指令,

简单示例:

使用时,只需要注意前面加上v- 就和普通的指令使用无异。

带有参数的自定义指令定义 image.png 使用时 需要注意传参即可,

局部指令: 定义在vue 实例化中的自定义指令,使用范围有限制,之前的方式定义的自定义指令都是全局的指令,局部的指令仅限于当前组件中使用。

代码语言:javascript复制
directive: {
            color: {
                bind: function(el, binding){
                    el.style.backgroundColor = binding.value.color;
                    console.log(binding.value.color);
                }
            },
            focus: {
                inserter: function(){
                    el.focus();
                }
            }
        }

定义方式跟之前的区别不大,只是使用范围的存在不同。

vue 计算属性

在一些情况下,需要对数据进行各种逻辑计算操作,如果全部直接在模板中书写逻辑,代码复杂度提升可读性降低,为了模板的简洁性,使用计算属性。 在vue 的实例化对象中,computed 属性添加配置。

和方法非常相似,和定义一个方法基本一致。在方法中书写数据处理的逻辑。 **和方法的区别:**计算属性存在缓存,方法不存在缓存,每次调用函数都是重行执行一次。当计算属性处理的数据没有变化,则会一直使用之前的计算缓存,直到数据变化。

vue 侦听器

侦听器 类似数据库的触发器,当数据发生变化时执行侦听器所绑定的方法,一般应用在 数据变化时执行异步操作或开销较大的操作。

0 人点赞