Vue_Study入门三

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 侦听器

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