【Vue3知識講座4】双方向データバインディング、イベントバインディング、イベントモディファイアについて詳しく解説

記事ディレクトリ

1.双方向のデータバインディング

双方向データバインディングとは何ですか?

データが変更されると、それに応じてビューも変更されます。
ビューが変更されると、データも同期して変更されます。

デジタル管理プラットフォーム
 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
許可システム - モール
 個人ブログアドレス

双方向バインド手順

v-model ディレクティブは双方向のデータバインディングを実装します

双方向バインディングの使用シナリオ

v-model ディレクティブを使用して、入力選択テキストエリアコンポーネント (コンポーネント) での使用を制限します。

例:
ここに画像の説明を挿入します
修飾子

.lazy デフォルトでは、v-model は各入力イベントの後にデータを更新します (IME スペルフェーズの状態を除く)。代わりに、lazy 修飾子を追加して、各変更イベントの後にデータを更新できます。
.number ユーザー入力を自動的に数値に変換したい場合は、v-model の後に .number 修飾子を追加して入力を管理できます。
.trim デフォルトでユーザー入力の両端のスペースを自動的に削除したい場合は、v-model の後に .trim 修飾子を追加できます。

<div><input type="text" v-model.lazy="data"></div>
<div><input type="text" v-model.number.trim="numData" @change="checkType"></div>

2. イベントバインディングの詳細説明

2.1 Vue でのイベントバインディング命令

v-on ディレクティブの使用法
```
<button v-on:click="fn">v-on</button>
```
命令は @ (構文糖衣) と省略できます。
```
<button @click="fn2">@语法糖</button>
```

2.2イベント関数の呼び出し方法

関数名を直接バインドする
```
<button v-on:click="fn">v-on</button>
```

関数の呼び出し

<button v-on:click="fn()">v-on</button>

2.3イベント関数パラメータの受け渡し

通常のパラメータ: カンマで区切られた複数のパラメータ
```
<button v-on:click="fn(10,20,30)">v-on</button>
```
イベントオブジェクト:

ヒント 1: イベントが関数名に直接バインドされている場合、またはパラメーターを渡さずに関数が呼び出された場合、イベント関数はデフォルトでイベントオブジェクトを最初のパラメーターとして渡します。

ヒント 2: イベントバインディング関数の呼び出し時にパラメーターが渡される場合は、イベントオブジェクトを最後のパラメーターとして明示的に渡す必要があり、イベントオブジェクトの名前は $event である必要があります。

ヒント 3: 互換性を考慮せず、ウィンドウグローバルオブジェクトの存在を許可する場合、イベントオブジェクト window.event は関数内でグローバルオブジェクトを通じて直接取得できます。パラメータ渡しメソッドを使用することをお勧めします。
小さなケース：ショッピングカート簡易カウンター

実装アイデア：

データ内の初期数値 num を定義します
「補間式」または「v-textディレクティブ」を使用して、numを対応するラベルに設定します。
v-on ディレクティブを使用して、追加ボタンと減算ボタンのクリックイベントの追加と削減を定義します。
メソッド内で add メソッドとreduce メソッドのロジックを定義します。最小数は 1、最大数は 20 です。

3. イベント修飾子

3.1 Vue で一般的に使用されるイベント修飾子

.stop 泡立ちを停止します
.prevent はデフォルトのイベントをキャンセルします
.self イベントハンドラーは、event.target が要素自体である場合にのみ起動されます。
.captureイベントリスナーを追加するときにcaptureキャプチャモードを使用します。
.once イベントは最大 1 回トリガーされます

.passive 修飾子は通常、タッチイベントリスナーで使用され、モバイルデバイスのスクロールパフォーマンスを向上させるために使用できます。.prevent とは併用できません。

// 通过 .stop 修饰符阻止事件冒泡行为
<div class="out" @click="fn2">
    外部容器
    <div class="in" @click.stop="fn">内部容器</div>
</div>

//通过 .prevent 修饰符阻止 a 标签默认跳转功能
<a href="http://www.baidu.com" @click.prevent="cancel">跳转百度</a>

//链式修改
<a @click.stop.prevent="doThat"></a>

3.2キー修飾子

.enter => Enterキー
.tab => タブキー
.delete (「delete」キーと「backspace」キーをキャプチャ) => キーを削除
.esc => キャンセルキー
.space => スペースバー
.up => アップ
.down => ダウン
.left => 左

.right => 右

// .enter 回车键
<div class="login">
      <p><label>用户名：<input type="text" v-model="username" placeholder="请输入用户名"></label></p>
      <!-- 按键修饰符 .enter 触发回车键 -->
      <p><label>密码：<input type="password" v-model="password" placeholder="请输入密码" @keyup.enter="login"></label></p>
      <button @click="login">登录</button>
  </div>
  
// .delete 删除建
<input @keyup.delete='submit'/>

4. 属性バインディング

v-bind ディレクティブは、HTML 属性を応答的に更新するために使用されます。

構文 v-bind:prop = val

糖衣構文: prop = val

//属性绑定
<h2 v-bind:title="title">属性绑定演示</h2>
<p :class="ft20">语法糖</p>
<div v-bind="{id:‘container’,class:'wrapper'}"></div>

注: シンタックスシュガーは、開発効率を向上させるために特定の操作を簡略化したものです。

5. クラスとスタイルのバインディング

5.1 クラスバインディング

バインディングオブジェクトの構文

v-bind:class = { クラス名: クラス値, クラス名 1: クラス値 1,..., クラス名 n: クラス値 n }

クラス名に対応する値が true の場合はクラス名が表示され、それ以外の場合はクラス名が表示されません。

バインド配列構文

v-bind:class = [値1, 値2,…, 値n]

値 1 と値 2 はデータ内のデータに対応します

<script setup>
import {
      
       ref, reactive, computed } from 'vue'

const clsName = "active-link"
// 通过 ref 声明的数据，在 script 中，需要通过 .value 获取和修改值；在 template 模板中使用时，则不需要通过 .value 获取值，模板会自动解析数据
const count = ref(0)

// 注意：这里如果想要在count值修改后，实时响应数据变化，需要采用计算属性
const clsObj = computed(() => ({
      
      
    link: true,
    activeLink: count.value % 2 == 0
}))

let fm = ref(true)
</script>
<template>
    <div>
        <!-- 基于 v-bind 指令，增强绑定 class类 与 style样式，这两个属性值除了可以使用字符串外，还可以使用对象和数组的绑定 -->
        <a href="javascript:;" :class="clsName" class="link" style="text-decoration:none;"
            :style="'font-style:italic;'">超链接标签演示字符串类型的class和style绑定</a>
        <hr>
        <a href="javascript:;" :class="clsObj"
            :style="{ 'text-decoration': 'none', fontStyle: count % 2 == 0 ? 'italic' : '' }">采用绑定对象的方式实现class和style的赋值</a>
        <hr>
        <a href="javascript:;" :class="['link', 'active-link', { fm }]"
            :style="['letter-spacing:6px;', { 'text-decoration': 'none', fontStyle: count % 2 == 0 ? 'italic' : '' }]">采用数组绑定的方式实现class和style</a>
    </div>
    <button @click="count++">count++</button>
</template>

<style scoped>
hr {
      
      
    margin: 2vh 0;
}

.link {
      
      
    color: gray;
}

.active-link,
.activeLink {
      
      
    font-weight: bold;
}

.fm {
      
      
    font-family: "楷体";
}
</style>

5.2 スタイルバインディング

バインディングオブジェクトの構文

v-bind:style = { スタイル名: スタイル値, スタイル名 1: スタイル値 1,..., スタイル名 n: スタイル値 n }