日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
怎么深入了解vue2中的v-model以及讓組件支持該語(yǔ)法

怎么深入了解vue2中的 v-model以及讓組件支持該語(yǔ)法，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

十載的日照網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷型網(wǎng)站的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整日照建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“日照網(wǎng)站設(shè)計(jì)”,“日照網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

一、v-model 的本質(zhì)是語(yǔ)法糖。

『v-model 本質(zhì)上不過(guò)是語(yǔ)法糖。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對(duì)一些極端場(chǎng)景進(jìn)行一些特殊處理?！?-- 官方文檔?！鞠嚓P(guān)推薦：vue.js教程】

什么是語(yǔ)法糖？

語(yǔ)法糖，簡(jiǎn)單來(lái)說(shuō)就是『便捷寫法』。

在大部分情況下， v-model="foo" 等價(jià)于 :value="foo" 加上 @input="foo = $event"；

沒錯(cuò)，在大部分情況下如此。

但也有例外：

  • vue2 給組件提供了 model 屬性，可以讓用戶自定義傳值的prop名和更新值的事件名。這個(gè)暫且略過(guò)，第四節(jié)會(huì)細(xì)說(shuō)。

  • 對(duì)于原生 html 原生元素，vue 干了大量『臟活兒』，目的是為了能讓我們忽視 html 在api上的差異性。以下元素的左右兩種寫法是等價(jià)的：

  • textarea 元素：

怎么深入了解vue2中的 v-model以及讓組件支持該語(yǔ)法

  • select 下拉框：

怎么深入了解vue2中的 v-model以及讓組件支持該語(yǔ)法

  • input type='radio' 單選框：

怎么深入了解vue2中的 v-model以及讓組件支持該語(yǔ)法

  • input type='checkbox' 多選框：

怎么深入了解vue2中的 v-model以及讓組件支持該語(yǔ)法

在編程思想上，這種幫助使用者『隱藏細(xì)節(jié)』的方式叫封裝。

二、v-model 僅僅是語(yǔ)法糖嗎？(冷知識(shí))

v-model 不僅僅是語(yǔ)法糖，它還有副作用。

副作用如下：如果 v-model 綁定的是響應(yīng)式對(duì)象上某個(gè)不存在的屬性，那么 vue 會(huì)悄悄地增加這個(gè)屬性，并讓它響應(yīng)式。

舉個(gè)例子，看下面的代碼：

// template中：

// script中：
export default {
  data() {
    return {
      user: {
        name: '公眾號(hào): 前端要摸魚',
      }
    }
  }
}

響應(yīng)式數(shù)據(jù)中沒有定義 user.tel 屬性，但是 template 里卻用 v-model 綁定了 user.tel，猜一猜當(dāng)你輸入時(shí)會(huì)發(fā)生什么？

看效果：

怎么深入了解vue2中的 v-model以及讓組件支持該語(yǔ)法

揭曉答案吧：user 上會(huì)新增 tel 屬性，并且 tel 這個(gè)屬性還是響應(yīng)式的。

這就是『副作用』帶來(lái)的效果，你學(xué)會(huì)了嗎？

三、 v-model 是雙向綁定還是單向數(shù)據(jù)流？

2.1 v-model 是雙向綁定嗎？

是，官方說(shuō)是。

『你可以用 v-model 指令在表單 、