快捷導(dǎo)航

詳解vue中v-model的實(shí)現(xiàn)原理

更新時(shí)間：2023年12月28日 09:54:13 作者：生活在北極的企鵝

v-model可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,也是vue的最突出的優(yōu)勢(shì),其實(shí) v-model 實(shí)際上是一個(gè)語(yǔ)法糖,本文將給大家介紹一下vue中v-model的實(shí)現(xiàn)原理,文中有相關(guān)的代碼供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下

這是一個(gè)一直很經(jīng)典的面試題咱們廢話不多說(shuō)

v-model可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,也是vue的最突出的優(yōu)勢(shì)。其實(shí) v-model 實(shí)際上是一個(gè)語(yǔ)法糖。其中原理很簡(jiǎn)單，只要就是兩部分，一個(gè)是事件監(jiān)聽(tīng)，一個(gè)是屬性綁定。等下會(huì)用代碼來(lái)展示這兩部分。舉個(gè)v-model實(shí)現(xiàn)數(shù)據(jù)雙向綁定的例子：

 <body>
  <div id="app">
    <p>展示value1: {{ value1 }}</p>
    <input type="text" v-model="value1" />
  </div>
</body>
 
<script type="text/javascript" src="./js/vue.min.js"></script>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      value1: ""
    }
  })
</script>

從上代碼可以看出，當(dāng)我在輸入框輸入的值改變的時(shí)候，所展示的內(nèi)容也會(huì)改變；

<body>
  <div id="app">
    <p>展示value1: {{ value1 }}</p>
    <input type="text" v-model="value1" />
 
    <p>綁定的數(shù)據(jù)為：{{value2}}</p>
    <input type="text" :model="value2" @input="changeVal" />
  </div>
</body>
<script type="text/javascript" src="./js/vue.min.js"></script>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      value1: "",
      value2: ""
    },
    methods: {
      changeVal(e) {
        console.log(e.target.value, '我輸入的值在改變');
        this.value2 = e.target.value;
      }
    }
  })
</script>

由上代碼所述他的操作原理是先監(jiān)聽(tīng)數(shù)值改變然后在進(jìn)行賦值；

<div id="root">
  單向數(shù)據(jù)綁定【v-bind:value】: <input type="text" v-bind:value="name" /><br />
  雙向數(shù)據(jù)綁定【v-model:value】: <input type="text" v-model:value="name" /><br />
  單向數(shù)據(jù)綁定【:value】: <input type="text" :value="name" /><br />
  雙向數(shù)據(jù)綁定【v-model】: <input type="text" v-model="name" />
</div>
 
<script src="./js/vue.min.js"></script>
<script>
  Vue.config.productionTip = false
  new Vue({
    el: '#root',
    data: {
      name: 'JOJO'
    }
  })
</script>

到此這篇關(guān)于詳解vue中v-model的實(shí)現(xiàn)原理的文章就介紹到這了,更多相關(guān)vue v-model實(shí)現(xiàn)原理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)一個(gè)獲取按鍵展示快捷鍵效果的Input組件
這篇文章主要介紹了vue如何實(shí)現(xiàn)一個(gè)獲取按鍵展示快捷鍵效果的Input組件，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-01-01
Vue3實(shí)現(xiàn)地圖選點(diǎn)組件的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue3實(shí)現(xiàn)地圖選點(diǎn)組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-01-01
Vue如何配置根目錄@(引用路徑)
這篇文章主要介紹了Vue如何配置根目錄@(引用路徑)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
詳解如何實(shí)現(xiàn)Element樹(shù)形控件Tree在懶加載模式下的動(dòng)態(tài)更新
這篇文章主要介紹了詳解如何實(shí)現(xiàn)Element樹(shù)形控件Tree在懶加載模式下的動(dòng)態(tài)更新，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-04-04
如何使用el-table實(shí)現(xiàn)純前端導(dǎo)出(適用于el-table任意表格)
我們?nèi)粘Ｗ鲰?xiàng)目,特別是后臺(tái)管理系統(tǒng),常常需要導(dǎo)出excel文件,這篇文章主要給大家介紹了關(guān)于如何使用el-table實(shí)現(xiàn)純前端導(dǎo)出的相關(guān)資料,本文適用于el-table任意表格,需要的朋友可以參考下
2024-03-03
基于vue實(shí)現(xiàn)多功能樹(shù)形結(jié)構(gòu)組件的示例代碼
一個(gè)優(yōu)雅展示樹(shù)形結(jié)構(gòu)數(shù)據(jù)的 Vue 組件,遞歸渲染每個(gè)節(jié)點(diǎn)及其子節(jié)點(diǎn),支持自定義顏色、文本和布局,通過(guò)獨(dú)特的樣式巧妙處理不同層級(jí),為用戶打造豐富的視覺(jué)盛宴,文中通過(guò)代碼給大家介紹的非常詳細(xì),感興趣的同學(xué)可以自己動(dòng)手嘗試一下
2024-02-02
關(guān)于vue中使用three.js報(bào)錯(cuò)的解決方法
最近因?yàn)閠hree.js的項(xiàng)目要用Vue.js,下面這篇文章主要給大家介紹了關(guān)于vue中使用three.js報(bào)錯(cuò)的解決方法,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-03-03
Element Collapse 折疊面板的使用方法
這篇文章主要介紹了Element Collapse 折疊面板的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
使用vue-draggable-plus實(shí)現(xiàn)拖拽排序
最近遇到一個(gè)需求,在 Vue3 的一個(gè) H5 頁(yè)面當(dāng)中點(diǎn)擊拖拽圖標(biāo)上下拖動(dòng) tab 子項(xiàng),然后點(diǎn)擊保存可以保存最新的 tab 項(xiàng)順序,同事說(shuō)可以用 vue-draggable-plus 這個(gè)庫(kù)來(lái)實(shí)現(xiàn)拖拽,所以本文給大家介紹了如何使用vue-draggable-plus實(shí)現(xiàn)拖拽排序,需要的朋友可以參考下
2024-01-01
Vue使用openlayers實(shí)現(xiàn)繪制圓形和多邊形
這篇文章主要為大家詳細(xì)介紹了Vue如何使用openlayers實(shí)現(xiàn)繪制圓形和多邊形，文中的示例代碼講解詳細(xì)，感興趣的小伙伴快跟隨小編一起動(dòng)手嘗試一下
2022-06-06