java 通過id擷取html代碼_夢回2013，看尤大vue的第一行代碼，僅用30行代碼實作vue(超簡潔，适合初學者)...

非非非标題黨，幹貨預警！！！

介紹

大家好，我是清池交友app開發日記，記錄清池交友app開發中學習過程和踩坑日記，僞全棧

技術棧：前端js，vue，uniapp，後端java

尤大鎮貼

先奉上2013年尤大寫的vue的第一行代碼來自：

github源碼位址鎮貼： vue 官方倉庫 0.1分支explorations/getset.html檔案

引讀：

• 本篇文章，用30行代碼實作0.1版本vue，是參照尤大2013年，在git上傳的vue的第一行代碼(vue的0.1)版本代碼思路實作的，尤大僅用40行代碼就實作了0.1版本的vue。
• 為了更友善學習和交流，我們基于尤大的代碼省略了一些内容，提取核心功能代碼，調整了代碼順序，修改了部分變量命名，增加了注釋，僅剩30行代碼，更加簡潔，直覺的向大家展示vue的核心功能實作邏輯。
• 本人也是個小菜鳥，整理本篇文章用了一天的時間，不足之處歡迎大家指正批評，文中代碼的具體實作細節存在不嚴謹的地方，請大家忽略，本文僅用來交流vue的實作思想，并未深究細節。

正文：

實作邏輯簡述

本文30行代碼實作vue，github倉庫位址

本篇文章中代碼僅實作了vue的核心功能資料綁定，未實作其他功能。

文中html可直接打開在浏覽器中運作，檢視效果

我們先用文字來簡單描述下核心代碼的實作邏輯

1. 擷取vue根結點的dom，替換dom中的{{}}模闆文法，并根據模闆{{msg}}中使用data中的屬性名稱(msg)為其打上标志，友善之後尋找哪些dom使用了模闆文法
2. 記錄模闆文法中使用了data中的哪些屬性，友善在這些值變化時更新dom
3. 周遊這些屬性，并根屬性名稱找到對應的dom，移除标志(标志用來尋找dom，此時已經獲得了dom，是以移除标志)
4. 攔截屬性的set、get方法，在set屬性時，更新dom的textContent實作資料變化更新視圖的功能

代碼實作

接下來看代碼如下：

//執行個體化vue
           

html如下：

<
           

結尾總結：

看完本篇文章，相信大家對vue的基本原理和實作方式都能有一個清晰的認識了吧，趕緊動手去撸一個mini-vue吧，這已經是面試中必不可少的試題了

文中不足之處歡迎大家指正批評，有需要交流的問題也歡迎大家踴躍留言。

清池app開發日記是記錄清池app開發中學習過程和踩坑日記，清池app目前有20w+注冊使用者，3000日活，主要使用者年齡在16-23之間

如果您對一款社交軟體從0-0.1的成長過程中遇到的趣事和技術問題感興趣，歡迎關注我們的公衆号，我們一同成長

我們的技術棧，僞全棧，前端js，vue，uniapp，後端java

清池app官網：https://www.qingchi1.com

關于和聯系我們：https://www.qingchi1.com/about

公衆号：qingchiapp，(關注公衆号擷取清池app項目的開源代碼，星空話緣，原諒這個名字是之前的，以後會改成清池app開發日記)

交友群+v：qingchizh，群内男女比例1：5-10，女生免費，男生收費