如何利用js實(shí)現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能

發(fā)布時(shí)間：2021-07-19 16:54:12 來源：億速云閱讀：256 作者：chen 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“如何利用js實(shí)現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何利用js實(shí)現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能”吧!

Object.defineProperty了解

語法：

Object.defineProperty(obj, prop, descriptor)

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

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

const o = {
    name:'xbhog'
}

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

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

注意：描述符里的value屬性 writable屬性與 get屬性 set屬性是互斥的關(guān)系，只能存在一個(gè)

了解了前置知識，我們來實(shí)現(xiàn)Vue中的v-model的雙向綁定

先看實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通過js實(shí)現(xiàn)數(shù)據(jù)的雙向綁定</title>
</head>
<body>
    
<input type="text"/><br>
<h2>你好：<span>更新數(shù)據(jù)</span></h2>


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

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

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

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

data.name = ipt.value;

利用Object.defineProperty劫持用戶輸入的數(shù)據(jù)。

get 屬性：是個(gè)函數(shù)，當(dāng)訪問該屬性的時(shí)候，函數(shù)自動(dòng)調(diào)用，函數(shù)返回值就是該屬性的值
set 屬性：是個(gè)函數(shù)，當(dāng)修改該屬性的時(shí)候，函數(shù)自動(dòng)調(diào)用，函數(shù)有且只有一個(gè)參數(shù)，賦值的新值

Object.defineProperty(data,"name",{
    // 數(shù)據(jù)訂閱
    get(){
       return ipt.value;  //當(dāng)訪問data.name時(shí)候會(huì)調(diào)用get方法，調(diào)用ipt.value獲取當(dāng)前value的值
    },
    // 數(shù)據(jù)劫持
    set(value) {   //設(shè)置數(shù)據(jù)的時(shí)候會(huì)自動(dòng)調(diào)用set方法
        p.innerHTML = value;
        ipt.value = value;
    }

看效果比較明顯：

set方法：

如何利用js實(shí)現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能

get方法：

如何利用js實(shí)現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能

最后實(shí)現(xiàn)效果：

如何利用js實(shí)現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能

參考資料：

https://blog.csdn.net/Doulvme/article/details/107978012
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
https://www.jianshu.com/p/6f589af16ad4
//kemok4.com/article/217657.htm (推薦)

到此，相信大家對“如何利用js實(shí)現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

如何利用js實(shí)現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能

Object.defineProperty了解

了解了前置知識，我們來實(shí)現(xiàn)Vue中的v-model的雙向綁定

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

了解了前置知識，我們來實(shí)現(xiàn)Vue中的v-model的雙向綁定