vue 수정자에 대한 자세한 요약(예제 포함)

이 글은 vue 수정자에 대한 자세한 요약을 제공합니다(예시 포함). 필요한 친구들이 참고할 수 있기를 바랍니다.

누구나 쉽게 코드를 작성할 수 있도록 vue.js에서는 버블링 취소, 기본 이벤트 차단 등 우리가 자주 사용하는 편리한 수정자를 많이 제공합니다~

Directory

Form 수정자

이벤트 수정자

마우스 버튼 수정자

키 값 수정자

v-bind 수정자(무엇이라고 부르는지 정말 모르겠습니다.)

양식 수정자

양식을 작성하는 데 가장 일반적으로 사용되는 것은 무엇인가요? 입력! v-model~ 그리고 우리 수정자는 이러한 것들을 단순화하기 위해 존재합니다

.lazy

<div>
   <input>
   <p>{{value}}</p>
</div>

여기에서 우리가 입력하는 동안에도 커서가 여전히 있는 것을 볼 수 있습니다. 그 당시 다음은 이미 가치가 나왔고, 이는 매우 실시간이라고 할 수 있습니다.
그러나 때때로 모든 입력을 마친 후 커서가 떠난 후 뷰를 업데이트하고 싶을 때가 있습니다.

<div>
   <input>
   <p>{{value}}</p>
</div>

그렇습니다~ 커서가 입력 상자를 떠날 때만 뷰가 업데이트됩니다. 이는 onchange 이벤트에서 업데이트를 트리거하는 것과 같습니다.

.trim

입력란에서 일부 형제가 비밀번호를 입력한 후 실수로 공백을 쳐서 입력한 내용을 필터링해야 하는 경우가 종종 있습니다.

<input>

좀 더 확실하게 보여드리기 위해 스타일을 변경했는데 문제는 크지 않습니다. 이 큰 부분의 왼쪽과 오른쪽에 공백이 없다는 것을 확실히 보셨을 거라 믿습니다. 안녕하세요 입력창에 입력해도 스페이스바가 짜증나네요.
이 기능은 선행 및 후행 공백만 필터링할 수 있다는 점에 유의하세요! 처음과 마지막 중간은 필터링되지 않습니다

.number

이 이름에서 알 수 있듯이 숫자 입력이나 숫자에 대한 입력을 제한해야 한다는 것을 알 수 있지만 서두르지는 않습니다. 주문하다.

숫자를 먼저 입력하면 숫자만 입력할 수 있게 제한됩니다.
문자열을 먼저 입력하면 .number

이벤트 수정자

.stop

를 추가하지 않는 것과 같습니다. 이벤트 버블링 메커니즘으로 인해 클릭 이벤트를 요소에 바인딩하면 부모의 클릭 이벤트가 발생했습니다.

<div>
  <button>ok</button>
</div>

//js
shout(e){
  console.log(e)
}
//1
//2

한 번의 클릭으로 이벤트 버블링을 중지할 수 있어 매우 편리합니다. 이는 event.stopPropagation() 메서드를 호출하는 것과 동일합니다.

<div>
  <button>ok</button>
</div>
//只输出1

.prevent

이벤트 방지를 위한 기본 동작(예: 제출 버튼을 클릭할 때 양식 제출 방지) event.preventDefault() 메서드를 호출하는 것과 동일합니다.

<!-- 提交事件不再重载页面 -->

참고: 수정자는 동시에 여러 번 사용할 수 있지만 순서는 다를 수 있습니다.
v-on:click.prevent.self를 사용하면 모든 클릭이 방지되고, v-on:click.self.prevent는 요소 자체에 대한 클릭만 방지됩니다.
즉, 왼쪽에서 오른쪽으로 판단~

.self

콜백은 이벤트가 바인딩된 요소 자체에서 이벤트가 트리거될 때만 트리거됩니다. 아래에 표시된 것처럼 우리는 .stop에서 하위 요소가 상위 요소까지 버블링되고 상위 요소의 클릭 이벤트를 트리거한다는 것을 알았습니다. 이 .self를 추가하면 버튼을 클릭할 때 클릭 이벤트가 발생합니다. 상위 요소가 클릭되었을 때만(파란색 배경) 소리가 납니다~ self의 영어 번역을 보면 'self, 그 자체'라는 수식어를 사용하는 것을 볼 수 있습니다

<div>
  <button>ok</button>
</div>

.once

이 수식어의 사용법은 이름처럼 간단하고 투박합니다. 이벤트를 바인딩한 후에는 한 번만 사용할 수 있으며 두 번째에는 발동되지 않습니다. .

//键盘按坏都只能shout一次
<button>ok</button>

.capture

위에서 우리는 이벤트 버블링을 알고 있습니다. 실제로 전체 이벤트 메커니즘은 캡처 단계-목표 단계-버블 단계입니다.
기본적으로 이벤트 트리거는 대상에서 시작되어 버블링됩니다.
이 .capture를 추가한 후에는 반대 작업을 수행하며 이 요소가 포함된 최상위 수준에서 아래쪽으로 이벤트가 트리거됩니다.

   <div>
      obj1
      <div>
        obj2
        <div>
          obj3
          <div>
            obj4
          </div>
        </div>
      </div>
    </div>
    // 1 2 4 3

从上面这个例子我们点击obj4的时候，就可以清楚地看出区别，obj1，obj2在捕获阶段就触发了事件，因此是先1后2，后面的obj3，obj4是默认的冒泡阶段触发，因此是先4然后冒泡到3~

