五、Vue普通知识点-过滤&指令

一、过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。

过滤器可以用在两个地方:

双花括号插 值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

过滤器应该被添加在 JavaScript 表达式的尾部，由“管 道”符号指示。

支持多个过滤器并用、支持过滤器传参数到函数内

<!-- 在双花括号中 -->
{{ message | currency('$') }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

// 全局中定义：
Vue.filter('datefixed', function (value) {
    if (value) {
        return parseFloat(value).toFixed(2);
    }
    return "0.00";
});

// 组件内定义：
filters: {
		currency(value, symbol = '¥') {
        return symbol + value;
    }
}

二、自定义指令

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

注意，在 Vue2.0中，代码复用和抽象的主要形式是组件。

然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操 作，这时候就会用到自定义指令。

autofocus 有兼容性问题： ref 做（单独）、自定义指令做（全局）

example:输入框获取焦点

// 全局添加 autofocus 有兼容性问题
Vue.directive('focus', { 
	inserted(el) {
            el.focus() 
	}
})

// 使用
<input v-focus>

自定义指令-钩子函数

example:按钮权限控制

const role = 'user';
// 定义：
Vue.directive('permission', {
    inserted(el,binding) {
        if (role !== binding.value) el.parentElement.removeChild(el);
    }
})
// 使用：
<div class="toolbar" v-permission="'admin'">