国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

最近老是有兄弟問我，Vue雙向綁定的原理，以及簡單的原生js寫出來實現，我就來一個最簡單的雙向綁定，

zhangfaliang / 688人閱讀

摘要：廢話不多說直接看效果圖代碼很好理解，但是在看代碼之前需要知道雙向綁定的原理其實就是基于實現的雙向綁定官方傳送門這里我們用官方的話來說方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性，并返回這個對象。

廢話不多說直接看效果圖 

代碼很好理解，但是在看代碼之前需要知道Vue雙向綁定的原理其實就是基于
Object.defineProperty  實現的雙向綁定 官方傳送門

這里我們用官方的話來說
Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 并返回這個對象。
語法：
Object.defineProperty(obj, prop, descriptor)
參數
obj：
要在其上定義屬性的對象。
prop：
要定義或修改的屬性的名稱。
descriptor：
將被定義或修改的屬性描述符。

這里面要說的真的就太多了，我們就調雙向綁定需要用到的說一下就可以了，需要了解更多的朋友可以進官網官網看更加詳細的

這里我們就只是說一下 Object.defineProperty里面的核心的 get 和 set
get 
let data ={} ;
let index = 1;
Object.defineProperty(data,"age",{ //不明白參數什么含義的請往上看咯
    get:function(){
        return index;//獲取到了定義的index變量
    }
})
console.log(data); // {age:1}

怎么樣，是不是非常簡單，那么我們趁熱趕緊看一下set吧
set 
var data ={} ;
var index= 1;
Object.defineProperty(data,"age",{
    get:function(){
        return index;
    },
    set:function(newZhi){
        index=newZhi;
    }
})
console.log(data);// {age:1}
哈哈 是不是感覺和上面的get是一樣的呢？用法都是一樣的 那么樓主能來點不一樣的嘛？
回答：可以


----------


Object.defineProperty(data,"age",{
    get:function(){
        return index;
    },
    set:function(newZhi){
        index=newZhi+10;
    }
})
console.log(data); // {age:11}

既然Object.defineProperty里面的set和get看懂了就可以直接上手簡單的雙向綁定啦，這時候有的小伙伴可能就問了：什么？這么快？ 回答：就是這么快
直接貼代碼 每一行都是有注釋的 趕緊看看吧


        
        
我是測試數據的



怎么樣？是不是很簡單呢 十行代碼就完事了(當然只是簡單的雙向綁定，拓展性很強）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53176.html

相關文章

  • 最近老是有兄弟問我，Vue雙向綁定的原理，以及簡單的原生js寫出來實現，我就來一個最簡單的雙向綁定，

    摘要：廢話不多說直接看效果圖代碼很好理解，但是在看代碼之前需要知道雙向綁定的原理其實就是基于實現的雙向綁定官方傳送門這里我們用官方的話來說方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性，并返回這個對象。 廢話不多說直接看效果圖 showImg(https://segmentfault.com/img/bVbiYY5?w=282&h=500); 代碼很好理解，但是在看代碼之前...

    aristark 評論0 收藏0

  • 【Vue原理】VModel - 白話版

    摘要：執行的時候，會綁定上下文對象為組件實例于是中的就能取到組件實例本身，的代碼塊頂層作用域就綁定為了組件實例于是內部變量的訪問，就會首先訪問到組件實例上。其中的獲取，就會先從組件實例上獲取，相當于。 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本 【2.5.17】 如果你覺得...

    keke 評論0 收藏0

  • javascript知識點

    摘要：模塊化是隨著前端技術的發展，前端代碼爆炸式增長后，工程化所采取的必然措施。目前模塊化的思想分為和。特別指出，事件不等同于異步，回調也不等同于異步。將會討論安全的類型檢測惰性載入函數凍結對象定時器等話題。 Vue.js 前后端同構方案之準備篇——代碼優化 目前 Vue.js 的火爆不亞于當初的 React，本人對寫代碼有潔癖，代碼也是藝術。此篇是準備篇，工欲善其事，必先利其器。我們先在代...

    Karrdy 評論0 收藏0

  • 前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

    答案自己谷歌或百度找。 一、來源背景 面試題是來自微博@牛客網發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。 二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...

    Kerr1Gan 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<