一、數(shù)據(jù)雙向綁定
什么是數(shù)據(jù)雙向綁定？
- 當數(shù)據(jù)發(fā)生變化的時候，視圖會相應(yīng)的發(fā)生變化
- 當視圖發(fā)生改變的時候，數(shù)據(jù)也會相應(yīng)的同步變化
數(shù)字化管理平臺
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
權(quán)限系統(tǒng)-商城
個人博客地址
雙向綁定的指令
? v-model 指令實現(xiàn)數(shù)據(jù)雙向綁定
雙向綁定使用場景
? 利用 v-model 指令，限制在 input select textarea components (組件) 中使用
示例：
修飾符
- .lazy 默認情況下，v-model 會在每次 input 事件后更新數(shù)據(jù) (IME 拼字階段的狀態(tài)例外)。你可以添加 lazy 修飾符來改為在每次 change 事件后更新數(shù)據(jù)
- .number 如果你想讓用戶輸入自動轉(zhuǎn)換為數(shù)字，你可以在 v-model 后添加 .number 修飾符來管理輸入
- .trim 如果你想要默認自動去除用戶輸入內(nèi)容中兩端的空格，你可以在 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.1 Vue中的事件綁定指令
-
v-on 指令用法
<button v-on:click="fn">v-on</button> -
指令可以簡寫為 @ （語法糖）
<button @click="fn2">@語法糖</button>
2.2 事件函數(shù)的調(diào)用方式
-
直接綁定函數(shù)名
<button v-on:click="fn">v-on</button> -
調(diào)用函數(shù)
<button v-on:click="fn()">v-on</button>
2.3 事件函數(shù)參數(shù)傳遞
-
普通參數(shù)：多個參數(shù)使用逗號隔開
<button v-on:click="fn(10,20,30)">v-on</button> -
事件對象：
tip1：如果事件直接綁定函數(shù)名稱 或者 調(diào)用函數(shù)并未傳遞任何參數(shù)，那么事件函數(shù)會默認傳遞事件對象作為第一個參數(shù)；
tip2：如果事件綁定函數(shù)調(diào)用時傳遞了參數(shù)，那么事件對象必須作為最后一個參數(shù)顯式傳遞，并且事件對象的名稱必須是 $event
tip3：在不考慮兼容性問題，且允許 window 全局對象存在的情況下，可以在函數(shù)內(nèi)直接通過全局對象獲取事件對象 window.event 也可，建議使用傳參的方式。
-
小案例：購物車簡易計數(shù)器
? 實現(xiàn)思路：
- data 中定義初始的數(shù)量 num
- 將 num 使用 “插值表達式” 或 “v-text指令” 設(shè)置給對應(yīng)的標簽
- 使用 v-on 指令給加減按鈕定義點擊事件 add 和 reduce
- 在 methods 中定義 add 和 reduce 方法的邏輯：數(shù)量最少為 1，最大為 20
三、事件修飾符
3.1 Vue中常用的事件修飾符
-
.stop 阻止冒泡
-
.prevent 取消默認事件
-
.self 僅當 event.target 是元素本身時才會觸發(fā)事件處理器
-
.capture 添加事件監(jiān)聽器時，使用
capture捕獲模式 -
.once 事件最多被觸發(fā)一次
-
.passive 修飾符一般用于觸摸事件的監(jiān)聽器，可以用來改善移動端設(shè)備的滾屏性能。不能和 .prevent 一起使用。
// 通過 .stop 修飾符阻止事件冒泡行為 <div class="out" @click="fn2"> 外部容器 <div class="in" @click.stop="fn">內(nèi)部容器</div> </div> //通過 .prevent 修飾符阻止 a 標簽?zāi)J跳轉(zhuǎn)功能 <a @click.prevent="cancel">跳轉(zhuǎn)百度</a> //鏈式修改 <a @click.stop.prevent="doThat"></a>
3.2 按鍵修飾符
-
.enter => enter鍵
-
.tab => tab鍵
-
.delete (捕獲“刪除”和“退格”按鍵) => 刪除鍵
-
.esc => 取消鍵
-
.space => 空格鍵
-
.up => 上
-
.down => 下
-
.left => 左
-
.right => 右
// .enter 回車鍵 <div class="login"> <p><label>用戶名：<input type="text" v-model="username" placeholder="請輸入用戶名"></label></p> <!-- 按鍵修飾符 .enter 觸發(fā)回車鍵 --> <p><label>密碼：<input type="password" v-model="password" placeholder="請輸入密碼" @keyup.enter="login"></label></p> <button @click="login">登錄</button> </div> // .delete 刪除建 <input @keyup.delete='submit'/>
四、屬性綁定
v-bind 指令被用來響應(yīng)地更新 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>
注：語法糖是對某個操作的簡化，來提高開發(fā)效率
五、類與樣式的綁定
5.1 class 類的綁定
-
綁定對象語法
v-bind:class = { 類名:類值，類名1:類值1，…，類名n:類值n }
如果類名對應(yīng)的值為true，則顯示這個類名；否則不顯示這個類名
-
綁定數(shù)組語法
v-bind:class = [ 值1，值2，…，值n ]
值1、值2對應(yīng)data中的數(shù)據(jù)
<script setup> import { ref, reactive, computed } from 'vue' const clsName = "active-link" // 通過 ref 聲明的數(shù)據(jù)，在 script 中，需要通過 .value 獲取和修改值；在 template 模板中使用時，則不需要通過 .value 獲取值，模板會自動解析數(shù)據(jù) const count = ref(0) // 注意：這里如果想要在count值修改后，實時響應(yīng)數(shù)據(jù)變化，需要采用計算屬性 const clsObj = computed(() => ({ link: true, activeLink: count.value % 2 == 0 })) let fm = ref(true) </script> <template> <div> <!-- 基于 v-bind 指令，增強綁定 class類 與 style樣式，這兩個屬性值除了可以使用字符串外，還可以使用對象和數(shù)組的綁定 --> <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' : '' }">采用綁定對象的方式實現(xiàn)class和style的賦值</a> <hr> <a href="javascript:;" :class="['link', 'active-link', { fm }]" :style="['letter-spacing:6px;', { 'text-decoration': 'none', fontStyle: count % 2 == 0 ? 'italic' : '' }]">采用數(shù)組綁定的方式實現(xiàn)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 style 樣式綁定
-
綁定對象語法
v-bind:style = { 樣式名:樣式值，樣式名1:樣式值1，…，樣式名n:樣式值n }
-
綁定數(shù)組語法
v-bind:style = [值1，值2，…，值n]文章來源：http://www.zghlxwxcb.cn/news/detail-700458.html
值1，值2，…，值n 需要在 data 中使用對象定義樣式和樣式值文章來源地址http://www.zghlxwxcb.cn/news/detail-700458.html
<script setup> import { ref, reactive, computed } from 'vue' const clsName = "active-link" // 通過 ref 聲明的數(shù)據(jù)，在 script 中，需要通過 .value 獲取和修改值；在 template 模板中使用時，則不需要通過 .value 獲取值，模板會自動解析數(shù)據(jù) const count = ref(0) // 注意：這里如果想要在count值修改后，實時響應(yīng)數(shù)據(jù)變化，需要采用計算屬性 const clsObj = computed(() => ({ link: true, activeLink: count.value % 2 == 0 })) let fm = ref(true) </script> <template> <div> <!-- 基于 v-bind 指令，增強綁定 class類 與 style樣式，這兩個屬性值除了可以使用字符串外，還可以使用對象和數(shù)組的綁定 --> <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' : '' }">采用綁定對象的方式實現(xiàn)class和style的賦值</a> <hr> <a href="javascript:;" :class="['link', 'active-link', { fm }]" :style="['letter-spacing:6px;', { 'text-decoration': 'none', fontStyle: count % 2 == 0 ? 'italic' : '' }]">采用數(shù)組綁定的方式實現(xiàn)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>
到了這里，關(guān)于【Vue3 知識第四講】數(shù)據(jù)雙向綁定、事件綁定、事件修飾符詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
