Get新知识:
vue 表单域修饰符
vue 提供了 number trim 和 lazy 三种表单修饰符,其中number 修饰符是将表单标签中的数据转换成数值,默认情况下是 字符串类型的数据,不适合作为计算,转换后更适合计算。trim 修饰符可以去除数据的两端的空格,其中的空格去除不了,需要注意。lazy 修饰符则是将标签默认的 input 事件转换成 change 事件。(input 事件是当输入框内的数据发送变化时就触发事件,change 事件则是当焦点离开输入框时触发。)
vue 自定义指令
当vue 内置指令满足不了需求时就需要自定义指令,
简单示例:
使用时,只需要注意前面加上v- 就和普通的指令使用无异。
带有参数的自定义指令定义
image.png
使用时 需要注意传参即可,
局部指令:
定义在vue 实例化中的自定义指令,使用范围有限制,之前的方式定义的自定义指令都是全局的指令,局部的指令仅限于当前组件中使用。
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 侦听器
侦听器 类似数据库的触发器,当数据发生变化时执行侦听器所绑定的方法,一般应用在 数据变化时执行异步操作或开销较大的操作。