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 }
-
-