Vue.js 이벤트 처리 및 필터

이벤트 처리
위의 기사에서는 Vue의 몇 가지 상용 지령을 소개하였다.그 중에서 v-bind 지령을 말했는데 v-bind 지령은 단방향으로 데이터를 귀속할 수 있을 뿐만 아니라 귀속 방법도 할 수 있다.뿐만 아니라 감청 사건도 귀속시킬 수 있다.v-bind는 클릭,submit 등 이벤트를 귀속시켜 이벤트를 처리하는 방법을 제공할 수 있습니다.먼저 예시를 보십시오: Greet 이 코드는 button 단추에 클릭 이벤트를 추가하고 v-bind 명령을 통해 클릭 이벤트를 연결하는 방법greet입니다. 방법은 vue 예시의methods 속성에 정의됩니다.methods는 vue 예시의 속성입니다. 이 속성에서 js 방법을 정의할 수 있습니다.위의 코드는 방법명을 직접 썼습니다. 만약 우리가 매개 변수를 전송해야 한다면, 귀속할 때 방법명 (매개 변수) 이라고 쓰면 됩니다.이 쓰기 방법의 전체 코드 예시(이 코드는 내가 vue 홈페이지에서 복사한 코드):

  
  Greet

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  //   `methods`        
  methods: {
    greet: function (event) {
      // `this`          Vue   
      alert('Hello ' + this.name + '!')
      // `event`     DOM   
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

일반적인 이벤트 처리 시 이벤트 수식자를 사용합니다.다음은 자주 사용하는 사건 수식자를 소개합니다.
.stop 이벤트 수정자
        .stop은 이벤트 거품을 구성하는 데 사용됩니다. 때때로 우리가 요소에 이벤트를 추가한 후에 요소의 클릭 이벤트가 부모 요소에 영향을 미칠 수 있습니다. 이것이 바로 시간 거품입니다.stop은 이런 시간의 거품을 막을 수 있다.

.prevent 이벤트 수정자
        .prevent는 요소의 기본 동작을 구성할 수 있습니다.우리가 a 탭에 클릭 이벤트를 추가할 때, a 탭은 기본적으로href 속성이 가리키는 주소를 바꿉니다. 이것이 바로 a 탭의 기본 행동입니다. 이것은 우리가 a 탭에 클릭 이벤트를 연결할 때 무효이며, 이벤트 수식자를 추가합니다.prevent를 사용하면 기본 다이얼을 설정할 수 있으며, 우리가 귀속된 이벤트 처리 방법을 실행할 수 있습니다.

    
    그를 찌르다 

.capture 이벤트 수정자
        .capture는 거품이 생기는 순서를 수정하는 데 쓰인다. 방금.stop은 거품 사건을 막는 것입니다. 이 사건 수식자는 거품 사건의 거품 순서를 바꿀 수 있습니다.capture 코스메틱 요소가 우선적으로 실행됩니다.다음 코드, 본래의 거품 발생 순서는: input->div, 수식자를 더한 후div->input

.self 이벤트 수정자
        .self 수식자 이해가 잘 돼요.self 수식된 이벤트는 수식된 요소를 클릭할 때만 이벤트가 터치되며 부모 요소나 하위 요소를 클릭해도 이벤트를 터치할 수 없습니다.

.once 이벤트 수정자
사용하다.once 수식된 이벤트는 한 번만 터치합니다.

    
    그를 찌르다 

필터
        Vue.js는 일반적인 텍스트 포맷에 사용할 수 있는 사용자 정의 필터를 허용합니다.필터는 플러그인 표현식과 v-bind 표현식에 사용할 수 있지만 v-bind는 vue에 있습니다.js2.1.0 이후 지원이 시작되었습니다.필터는 JavaScript 표현식의 끝에 추가되어야 합니다.다음과 같습니다.

{{ message | capitalize }}

定义方法

全局定义：

        可以再Vue实例创建之前就定义好过滤器如下，我自定义了一个日期过滤器用于日期格式化显示。

//       ，         
      Vue.filter('dateFormat', function (dateStr, pattern = "") {
         //           ，       
         var dt = new Date(dateStr)
         //   yyyy-mm-dd
         var y = dt.getFullYear()
         var m = dt.getMonth() + 1
         var d = dt.getDate()
         // return y + '-' + m + '-' + d
         if (pattern.toLowerCase() === 'yyyy-mm-dd') {
            return `${y}-${m}-${d}`
         } else {
            var hh = dt.getHours()
            var mm = dt.getMinutes()
            var ss = dt.getSeconds()

            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
         }
      });

new Vue({
  // ...
})

어셈블리 정의:
구성 요소에서 필터 속성을 통해 자신의 필터를 정의할 수 있으며 필터 속성과 데이터 속성을 등급별로 정의할 수 있습니다. 필터 방법을 정의할 수 있습니다.다음 코드:capitalize는 방법명이고 그 다음은 대응하는 필터 방법입니다. 사용 시 방법명을 통해 사용하면 됩니다.

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