5.Vue可复用性与组合(2018.01.13)

1.自定义指令：

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。

1). 自定义全局指令：

案例：当页面加载时，input 将获得焦点。

①.在 main.js里面注册全局指令：

// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', {     inserted: function (el) {         el.focus()     } })

②.在组件中任何元素上使用全局自定义指令 `v-focus`：

<template>     <div>        <input v-focus>       </div> </template> <script>     export default {         name:"Hello",         data(){             return {             }         }     } </script> <style scoped> </style>

2). 自定义局部指令：

案例：当页面加载时，input 将获得焦点。

在相应组件里面注册，并使用：

<template>     <div>        <input v-focus>       </div> </template> <script>     export default {         name:"Hello",         data(){             return {             }         },         directives: {             focus: {                // 指令的定义                inserted: function (el) {                   el.focus()                }             }         }     } </script> <style scoped> </style>

3). 钩子函数：

①.案例：

<template>     <div>        <div  v-demo:foo.a.b="message"></div>     </div> </template> <script>     export default {         name:"Hello",         data(){             return {             }         },         directives: {           demo: {             bind: function (el, binding, vnode) {                 var s = JSON.stringify                 el.innerHTML =                   'name: '       + s(binding.name) + '<br>' +                   'value: '      + s(binding.value) + '<br>' +                   'expression: ' + s(binding.expression) + '<br>' +                   'argument: '   + s(binding.arg) + '<br>' +                   'modifiers: '  + s(binding.modifiers) + '<br>' +                   'vnode keys: ' + Object.keys(vnode).join(', ')              }           }         }     } </script> <style scoped> </style>

②.一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

钩子函数	描述
bind	只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted	被绑定元素插入父节点时调用 。
update	所在组件的 VNode 更新时调用。
componentUpdated	指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind	只调用一次，指令与元素解绑时调用。

③.钩子函数参数(均为可选)：

钩子函数参数	描述
el	指令所绑定的元素，可以用来直接操作 DOM 。
vnode	Vue 编译生成的虚拟节点。
oldVnode	上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
binding	是一个对象，具体详情见下一个表格：

binding一个对象，包含以下属性：

name	指令名，不包括 v- 前缀。
value	指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue	指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。
expression	字符串形式的指令表达式。例如 v-my-directive="1+1" 中，表达式为 "1+1"。
arg	传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
modifiers	一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

2.过滤器：

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。

1).局部过滤器（使用较少）：

<template>     <div>        {{ message | upperCase | addStr('我会在前面添加', 1+1) }}         <div v-bind:title="message | upperCase | addStr('我会在前面添加', 1+1) ">鼠标移上来</div>     </div> </template> <script>     export default {         name:"Hello",         data(){             return {                 message:"abcdefg"             }         },         filters: {           upperCase: function (value) {             if (!value) return ''             value = value.toString()             return value.toUpperCase()           },           addStr: function (value,arg1,arg2) {             if (!value) return ''             value = value.toString()             return arg1 + value + arg2           }         }     } </script> <style scoped> </style>

其中 addStr 为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

结果如下：

2).全局过滤器（使用较多）：

①.在 main.js 里面注册全局过滤器：

Vue.filter('capitalize', function (value) {     if (!value) return ''     value = value.toString()     return value.charAt(0).toUpperCase() + value.slice(1) })

②.在组件中使用：

{{ message | capitalize }} <div v-bind:title="message | capitalize>鼠标移上来</div>