vue
过滤器以及自定义指令
vue
过滤器
- 私有过滤器
-
filters: { capitalize: function (msg) { return msg.replace('傻子', '**') } },
-
- 全局过滤器
-
Vue.filter('globalFilter', function (msg) { return msg.replace('傻逼', '**') })
-
- 使用:
{{data name|filter name}}
自定义指令
- 私有
-
directives: { focus: { inserted: function (el) { el.focus() } } }
-
- 全局
-
Vue.directive('focus', { bind: function (el) { }, inserted: function (el) { // 聚焦元素 el.focus() } })
-
- 在定义指令时不需要加
,在使用时需要加v-
v-
- 钩子函数
-
:只调用一次,指令第一次绑定到元素时调用bind
-
:被绑定元素插入父节点时调用 ,仅保证父节点存在,但不一定已被插入文档中inserted
-
:所在组件的update
更新时调用,但是可能发生在其子VNode
更新之前VNode
-
- 钩子函数参数
-
:指令所绑定的元素,可以用来直接操作 DOMel
-
:包含以下属性: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 }
-
-