λ·° ν•„ν„°

뷰의 ν•„ν„°λŠ” 화면에 ν‘œμ‹œλ˜λŠ” ν…μŠ€νŠΈμ˜ ν˜•μ‹μ„ μ‰½κ²Œ λ³€ν™˜ν•΄μ£ΌλŠ” κΈ°λŠ₯μž…λ‹ˆλ‹€. κ°€μž₯ κ°„λ‹¨ν•˜κ²ŒλŠ” λ‹¨μ–΄μ˜ λŒ€λ¬Έμžν™”λΆ€ν„° λ‹€κ΅­μ–΄, ꡭ제 톡화 ν‘œμ‹œ λ“± λ‹€μ–‘ν•˜κ²Œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

ν•„ν„° μ‚¬μš© 방법

ν•„ν„°ν‹€ μ‚¬μš©ν•˜λŠ” 방법은 μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.

<div id="app">
  {{ message | capitalize }}
</div>
new Vue({
  el: '#app',
  data: {
    message: 'hello'
  },
  filters: {
    capitalize: function(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

μœ„μ˜ μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜λ©΄ Hello ν…μŠ€νŠΈκ°€ 화면에 좜λ ₯λ©λ‹ˆλ‹€. ν•„ν„°λ₯Ό 쓰지 μ•Šμ•˜λ‹€λ©΄ helloκ°€ 좜λ ₯λ˜μ—ˆκ² μ£ .

ν•„ν„° 등둝 νŒ¨ν„΄

μœ„μ™€ 같이 filters 속성을 μ΄μš©ν•˜μ—¬ 각 μ»΄ν¬λ„ŒνŠΈμ— ν•„ν„°λ₯Ό λ“±λ‘ν•˜λŠ” 방법도 μžˆμ§€λ§Œ, μ‹€μ œλ‘œλŠ” λŒ€λΆ€λΆ„ filters.js νŒŒμΌμ„ λ³„λ„λ‘œ λΆ„λ¦¬ν•˜μ—¬ μ‚¬μš©ν•©λ‹ˆλ‹€. μ•„λž˜μ™€ 같이 말이죠.

// filters.js
export function capitalize() {
  // ..
}

export function translate() {
  // ..
}
// main.js
import Vue from 'vue';
import * as filters from 'filters.js';

Object.keys(filters).forEach(function(key) {
  Vue.filter(key, filters[key]);
});

new Vue({
  // ..
})