vue基础笔记(三)

九、过滤器

过滤器就是对要显示到页面上的数据进行处理，对用户来说更加友好

语法：在vue实例中有一个属性filters，和data同级，filters里面存放的都是处理函数

页面使用：通过{{xxx(数据) | 过滤函数}}或者用v-bind绑定标签的属性

<div id="app">
    <p>{{日期|date}}</p>
</div>

filters:{
    date(arg){
        //arg就是未处理的日期
        //下面是对arg进行处理的代码
        //这个函数的返回值会作为页面的显示数据
    }
}

也可以多个过滤器处理同一条数据

<div id="app">
    <!--date1处理的数据会传入date2里，date2处理好的数据会传入date3中，date3的数据成为页面显示的数据-->
    <!--过滤器也可以传参，在括号写入值就会传入对应的函数传参之后，过滤器的参数就变成2个-->
    <p>{{日期|date1|date2(arg1)|date3(arg2)}}</p>
</div>

filters:{
    date1(arg){
        //arg就是未处理的日期
        //下面是对arg进行处理的代码
        //这个函数的返回值会作为date2的参数
    }，
    date2(arg){
        //这个函数的返回值会作为date3的参数
    }，
    date3(arg){
        //这个函数的返回值会作显示在页面上
    }
}

十、自定义指令

1.语法定义

局部指令：

//第一种创建方式
new Vue({
    directives:{
        指令名:{
            //配置
        }
    }
})
//第二种方式
new Vue({
    directives:{
        指令名(){
            //代码
            //这里的this是window
            console.log(this)
        }
    }
})

全局指令：

Vue.directive('指令名',{
    //配置
})

2.配置对象中常用的三个回调函数

new Vue({
    directives:{
        指令名:{
            //当指令与元素绑定成功后触发
            bind(ele,bind){
                //代码
            },
            //指令所在元素被插入页面时
            inserted(ele,bind){
                //代码
            },
            //指令所在模板被重新解析时
            update(ele,bind){
                //代码
            }
        }
    }
})

定义指令

1.语法定义

局部指令：

//第一种创建方式
new Vue({
    directives:{
        指令名:{
            //配置
        }
    }
})
//第二种方式
new Vue({
    directives:{
        指令名(){
            //代码
            //这里的this是window
            console.log(this)
        }
    }
})

全局指令：

Vue.directive('指令名',{
    //配置
})

2.配置对象中常用的三个回调函数

new Vue({
    directives:{
        指令名:{
            //当指令与元素绑定成功后触发
            bind(ele,bind){
                //代码
            },
            //指令所在元素被插入页面时
            inserted(ele,bind){
                //代码
            },
            //指令所在模板被重新解析时
            update(ele,bind){
                //代码
            }
        }
    }
})