Vue.js에서 글로벌 필터를 추가하는 방법

Vue.js에서 글로벌 필터를 추가하는 방법

Vue.js 앱에서 몇 가지 글로벌 필터를 사용하고 싶습니다.메인 Vue 인스턴스 전에 이들을 정의해야 한다는 것은 알지만 코드 조직의 관점에서 이들을 모두 'main.js' 파일에 넣는 것은 적절하지 않은 것 같습니다.정의를 'main.js'로 Import한 별도의 파일에 포함하려면 어떻게 해야 합니까?수입/수출에 관한 것이 잘 이해가 안 돼요.

filters.js 파일을 만듭니다.

import Vue from "vue"

Vue.filter("first4Chars", str => str.substring(0, 4))
Vue.filter("last4Chars", str => str.substring(str.length - 4))

main.js로 Import합니다.

import Vue from 'vue'
import App from './App'
import "./filters"

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
})

여기 작업 예가 있습니다.

사이드 노트:Vue not found(Vue를 찾을 수 없음) 유형의 오류가 발생한 경우 테스트로 다음 필터 가져오기 시도합니다.new Vue()다음과 같이 선언합니다.

import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
})

import "./filters"

제 생각에 가장 좋은 방법은 이 버너에pluginVueJ의 기능s

1. 작성하다filters폴더와 필터를 모두 거기에 넣으세요.

   - filters
     | - filter1.js
     | - index.js
   

2. 필터 파일에서는 필요한 함수를 내보냅니다.이 예에서는 대문자의 필터를 사용합니다.

   export default function uppercase (input) {
       return input.toUpperCase();
   }
   

3. 에서index.js플러그인 가져오기 및 생성:

   import uppercase from './filter1';
   
   
   export default {
        install(Vue) {
            Vue.filter('uppercase', uppercase);
        }
   }
   

4. in your main.js 파일 사용

   import filters from './filters';
   import Vue from 'vue';
   
   Vue.use(filters);
   

제가 좋아하는 건

1. 파일당 필터 설정(es6 모듈)

2. 모듈의 vue에 필터를 글로벌하게 등록합니다.

3. 또한 필터 기능을 기본 내보내기로 내보냅니다.

예를 들어, 내가 만든 번호에 쉼표를 구분하는 단순한 필터의 경우Filter.js 및 번호Filter.test.js

NumberFilter.js

import Vue from 'vue';
import numeral from 'numeral';

const NumberFilter = number => numeral(value).format('0,0');

Vue.filter('number', numberFilter);

export default numberFilter;

NumberFilter.test.js

import NumberFilter from './NumberFilter';

describe('NumberFitler', () => {
   it('exists', () => {
      expect(NumberFilter).toBeDefined();
   });

   it('does its thing', () => {
       expect(NumberFilter(1234)).toEquals('1,234');   
   });
});

이 전략을 사용하면 표준 es6 모듈 및 Vue 템플릿에서 이 필터를 사용할 수 있습니다.

실제 세계에서는 테스트에서 숫자를 모의하고 .format의 결과가 올바른 숫자 형식으로 호출되었는지 확인합니다.

Vue mixin을 사용하여 글로벌필터를 추가할 수 있습니다.필터를 파일로 설정한 후 main.js 파일로 필터 파일을 Import할 수 있습니다.

filters.filters.displaces

export default{
    firstWordCapitalize (value) => {
        if (!value)
            return ''
        value = value.toString()
        return value.charAt(0).toUpperCase();
    },
    anotherFilter(value) =>{
      return value+"-test";
    }
}

main.discloss.main.discloss.

import Vue from 'vue';
import Filters from './filters';
Vue.mixin({
  filters: Filters
});

또한 모든 템플릿에서 필터를 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/47004702/how-to-add-a-bunch-of-global-filters-in-vue-js