vue 필터 및 사용자 정의 명령 사용

여과기

무엇

필터는 우리가 전송한 데이터에 대해 필요한 처리를 하고 처리 결과를 되돌려줄 수 있다

필터는 데이터를 수정하지 않습니다

필터의 본질은 함수다

필터 함수는 매개 변수가 있어야 합니다. 매개 변수는 처리하고자 하는 원본 데이터를 포함해야 합니다

필터는 처리 후의 결과를 되돌려 주는 값이 있어야 한다

export default {
    //  filters 
    filters:{
         (data){
            //  data  
            return  
        }  
    }
}

어떻게

(1) 필터 정의

부분 필터: 구성 요소 내부에 정의되어 있으며 현재 구성 요소 내에서만 사용할 수 있습니다

filters 구조를 통해 만들기

export default {
    //  filters 
    filters:{
       (data){
          //  
          return  
      }  
    }
}

글로벌 필터: Vue를 통해.filter 전역 필터를 만듭니다. 한 번에 하나만 만들 수 있고 모든 구성 요소에서 사용할 수 있습니다

Vue 인스턴스가 생성되기 전에 정의해야 합니다.

Vue.filter( ，(data) => {
    // do something
    return  
})

개별 파일에 글로벌 필터 생성
필요한 구성 요소에 도입하고 filters에 등록합니다

import Vue from 'vue'
//  Vue.filter 
const filter1 = Vue.filter( ，(data) => {
    // do something
    return  
})
//  
export {
    filter1
}

//  -- 
import { filter1 } from '@/utils/filters.js'

export default {
    //   filters ， 
    // filters ， 
    //  filters 
    filters: {
        filter1
    }
}

(2) 사용 방법

플러그인 표현식 {}} 또는 v-bind 표현식에서 파이프 조작부호 | | 를 통해 필터를 사용합니다

형식: {소스 데이터 | 필터}}

<div> {{   |   }} </div>

여러 번 사용

필터는 여러 개의 병행 사용을 지원하며, 전자의 처리 결과는 후자의 매개 변수로 전송된다

<div> {{   |  1 |  2 }}</div>

(3) 필터 매개변수

수동 전달 매개 변수가 없으면 기본적으로 파이프 문자 앞의 데이터를 전달합니다

수동으로 매개 변수를 전달해도 기본 매개 변수의 전달에 영향을 주지 않습니다.

필터 함수의 첫 번째 매개 변수는 파이프 문자 앞의 데이터입니다

수동으로 전달되는 매개 변수는 매개 변수 목록의 두 번째부터 순서대로 뒤로

03. 봉인 필터 함수

필터의 본질은 하나의 함수이기 때문에 하나의 단일 파일에 필터 함수를 직접 봉인할 수 있다

//  
const filterA = () => {}
const filterB = () => {}
//  
export { filterA, filterB }

그리고 필요한 구성 요소에 함수를 도입하여 필터로 등록합니다

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

사용자 정의 명령

무엇

일반 DOM 요소에 대한 기본 작업을 수행하려면 사용자 정의 명령이 사용됩니다.

즉, 사용자 정의 명령은 주로 DOM 요소를 조작하는 것이다.

02. 기본 개념

(1) 갈고리 함수

명령 정의 객체는 다음과 같은 갈고리 함수를 제공할 수 있습니다(선택 사항).

bind: 한 번만 호출합니다. 명령이 원소에 처음 귀속될 때 호출합니다. 이 갈고리 함수로 귀속할 때 실행되는 초기화 이벤트를 정의할 수 있습니다

inserted: 연결된 요소가 부모 노드에 삽입될 때 호출됩니다. 부모 노드가 존재하지 않아도 됩니다

업데이트: 귀속 요소가 있는 구성 요소가 업데이트될 때 호출됩니다. 귀속된 값이 바뀌든 안 바뀌든 호출됩니다.그러나 업데이트 전후의 값을 비교하여 불필요한 템플릿 업데이트를 무시할 수 있습니다

componentUpdated: 귀속 요소가 있는 구성 요소의 모든 업데이트가 완료되면 업데이트 주기가 끝날 때 호출됩니다

unbind: 한 번만 호출, 명령과 원소 해제 시 호출

(2) 매개변수

명령 갈고리 함수는 다음 매개변수로 전송됩니다.

el: 명령에 귀속된 요소로 DOM, 즉 명령의 그 요소를 직접 조작할 수 있습니다

binding: 하나의 대상에 여러 개의 속성을 포함한다.

name: 지령명, v-접두사가 없습니다

value: 명령 귀속 값으로 한 대상을 귀속시켜 여러 개의 값을 전달할 수 있습니다

oldValue: 명령이 연결된 낡은 값입니다. 업데이트와componentUpdated 갈고리에서 사용할 수 없습니다. 값이 바뀌든 안 바뀌든 상관없습니다

expression: 문자열 형식의 명령 표현식

arg: 지령에 전달되는 매개 변수

modifiers: 수식자를 포함하는 대상

vnode:Vue는 생성된 가상 노드를 컴파일합니다

oldVnode: 이전 가상 노드, 업데이트와componentUpdated 갈고리에서만 사용할 수 있습니다

// <div v-demo:left="100"></div>
//   left   bingding arg
// 100   bingding value
Vue.directive('demo',{
    // el-- ， 
    bind(el,binding,vnode){
        //  
        el.style.position = 'fixed';
        const s = ( binding.arg == 'left' ? 'left' : top );
        el.style[s] = binding.value + 'px';
    }
})

03. 명령 등록

(1) 글로벌 등록

Vue를 통해directive () 방식으로 전역 명령을 등록합니다.

첫 번째 매개 변수는 사용자 정의 명령 이름입니다. 명령 이름은 v-접두사를 붙일 필요가 없습니다. 기본값은 자동으로 접두사를 붙입니다. 명령을 사용할 때 접두사를 붙이면 됩니다

두 번째 매개 변수는 대상 데이터일 수도 있고 지령 함수일 수도 있다

Vue.directive(" ", {
    inserted: function(el){
        // do something
    }
})

(2) 로컬 등록

Vue 인스턴스에 directives 객체 데이터 추가하여 로컬 사용자 지정 명령 등록

export default {
    directives: {
         :{
             
        }
    }
}

이상은 vue 필터와 사용자 정의 명령의 사용에 대한 상세한 내용입니다. vue 필터와 사용자 정의 명령에 대한 더 많은 자료는 저희 다른 관련 글에 주목하십시오!