【Vue.js】Vue CLI 글로벌 필터 작성
【Vue.js】Vue CLI 글로벌 필터 작성
Vue CLI로 만든 사이트에서 글로벌 필터를 사용하는 방법.
전역적으로 필터를 사용하려면 filter 함수와 filter 이름 등록이 필요합니다.
하기 페이지를 참고로 했습니다.
htps : // 하고 싶다 l. 코m/쿠에 s치온 s/281227
절차
1. Sorce 폴더 아래에 filter 디렉토리와 index.js 만들기
filter의 라이브러리로서 디렉토리를 작성한다.
폴더나 파일의 위치나 이름은 임의이지만, 이하에서는, src 디렉토리 부하에 작성하는 예로 한다.
· 디렉토리와 파일
*PJ > src > filter > index.js *
2. vue 가져오기
필터 함수와 ID를 등록하기 위해 먼저 vu 자신감을 가져옵니다.
index.jsimport Vue from "vue"
import Vue from "vue"는 하기 식과 동의다.
무엇을 하고 있는지는 명확하지 않지만, 글로벌로 사용할 수 있는 Vue 인스턴스를 생성하고 있는 것으로 보인다.
import Vue from "vue"
↓
const Vue = require('vue')
↓
const vue = require('./node_modules/vue/dist/vue.runtime.common.js');
↓
if (process.env.NODE_ENV === 'production') {
module.exports = require('./vue.runtime.common.prod.js')
} else {
module.exports = require('./vue.runtime.common.dev.js')
}
3. 필터 만들기
Vue.filter를 사용하여 필터 이름과 처리를 정의합니다.Vue.filter('フィルタ名', function(引数){return 処理})
1000자리로 구분하는 필터 1000separator를 만들 때.
index.jsimport Vue from "vue"
Vue.filter('1000separator', function(value) {
return value.toLocaleString();
})
4. main.js에서 만든 필터를 가져옵니다.
src 디렉토리 아래의 main.js 파일로 이동하여 filter 디렉토리를 가져옵니다.
main.jsimport "./filter"
5. 필터 적용
필터를 적용할 위치로 이동하여 필터를 호출합니다.
호출 방법은 마스터시 전개를 사용하는 방법과 v-bind를 사용하는 방법의 2 종류.
(1) Mustache 배포{{式| フィルタ名}}
(2) v-bind<要素 v-bind:属性="プロパティ名 | フィルタ名">
마스터 배포에서 필터를 사용하는 예.
마스터시 배포 <em>${{number | 1000separator}}</em>
data 옵션의 number 속성에 저장된 숫자를 1000자리로 구분합니다.
이상.
Reference
이 문제에 관하여(【Vue.js】Vue CLI 글로벌 필터 작성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/shizen-shin/items/05bd470f80d4dfd2ae1a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import Vue from "vue"
import Vue from "vue"는 하기 식과 동의다.
무엇을 하고 있는지는 명확하지 않지만, 글로벌로 사용할 수 있는 Vue 인스턴스를 생성하고 있는 것으로 보인다.
import Vue from "vue"
↓
const Vue = require('vue')
↓
const vue = require('./node_modules/vue/dist/vue.runtime.common.js');
↓
if (process.env.NODE_ENV === 'production') {
module.exports = require('./vue.runtime.common.prod.js')
} else {
module.exports = require('./vue.runtime.common.dev.js')
}
3. 필터 만들기
Vue.filter를 사용하여 필터 이름과 처리를 정의합니다.Vue.filter('フィルタ名', function(引数){return 処理})
1000자리로 구분하는 필터 1000separator를 만들 때.
index.jsimport Vue from "vue"
Vue.filter('1000separator', function(value) {
return value.toLocaleString();
})
4. main.js에서 만든 필터를 가져옵니다.
src 디렉토리 아래의 main.js 파일로 이동하여 filter 디렉토리를 가져옵니다.
main.jsimport "./filter"
5. 필터 적용
필터를 적용할 위치로 이동하여 필터를 호출합니다.
호출 방법은 마스터시 전개를 사용하는 방법과 v-bind를 사용하는 방법의 2 종류.
(1) Mustache 배포{{式| フィルタ名}}
(2) v-bind<要素 v-bind:属性="プロパティ名 | フィルタ名">
마스터 배포에서 필터를 사용하는 예.
마스터시 배포 <em>${{number | 1000separator}}</em>
data 옵션의 number 속성에 저장된 숫자를 1000자리로 구분합니다.
이상.
import Vue from "vue"
Vue.filter('1000separator', function(value) {
return value.toLocaleString();
})
import "./filter"
<em>${{number | 1000separator}}</em>
Reference
이 문제에 관하여(【Vue.js】Vue CLI 글로벌 필터 작성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/shizen-shin/items/05bd470f80d4dfd2ae1a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
