vue2 플러그인(Plugins) | 필터 (Filters)

🍒 플러그인 (Plugins)

플러그인은 뷰에 전역 레벨의 기능을 추가한다.=> 여러 컴포넌트에서 사용되는 기능을 만들 때 사용한다.

여러 종류의 플러그인이 존재한다.

  1. 전역 메소드와 프로퍼티
    • e.g. vue-custom-element
  2. 하나 이상의 전역 asset : directive/filter/transition e.g.
    • e.g. vue-touch
  3. global mixin으로 컴포넌트 option 추가
    • e.g. vue-router
  4. Vue.prototype으로 vue instance method 추가
  5. 그 자체의 API를 제공하는 라이브러리. 동시에 그 상위의 조합을 inject
    • e.g. vue-router
    • A library that provides an API of its own, while at the same time injecting some combination of the above.

awesome-vue에서 뷰의 플러그인들을 확인할 수 있다.

플러그인 사용하기 : Vue.use()

global method인 Vue.use() 메소드를 호출하여 플러그인을 추가할 수 있다.

이는 new Vue()를 호출하여 앱을 시작하기 전에 실행되어야 한다.

옵션을 넣을 수도 있다.

// calls `MyPlugin.install(Vue)`
Vue.use(MyPlugin, { someOption: true })

new Vue({
  //... options
})

Vue.use가 자동으로 같은 플러그인을 여러번 추가하는 것을 막아준다. 따라서 같은 플러그인을 여러번 Vue.use에 등록하여도, 플러그인이 한 번만 설치되게 한다.

어떠한 플러그인으 vue-router와 같이 자동으로 Vue.use()를 호출하는 Vue.js 공식 플러그인들이 있다. 그러나, CommonJS와 같은 모듈 환경에서는 항상 Vue.use()를 호출해주어야 한다.

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

플러그인 작성하기

뷰 플러그인은 install 메소드가 반드시 있어야 한다.

이 메서드는 Vue constructor를 첫 번째 인자로 받고, 다른 option들도 받아서 추가된다.

MyPlugin.install = function (Vue, options) {
  // 1. 전역 메서드와 프로퍼티 추가하기
  Vue.myGlobalMethod = function () {
    // some logic ...
  }

  // 2. add a global asset
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // some logic ...
    }
    ...
  })

  // 3. inject some component options
  Vue.mixin({
    created: function () {
      // some logic ...
    }
    ...
  })

  // 4. 인스턴스 메소드 추가하기
  Vue.prototype.$myMethod = function (methodOptions) {
    // some logic ...
  }
}

플러그인 예제

install 메서드 안에 인스턴스 메서드를 정의하였다.

const MyPlugin = {
	install(Vue){
  	Vue.prototype.$_convertToUpper = function(str){
    	return str.toUpperCase();
    }
  }
}

Vue.use(MyPlugin);

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something aweåome", done: true }
    ]
  },
  methods: {
		toggle: function(todo){
          todo.done = !todo.done
        }
  }
})

<del v-if="todo.done">
  {{ $_convertToUpper(todo.text) }}
</del>
<span v-else>
  {{ $_convertToUpper(todo.text) }}
</span>

🍒 필터 (Filters)

vue.js에서 공통적인 텍스트 포맷팅에 사용되는 필터를 정의할 수 있도록 해준다.

필터는 두 곳에서 사용할 수 있다.

  • mustache interpolation({{}})
  • v-bind expression

필터는 pipe 로 js expression 끝에 추가될 수 있다.

<!-- in mustaches -->
{{ message | capitalize }}

<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

Local Filters

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

Global Filter

뷰 인스턴스를 만들기 전에 전역 필터를 정의할 수도 있다. 전역 필터와 로컬 필터가 같은 이름이라면, 로컬 필터가 적용된다.

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

Chained Filters

필터는 체이닝될 수 있다.

다음과 같은 예는 filterB(filterA(message)) 로 적용된다.

{{ message | filterA | filterB }}

인자를 받는 필터

{{ message | filterA('arg1', 'b')}}

filterA는 세 개의 인자를 받는 함수이다. 첫 번째 인자로 message, 그다음 인자로 'arg1', 'b'가 들어가게 된다.

필터 예제



























const comp1 = {
	data(){
  	return{
    	message : "hello this is yejin",
      name: "yejin"
    }
  },
  template : `
  <div>
  	{{message | capitalize}} 
    <br>
  	{{name | iSaid('one', 'two')}}
  </div>`,
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    },
    iSaid(value, arg1, arg2){
    	return `${value} said : ${arg1}, ${arg2}`;
    },
  }
}

Select a repo