Vue의 filter 및 directive 자세히 보기

vue의 필터는 두 가지로 나뉜다. 국부 필터와 전역 필터
필터는 일반적인 텍스트 포맷에 사용할 수 있습니다.필터는 두 곳에 사용할 수 있습니다: 쌍괄호 삽입값과 v-bind 표현식 (후자는 2.1.0+부터 지원).필터는 JavaScript 표현식의 끝부분에 추가되어야 하며 파이핑 기호에 의해 지정됩니다(공식 문서).

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

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

1. 참조 없는 전역 필터 정의

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

2. 참조 글로벌 필터 정의

 <div id="app">
            <p>{{ msg | msgFormat(' ','--')}}</p>
        </div>

        <script>
            //   Vue  ，   msgFormat
            Vue.filter('msgFormat', function(msg, arg, arg2) {
                //    replace  ， ，   ， 
                return msg.replace(/ /g, arg+arg2)
            })
      </script>

3. 부분 필터
국부 필터의 유삼과 무삼의 정의와 사용 방법은 전역 필터와 같다.유일한 차이점은 부분 필터가 vue의 실례에 정의되어 있다는 것이다.그 작용의 구역도 vue 실례 제어 구역이다

 //   Vue  ，  ViewModel
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: 'msg'
                },
                methods: {},
                // 。  vue  
                filters: {
                    dataFormat(msg) {
                        return msg+'xxxxx';
                    }
                }
            });

vue 사용자 정의 명령 --directive

Vue에는 많은 지령이 내장되어 있다. 예를 들어 v-model, v-show, v-html 등이다. 그러나 때때로 이런 지령은 우리를 만족시키지 못하거나 요소에 특별한 기능을 추가하고 싶을 때 우리는 vue의 강력한 기능인 사용자 정의 지령을 사용해야 한다.
시작하기 전에 우리는 사용자 정의 명령이 해결하는 문제나 장면을 사용하는 것은 일반 DOM 요소에 대해 밑바닥 조작을 하는 것이기 때문에 사용자 정의 명령을 맹목적으로 함부로 사용해서는 안 된다.

전역 명령

Vue.directive('focus', {
  //   DOM  ……
  inserted: function (el) {
    //  
    el.setAttribute('placeholder', ' ')
    el.focus()
  }
})

로컬 명령

directives: {
  focus: {
    //  
    inserted: function (el) {
      el.focus()
    }
  }
}

활용단어참조

<input v-focus>

갈고리 함수(옵션)

bind: 한 번만 호출합니다. 명령을 원소에 처음 연결할 때 호출합니다.여기서 일회용 초기화 설정을 할 수 있습니다.
inserted: 귀속 요소가 부모 노드에 삽입될 때 호출됩니다. (부부 노드만 존재하지만 반드시 문서 파일에 삽입된 것은 아닙니다.)
업데이트: 구성 요소의 VNode가 업데이트될 때 호출되지만 하위 VNode가 업데이트되기 전에 발생할 수 있습니다.명령의 값이 바뀔 수도 있고 없을 수도 있습니다.그러나 업데이트 전후의 값을 비교하여 불필요한 템플릿 업데이트를 무시할 수 있습니다. (상세한 갈고리 함수 파라미터 참조)
componentUpdated: 명령어가 있는 구성 요소의 VNode와 하위 VNode를 모두 업데이트한 후에 호출합니다.
unbind: 한 번만 호출합니다. 명령과 요소가 묶일 때 호출합니다.

사용 및 매개변수

순서대로 실행하다

// 
Vue.directive('focus', {
  bind: function (el, binding, vnode) {
    console.log("1")
  },
  inserted: function (el, binding, vnode) {
    console.log("2");
  },
  update: function (el, binding, vnode, oldVnode) {
    console.log("3");
  },
  componentUpdated: function (el, binding, vnode, oldVnode) {
    console.log('4');
  },
  unbind: function (el, binding, vnode) {
    console.log('5');
  }
})

다음은 Vue의 filter와directive에 대한 상세한 내용입니다. Vue의 filter와directive에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!