vue自定义指令，过滤器等

1、vue 去除前后的空格

https://www.cnblogs.com/mmzuo-798/p/9301109.html

2、vue自定义指令

• 全局

Vue.directive('bgcolor', function (el, binding) {
      el.style.backgroundColor = binding.value
})

• 局部

directives: {
    bgcolor: (el, binding) => {
        el.style.backgroundColor = binding.value  
    }
}

https://www.cnblogs.com/dhui/p/13268040.html

3、vue过滤器，filters

• 局部过滤器（与methods，watch平级）

filters: {
    componentFilter(value) {
      return value + '!!!'
    },
  },
用法：{{ 'a' | componentFilter }} // a!!!

https://www.jianshu.com/p/ad21df1914c5

• 全局过滤器（main.js）

方法1

Vue.filter('aaa', function (value) {
    return value + '!!!'
})

https://www.jianshu.com/p/ad21df1914c5

方法2

• filters/index.js

const isNullOrEmpty = function(val) {
    if (val == null || val == "" || typeof(val) == undefined) {
        return true;
    } else {
        return false;
    }
}
export {
    isNullOrEmpty
}

• main.js

import * as filters from '../filters/index'
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})

• 组件里

{{date | isNullOrEmpty}}是否为空

https://www.cnblogs.com/yanwuming/p/10603058.html

4、指令了解

https://jspang.com/detailed?id=21#toc330

• v-pre
  在模板中跳过vue的编译，直接输出原始值

{{message}}
 // 直接显示{{message}}

• v-cloak 在vue渲染完指定的整个DOM后才进行显示

[v-cloak] {
  display: none;
}

  {{ message }}

• v-once
  如果显示的信息后续不需要再修改，使用v-once
  使用了v-once之后，在控制台上修改app.message无法更改
  v-once用于一次性数据，固定数据，可以提高性能

{{info}}

5、组件全局注册

• main.js

import Vue from 'vue'
import pageHead from './components/page-head.vue'
Vue.component('page-head',pageHead)

• 组件内使用