快捷導(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è)語法糖,本文將給大家介紹一下vue中v-model的實(shí)現(xiàn)原理,文中有相關(guān)的代碼供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下

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

v-model可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,也是vue的最突出的優(yōu)勢(shì)。其實(shí) v-model 實(shí)際上是一個(gè)語法糖。其中原理很簡(jiǎn)單，只要就是兩部分，一個(gè)是事件監(jiān)聽，一個(gè)是屬性綁定。等下會(huì)用代碼來展示這兩部分。舉個(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)聽數(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+ElementUI容器無法鋪滿網(wǎng)頁的問題解決
這篇文章主要介紹了Vue+ElementUI容器無法鋪滿網(wǎng)頁的問題解決,文章通過圖文結(jié)合的方式給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-08-08
Element Timeline時(shí)間線的實(shí)現(xiàn)
本文主要介紹了Element Timeline時(shí)間線的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
vue返回上一頁(后退)的幾種方法與區(qū)別說明
這篇文章主要介紹了vue返回上一頁(后退)的幾種方法與區(qū)別說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue?ui的安裝步驟以及使用詳解
最近公司開發(fā)一個(gè)項(xiàng)目,采用的前后端分離的方式,前端采用vue,但是再項(xiàng)目開發(fā)過程中遇到一個(gè)比較麻煩的問題,下面這篇文章主要給大家介紹了關(guān)于vue?ui的安裝步驟以及使用的相關(guān)資料,需要的朋友可以參考下
2022-08-08
Vue Router添加全局$router屬性的示例詳解
這篇文章主要介紹了Vue-Router-添加全局$router屬性,在 Vue 中有一個(gè) mixin 方法，這個(gè)方法會(huì)在每個(gè)組件創(chuàng)建之前被調(diào)用，我們可以在這個(gè)方法中將 VueRouter 實(shí)例掛載到 Vue 實(shí)例上，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-11-11
Vue動(dòng)態(tài)加載圖片在跨域時(shí)無法顯示的問題及解決方法
這篇文章主要介紹了解決VUE動(dòng)態(tài)加載圖片在跨域時(shí)無法顯示的問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-03-03
elementui實(shí)現(xiàn)表格自定義排序的示例代碼
本文主要介紹了elementui實(shí)現(xiàn)表格自定義排序的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
vue3+vite配置多頁面的示例代碼
通過配置多頁面應(yīng)用，從而將給子模塊依賴分隔開各自加載，可以減少初始資源的請(qǐng)求，加快頁面的訪問速度，這篇文章主要介紹了vue3+vite配置多頁面的詳細(xì)過程,需要的朋友可以參考下
2023-06-06
Vue 針對(duì)瀏覽器參數(shù)過長(zhǎng)實(shí)現(xiàn)瀏覽器參數(shù)加密解密的操作方法
文章介紹了如何在Vue項(xiàng)目中使用crypto-js庫對(duì)瀏覽器參數(shù)進(jìn)行加密和解密,以解決參數(shù)過長(zhǎng)的問題,在router/index.js中添加了相關(guān)代碼,并在utils工具類中添加了encryption.js和query.js源碼,感興趣的朋友一起看看吧
2024-12-12
記一次vue跨域的解決
這篇文章主要介紹了vue跨域的解決方法，幫助大家解決前端跨域問題，感興趣的朋友可以參考下
2020-10-10