如何用js實現Vue2.0中數據的雙向綁定功能

這篇文章主要介紹了如何用js實現Vue2.0中數據的雙向綁定功能的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇如何用js實現Vue2.0中數據的雙向綁定功能文章都會有所收獲，下面我們一起來看看吧。

創新互聯長期為數千家客戶提供的網站建設服務，團隊從業經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態環境。為凌源企業提供專業的網站設計制作、做網站，凌源網站改版等技術服務。擁有10多年豐富建站經驗和眾多成功案例,為您定制開發。

Object.defineProperty了解

語法：

Object.defineProperty(obj, prop, descriptor)

obj 要定義屬性的對象。
prop 要定義或修改的屬性的名稱
descriptor 要定義或修改的屬性描述符

obj和prop很好理解比如我們定義一個變量為

const o = {
    name:"xbhog"
}

其中obj指的就是o,prop指的就是o.name 下面我們主要看看descriptor

descriptor 目標對象屬性的一些特征（是一個對象）
   descriptor 下有6個參數
參數1：
     value:屬性值
參數2：
　　writable：對象屬性值是否可以被修改 true允許 false不允許
參數3：
　　configurable:對象屬性是否可以被刪除 true允許 false不允許
參數4：
　　enumerable:對象屬性是否可被枚舉
參數5：
     get():是個函數，當訪問該屬性的時候，函數自動調用，函數返回值就是該屬性的值
參數6：
     set():是個函數，當修改該屬性的時候，函數自動調用，函數有且只有一個參數，賦值的新值

注意：描述符里的value屬性 writable屬性與 get屬性 set屬性是互斥的關系，只能存在一個

了解了前置知識，我們來實現Vue中的v-model的雙向綁定

先看實現代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>通過js實現數據的雙向綁定</title>
</head>
<body>
    
<input type="text"/><br>
<h1>你好：<span>更新數據</span></h1>


<!-- 通過js實現數據的雙向綁定 -->
<script>
 // 方法返回文檔中與指定選擇器或選擇器組匹配的第一個 HTMLElement對象
    var ipt =document.querySelector("input");
    var p = document.querySelector("span");
 
 
    var data = {name:""};
 /* 
     oninput 事件在用戶輸入時觸發。
     該事件在 <input> 或 <textarea> 元素的值發生改變時觸發。
  */
    ipt.oninput = function(){
 // 將ipt.value中的值傳給data.name的value
        data.name = ipt.value;
    }
    //劫持ipt.value
    Object.defineProperty(data,"name",{
    // 數據訂閱
    get(){
        return ipt.value;  //當訪問的時候會調用get方法
    },
    // 數據劫持
 //name:value
    set(value) {
        p.innerHTML = value;
        ipt.value = value;
    }   
})
</script>
</body>
</html>

首先我們通過document.querySelector獲取input以及span標簽的Html對象，在定義一個data對象，屬性name先為空。

使用事件監聽oninput來監聽用戶輸入(該事件在 <input> 或 <textarea> 元素的值發生改變時觸發)。

將ipt.value中的值傳給data.name的value；

data.name = ipt.value;

利用Object.defineProperty劫持用戶輸入的數據。

get 屬性：是個函數，當訪問該屬性的時候，函數自動調用，函數返回值就是該屬性的值
set 屬性：是個函數，當修改該屬性的時候，函數自動調用，函數有且只有一個參數，賦值的新值

Object.defineProperty(data,"name",{
    // 數據訂閱
    get(){
       return ipt.value;  //當訪問data.name時候會調用get方法，調用ipt.value獲取當前value的值
    },
    // 數據劫持
    set(value) {   //設置數據的時候會自動調用set方法
        p.innerHTML = value;
        ipt.value = value;
    }

看效果比較明顯：

set方法：

如何用js實現Vue2.0中數據的雙向綁定功能