Vue学习笔记(3)-品牌管理系统

技术点

钩子函数
自定义指令
自定义过滤器
计算属性
监听属性

自定义指令

为什么需要自定义指令？

为了代码复用和灵活。

指令的分类：

全局指令：

在vm实例外面创建的指令；
通过Vue.directive来创建；

局部指令：以后补充

如何定义自定义指令?（不用赋值）

Vue.directive(指令名称, {inserted(el,binding){}})

如何使用自定义指令？（不用赋值）

v-指令名称

如何定义带值的指令？

Vue.directive(名称, {inserted(el,binding){binding.value}})

如何使用需要赋值的指令？

v-指令名称='值'

在vue中有一套完整的生命周期的钩子函数

mounted钩子函数，它是一个独立的结构，不要写在methods属性中
钩子函数：在某个场景会自动触发的函数

不建议使用原生dom的方式去获取元素，因为vue就是希望能够将我们从繁琐的dom操作中解脱

vue中标记元素可以通过ref （reference）

ref='标记值'
功能类似于之前的id设置
获取值通过this.$refs

上面的实现方式虽然可以，但是有一个重大的缺点：如果需要获取焦点的元素发生变化，那和以意味着模板代码和mounted钩子函数中的代码也需要进行修改--不方便也不合理。我希望达到这样的效果：我做出一个能够让元素获取焦点的功能(函数)，如果元素需要获取焦点就进行调用，否则就当它不存在--这个玩意就是指令；

指令：可以实现某种功能，用户可以选择使用

什么是全局自定义指令：在vue实例外创建的指令

如何创建全局自定义指令

Vue.directive(名称，{inserted钩子函数})

inserted钩子函数：在添加指令的元素插入到父节点时触发--说白了就是生成dom树

Vue.directive('focus',{
    //el：就是当前添加了这个指令的元素，el可以用于直接操作dom    
    inserted(el,binding,vNode){
        // 我们需要获取元素并设置聚焦
        console.log(el)
        el.focus()
    }
})

新的需求：我们需要根据用户的喜好来修改文本颜色

通过指令来实现

通过Vue.directive(名称,{inserted(el,binding){}})

使用指令的时候：v-名称='值'

// 设置颜色的自定义指令
Vue.directive('setcolor',{
    // el:当前使用这个指令的元素
    // binding:它是一个对象，里面有一个属性value,就是当前指令所绑定的值
    inserted(el,binding){
        console.log(binding)
        el.style.color = binding.value
    }
})

细节：

命名细节：建议定义指令的时候命名都是小写

update钩子函数可处理当数据或者模板内容发生变化的时候就自动的触发

// 添加update,监听指令的值的变化，以便页面进行刷新
update(el,binding){
    console.log(el)
    console.log(binding)
    el.style.color = binding.value
}

过滤器

作用：对传入的数据进行处理，返回合理的结果

种类：

全局过滤器：在vm实例之前(外面)创建的过滤器
局部过滤器：在组件内部创建的过滤器

如何定义

Vue.filter(名称，函数)

细节

过滤器会默认接收一个参数，这个参数就是当前调用过滤器的数据对象
如果你手动传递了参数，也不会影响默认参数的传递，意味着过滤器中直接在默认参数后添加新的接收形参就可以了
过滤器的函数“一定”要写return,因为过滤器一定要返回结果

如何调用？

通过管道符|
格式：需要调用过滤器的数据 | 过滤器名称

// 添加全局的自定义过滤器
Vue.filter('timeForamt', (date,seperator1) => {
    // var date = new Date();
    // var seperator1 = "/";
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = year + seperator1 + month + seperator1 + strDate;
    return currentdate;
})

计算属性

什么是计算属性：它是一个属性对象，里面可以封装复杂的业务逻辑--方法

你在计算属性中定义是的函数，但是可以像使用普通属性一样来使用计算属性
里面的函数是一个属性，所以不能以函数的方式进行调用，否则报错

什么场景使用计算属性：当你的模板中的业务比较复杂的时候就可以使用计算属性进行封装

当计算属性中依赖的数据发生变化的时候，这个计算属性就会被触发
所谓依赖的数据就是指里面所依赖的this的成员

它与普通方法的区别

普通方法没有缓存机制，只要你使用到了方法，就必须进行方法的调用执行
而计算属性是基本依赖进行缓存的，意味着只要依赖项的值没有变化，那么计算属性不会再重新的调用，而是使用上一次的计算结果--提高效率

使用计算属性实现搜索功能

computed: {
    search(){
        // 监听用户关键字的变化，只是用户输入有变化，就需要重新进行搜索
        // 计算属性中的函数一般都会返回一个计算结果
        // var result = []
        // for(var i=0;i<this.brandList.length;i++){
        //     // 说明这个对象的name值中包含关键字，这就是我要找的记录之一
        //     // 如果没有输入任何的关键字，那么this.userKey默认就是""
        //     if(this.brandList[i].name.indexOf(this.userKey) != -1){
        //         result.push(this.brandList[i])
        //     }
        // }
        // return result
        // 每次都会从数组中取出一个值，传递给回调函数中的参数value
        // 在回调函数中对Value进行检测判断如果满足条件，那么就会将value值存储到filter方法内部创建的临时数组arr中，最终将这个数组arr返回
        // forEach  map  filter
        return this.brandList.filter((value) => {
            return value.name.indexOf(this.userKey) != -1
        })
    }
}

侦听属性--监听器

计算属性有一个不足：不能响应异步操作的结果。如果需要监听异步操作时数据的变化，就需要使用到watch

watch监听器如何添加

侦听器是一个属性
里面的方法名称不能随意，必须和你需要侦听的属性名称完全一致

watch:{
    // 方法的名称必须和你想要侦听的data中的成员名称一致
    first(newvalue,oldvalue){
        setTimeout(() => {
            console.log(newvalue,oldvalue)
            this.fullname = newvalue.trim().toUpperCase() +":"+this.second
        }, 100);
    },
        second(newvalue,oldvalue){
            console.log(newvalue,oldvalue)
        }
}

watch监听如何实现深度监听

什么是深度监听：不再是this的直接成员，面是this的成员的成员

两种实现方式

handler +deep
'对象.属性'(){}

obj:{
    // 通过handler函数进行侦听
    handler(nv,ov){
        console.log(nv.name,nv.age)
    },
    // 设置为深度侦听
    deep:true
}
// 侦听指定的成员值的变化
'obj.name' (nv){
    console.log(nv)
}

什么时候使用侦听器？

当数据操作涉及到异步方式的时候，就需要使用侦听器

品牌管理系统效果

代码地址：https://github.com/C4az6/Vue_study