笔记: Vue选项---封装复用（filters，自定义指令，components，mixin）

1.过滤器（filters选项）：

用于定义在当前组件或实例作用域中可用的过滤器。

可在双括号插值中添加在JavaScript表达式的尾部，以管道符号“|”与表达式隔开，表达式的值将作为参数传入filters中。

<h1>{{ title }}</h1>

<h1>{{ titile | supplyTitle1 }}</h1>

<!--存在多个filter时，将从左向右执行，并将上一次过滤的结果作为下一次过滤的输入值-->

<h1>{{ titile | supplyTitle1 | supplyTitle1 }}</h1>


//在实例中这样定义filter选项

let vm=new Vue({
    ......,
    filters:{
        supplyTitle1(){
            ......
        },
        supplyTitle2(){
            ......
        }
})

2.自定义指令：

除了v-bind，v-on，v-model等指令，可以使用自定义的指令。在组件和实例中，这些自定义指令应该被声明在directives选项中。

Vue为自定义指令提供了几个钩子函数（均为可选）：

bind：指令与元素绑定时调用。

inserted：指令绑定的元素被挂载到父元素上时调用。

update：指令所在VNode更新的时候调用，可能发生在子VNode更新之前。

componentUpdated：指令所在VNode及其子VNode全部更新后调用。

unbind：指令与元素解绑时调用。

同时，钩子函数会被传入以下参数：

el：指令所绑定元素，可用于操作DOM。

binding：包含指令相关属性的对象。

binding包含以下属性

name	指令名称
value	指令绑定的值
oldValue	指令值改变前的值，仅在update和componentUpdated钩子函数中可用
expression	字符串类型的指令表达式
arg	传给指令的参数，例如：v-自定义：someValue，值为someValue
modifiers	修饰符对象，v-自定义.后缀（modifiers.后缀），值为{后缀:true}
vnode	虚拟节点
oldNode	虚拟节点更新前的值，仅在update和componentUpdated钩子函数中可用

 例子：

<div id="#app">
    <h1 v-some.upper>{{ title }}</h1>
    <h1 v-some.lower>{{ title }}</h1>
    <h1 v-style="style">{{ title }}</h1>
    <button @onclick="handleStyle">修改v-style</button>
</div>

<script type="text/javascript">
        let vm=new Vue({
            el:'#app',

            data(){
                return{
                    title:'Test for Directive.',
                    style:{           //v-style的参数
                        fontStyle:'italic'
                    }
                }
            },

            methods: {
                handleStyle(){
                    this.$set(this.style,'color','#ababab'),
                    this.$set(this.style,'transform','rotateX(45deg)')
                }
            },

            //将自定义指令声明在directives选项中
            directives:{
                style:{    //用于为节点绑定样式
                    bind(el,binding,vnode){
                        console.log('%c---------bind参数：el,binding,vnode ---------','font-size:18px;')
                        console.log('%o\n\n%o\n\n%o',el,binding,vnode)
                        let styles=binding.value    //获取指令绑定的值
                        Object.keys(styles).forEach(key=>el.style[key]=styles[key])
                    },

                    update(el,binding,vnode,oldVnode){
                        console.log('%c---------update参数：el,binding,vnode,oldVnode ---------','font-size:18px;')
                        console.log('%o\n\n%o\n\n%o\n\n%o',el,binding,vnode,oldVnode)
                        let styles=binding.value    //获取指令绑定的值
                        Object.keys(styles).forEach(key=>el.style[key]=styles[key])
                    }
                },

                //在bind和update时触发相同的行为，且无需要定义其他钩子函数
                //指令可以简写为以下形式
                some(el,binding){
                    let text=el.innerText
                    let modifiers=binding.modifiers
                    if (modifiers.upper) {    //如果带有upper后缀，则大写文本
                        el.innerText=text.toUpperCase()
                    }
                    if(modifiers.lower){      //如果带有lower后缀，则小写文本
                        el.innerText=text.toLowerCase()
                    }
                }
            },
        })
</script>

上述代码中定义了v-some和v-style两个指令，即在directives选项中写入了some和style来定义了两个指令。v-some根据后缀的.upper和.lower修饰符对文本进行大小写格式化；而v-style接受一个样式对象用于为节点绑定样式。

3.组件的注册（components选项）：

components选项用于为组件注册从外部引入的组件。

组件常常被称为可复用组件且分为两种类型的组件，

局部组件：只在当前组件在内部挂载了才能使用。    全局组件：全局共享，任何组件都可以使用。

<1>局部组件：（即用var 组件名称={...}来声明）

例子：

<div id="#app"></div>

<script>
    <!--局部入口组建的声明(子组件声明)-->
    var App={
        template:'
                    <div>
                        我是局部入口组件
                        <Vheader/>
                        <Vaside/>
                    </div>
                 ',
        //在该局部组件App注册局部组件Vheader和Vaside
        components:{Vheader,Vaside}
    }

    var Vheader={
        template:'
                <div>
                    我是头部组件
                </div>
                '
    };

    var Vaside={
        template:'
                <div>
                    我是侧边栏组件
                </div>
                '
    };

    <!--父组件Vue实例声明-->
    var vm=new Vue({
        el:'#app',

        data(){
            return{
                .....
            },

        //挂载子组件
        components:{App,Vheader,Vaside},

        //挂载后父组件可以直接使用子组件
        template:'<App/>'
    })
</script>

<2>全局组件：（不需要在组件中再一次声明，可以直接使用）（即用Vue.component()来进行声明）

<script>
    //第一个参数是组组件的名字，第二个参数则是options，例如template,methods等
    Vue.component('Vbtn',{
        template:'
            <button>按钮<button>
        '    
    });
</script>

4.混入的使用（mixin选项）：

mixin可以将一些封装好的选项混入另一个组件中。在混入过程中，如果没有发生冲突，则执行合并；如果发生冲突且用户没有指定解决策略，Vue将采用默认策略。当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

混入冲突时的默认策略

冲突选项	合并策略	冲突策略
data	合并根节点数据	优先采用组建的数据
mounted等钩子函数	混合为数组	全部调用且先调用mixin的钩子函数
methods/components/directives等	混为同一对象	优先采用组件的键值对
watch	混合为数组	全部调用且先调用mixin的watch方法

以上例子的代码来自书籍《Vue.js从入门到项目实战》