.passive

当我们在监听元素滚动事件的时候，会一直触发onscroll事件，在pc端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div>...</div>

.native

我们经常会写很多的小组件，有些小组件可能会绑定一些事件，但是，像下面这样绑定事件是不会触发的

<my-component></my-component>

必须使用.native来修饰这个click事件（即<my-component></my-component>），可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，
注意：使用.native修饰符来操作普通HTML标签是会令事件失效的

鼠标按钮修饰符

刚刚我们讲到这个click事件，我们一般是会用左键触发，有时候我们需要更改右键菜单啥的，就需要用到右键点击或者中间键点击，这个时候就要用到鼠标按钮修饰符

.left   左键点击

.right  右键点击

.middle 中键点击

<button>ok</button>

键值修饰符

其实这个也算是事件修饰符的一种，因为它都是用来修饰键盘事件的。
比如onkeyup，onkeydown啊

.keyCode

如果不用keyCode修饰符，那我们每次按下键盘都会触发shout，当我们想指定按下某一个键才触发这个shout的时候，这个修饰符就有用了，具体键码查看键码对应表

<input>

为了方便我们使用，vue给一些常用的键提供了别名

//普通键
.enter 
.tab
.delete //(捕获“删除”和“退格”键)
.space
.esc
.up
.down
.left
.right

//系统修饰键
.ctrl
.alt
.meta
.shift

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

我们从上面看到，键分成了普通常用的键和系统修饰键，区别是什么呢？
当我们写如下代码的时候,我们会发现如果仅仅使用系统修饰键是无法触发keyup事件的。

<input>

那该如何呢？我们需要将系统修饰键和其他键码链接起来使用，比如

<input>

这样当我们同时按下ctrl+c时，就会触发keyup事件。
另，如果是鼠标事件，那就可以单独使用系统修饰符。

      <button>ok</button>
      <button>ok</button>
      <button>ok</button>

大概是什么意思呢，就是你不能单手指使用系统修饰键的修饰符（最少两个手指，可以多个）。你可以一个手指按住系统修饰键一个手指按住另外一个键来实现键盘事件。也可以用一个手指按住系统修饰键，另一只手按住鼠标来实现鼠标事件。

.exact (2.5新增)

我们上面说了这个系统修饰键，当我们像这样绑定了click键按下的事件，惊奇的是，我们同时按下几个系统修饰键，比如ctrl shift点击，也能触发，可能有些场景我们只需要或者只能按一个系统修饰键来触发（像制作一些快捷键的时候），而当我们按下ctrl和其他键的时候则无法触发。那就这样写。
注意：这个只是限制系统修饰键的，像下面这样书写以后你还是可以按下ctrl + c，ctrl+v或者ctrl+普通键 来触发，但是不能按下ctrl + shift +普通键来触发。

<button>ok</button>

然后下面这个你可以同时按下enter+普通键来触发，但是不能按下系统修饰键+enter来触发。相信你已经能听懂了8~

<input>

v-bind修饰符

.sync(2.3.0+ 新增)

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。我们通常的做法是

//父亲组件
<comp></comp>
//js
func(e){
 this.bar = e;
}

//子组件js
func2(){
  this.$emit('update:myMessage',params);
}

现在这个.sync修饰符就是简化了上面的步骤

//父组件
<comp></comp> 
//子组件
this.$emit('update:myMessage',params);

这样确实会方便很多，但是也有很多需要注意的点

1. 使用sync的时候，子组件传递的事件名必须为update:value，其中value必须与子组件中props中声明的名称完全一致(如上例中的myMessage，不能使用my-message)

2. 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。

3. 将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。

.prop

要学习这个修饰符，我们首先要搞懂两个东西的区别。

Property：节点对象在内存中存储的属性，可以访问和设置。
Attribute：节点对象的其中一个属性( property )，值是一个对象。
可以通过点访问法 document.getElementById('xx').attributes 或者 document.getElementById('xx').getAttributes('xx') 读取，通过 document.getElementById('xx').setAttribute('xx',value) 新增和修改。
在标签里定义的所有属性包括 HTML 属性和自定义属性都会在 attributes 对象里以键值对的方式存在。

其实attribute和property两个单词，翻译出来都是属性，但是《javascript高级程序设计》将它们翻译为特性和属性，以示区分

//这里的id,value,style都属于property
//index属于attribute
//id、title等既是属性，也是特性。修改属性，其对应的特性会发生改变；修改特性，属性也会改变
<input>
//input.index === undefined
//input.attributes.index === this.index

从上面我们可以看到如果直接使用v-bind绑定，则默认会绑定到dom节点的attribute。
为了

通过自定义属性存储变量，避免暴露数据

防止污染 HTML 结构

我们可以使用这个修饰符，如下

<input>
//input.index === this.index
//input.attributes.index === undefined

.camel

由于HTML 特性是不区分大小写的。

<svg></svg>

实际上会渲染为

<svg></svg>

这将导致渲染失败，因为 SVG 标签只认 viewBox，却不知道 viewbox 是什么。
如果我们使用.camel修饰符，那它就会被渲染为驼峰名。
另，如果你使用字符串模版，则没有这些限制。

new Vue({
  template: '<svg></svg>'
})

위 내용은 vue 수정자에 대한 자세한 요약(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!