Apakah pengubah suai dalam Vue? Ringkasan pengubah suai biasa

Artikel ini akan memberi anda pemahaman ringkas tentang pengubah suai dalam Vue, dan meringkaskan beberapa pengubah suai dan kaedah penulisan yang biasa saya harap ia akan membantu semua orang.

1 Apakah itu pengubah

Dalam Vue, pengubah suai mengendalikan banyak butiran acara DOM, supaya kita tidak perlu lagi menghabiskan banyak masa untuk menangani perkara-perkara yang menyusahkan ini, tetapi boleh mempunyai lebih tenaga untuk memberi tumpuan kepada pemprosesan logik program. [Cadangan berkaitan: tutorial video vuejs] Pengubah suai dalam

vue dibahagikan kepada lima jenis berikut:

• Pengubah suai borang
• Pengubah suai acara
• Pengubah suai butang tetikus
• Pengubah nilai utama
• pengubah suai v-bind

2. Pengubah suai Biasa

2.1 Pengubah suai borang

Apabila kita mengisi borang, teg yang paling biasa digunakan ialah teg input dan arahan yang paling biasa digunakan ialah v-model

Pengubah suai tentang borang adalah seperti berikut:

• malas
• trim
• nombor

1. malas

Secara lalai, v-model akan mengemas kini data selepas setiap acara input. Anda boleh menambah pengubah suai lazy untuk mengemas kini data selepas setiap acara change sebaliknya:

<input type="text" v-model.lazy="value">
<p>{{value}}</p>

2 trim

jika anda mahu Secara lalai, ruang pada kedua-dua hujung input pengguna dialih keluar secara automatik Anda boleh menambah v-model pengubah suai selepas .trim:

<input type="text" v-model.trim="value">

3 anda mahu input pengguna ditukar kepada nombor secara automatik, anda boleh menambah pengubah suai selepas

untuk mengurus input:

v-model.number

2.2 Pengubah suai acara

<input v-model.number="age" type="number">

Pengubah peristiwa memproses penangkapan dan sasaran acara Mereka mempunyai pengubah berikut:

berhenti

halang
• sendiri
• sekali
tangkap
• pasif
• asli
• 1 henti

menghalang risiko acara Bubble, bersamaan dengan panggilan. kaedah , acara klik akan berhenti menghantar

event.stopPropagation

2. mencegah

<div @click="shout(2)">
    <button @click.stop="shout(1)">ok</button> 
</div> 
//只输出1

menghalang kelakuan lalai acara, yang bersamaan dengan dipanggil dan acara serah tidak lagi memuatkan semula halaman

event.preventDefault3 diri

<form @submit.prevent="onSubmit"></form>

Hanya apabila event.target ialah elemen itu sendiri Pencetus. pengendali acara, contohnya: pengendali acara tidak datang daripada elemen kanak-kanak

Anda perlu memberi perhatian kepada susunan panggilan apabila menggunakan pengubah suai, kerana kod yang berkaitan dijana dalam susunan yang sama. Jadi menggunakan

akan menghalang gelagat lalai semua acara klik pada elemen

<div v-on:click.self="doThat">...</div>

dan elemen anak

manakala

hanya akan menghalang gelagat lalai acara klik pada elemen itu sendiri. @click.prevent.self@click.self.prevent4 sekali

Selepas mengikat acara, ia hanya boleh dicetuskan sekali, dan ia tidak akan dicetuskan untuk kali kedua

5. Tangkapan

<button @click.once="shout(1)">ok</button>

Apabila menambahkan pendengar acara, gunakan mod tangkapan Contohnya: peristiwa yang menunjuk ke elemen dalaman diproses secara luaran sebelum diproses oleh elemen dalaman. Jadikan peristiwa pencetus dari peringkat atas yang mengandungi elemen ini ke bawah

capture6 pasif

<div @click.capture="shout(1)">
    obj1
<div @click.capture="shout(2)">
    obj2
<div @click="shout(3)">
    obj3
<div @click="shout(4)">
    obj4
</div>
</div>
</div>
</div>
// 输出结构: 1 2 4 3

Di bahagian mudah alih, apabila kita mendengar acara tatal. elemen , akan terus mencetuskan acara dan menjadikan halaman web kami tersekat Oleh itu, apabila kami menggunakan pengubah suai ini, ia adalah bersamaan dengan menambah pengubah pada acara

. Tingkah laku lalai

onscroll acara menatal (menatal) akan berlaku serta-merta dan bukannya menunggu onscroll selesai, sekiranya ia mengandungi pengubah suai .lazy

onScrollevent.preventDefault() secara amnya digunakan untuk sentuhan Pendengar acara boleh digunakan untuk

meningkatkan prestasi menatal peranti mudah alih

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

.

.passiveJangan gunakan dan

pada masa yang sama, kerana

telah menunjukkan kepada penyemak imbas bahawa anda

tidak mahu kelakuan lalai .passive menyekat peristiwa. Jika anda melakukan ini, .prevent akan diabaikan dan penyemak imbas akan memberikan amaran. .passive

7. native

让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件

<my-component v-on:click.native="doSomething"></my-component>

使用.native修饰符来操作普通HTML标签是会令事件失效的

2.3 鼠标按钮修饰符

鼠标按钮修饰符针对的就是左键、右键、中键点击，有如下：

• left 左键点击
• right 右键点击
• middle 中键点击

<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>

2.4 键盘修饰符

键盘修饰符是用来修饰键盘事件（onkeyup，onkeydown）的，有如下：

keyCode存在很多，但vue为我们提供了别名，分为以下两种：

• 普通键（enter、tab、delete、space、esc、up...）
• 系统修饰键（ctrl、alt、meta、shift...）

// 只有按键为keyCode的时候才触发 
<input type="text" @keyup.keyCode="shout()">

2.5 v-bind修饰符

v-bind修饰符主要是为属性进行操作，用来分别有如下：

• async
• prop
• camel

1. async

能对props进行一个双向绑定

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

以上这种方法相当于以下的简写

//父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
func(e){
 this.bar = e;
}
//子组件js
func2(){
  this.$emit('update:myMessage',params);
}

使用async需要注意以下两点：

• 使用sync的时候，子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致
• 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用
• 将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的

2. props

设置自定义标签属性，避免暴露数据，防止污染HTML结构

<input id="uid" title="title1" value="1" :index.prop="index">

3. camel

将命名变为驼峰命名法，如将 view-Box属性名转换为 viewBox

<svg :viewBox="viewBox"></svg>

三、应用场景

根据每一个修饰符的功能，我们可以得到以下修饰符的应用场景：

• .stop：阻止事件冒泡
• .native：绑定原生事件
• .once：事件只执行一次
• .self ：将事件绑定在自身身上，相当于阻止事件冒泡
• .prevent：阻止默认事件
• .caption：用于事件捕获
• .once：只触发一次
• .keyCode：监听特定键盘按下
• .right：右键

（学习视频分享：web前端开发、编程基础视频）

Atas ialah kandungan terperinci Apakah pengubah suai dalam Vue? Ringkasan pengubah suai biasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!