vue 将字符串最后一个字符给替换_一步一步的实现Vue(一)
生活随笔
收集整理的這篇文章主要介紹了
vue 将字符串最后一个字符给替换_一步一步的实现Vue(一)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這次想要自己學著實現簡單版的vue,從而對vue有更加深入的理解。
推薦一個好用的vscode插件,可以本地快速啟動服務器,并運行html文件,且擁有熱加載功能:"live server"。
01、看看真正的Vue
首先,我們都知道,當使用 new Vue 的時候,就可以將 html 中的模板{{}}用 data 里面的數據替換,如下:
此時,vue 會找到 el 這個節點,(如果有 template 屬性,則會將此字符串模板編譯為 render 函數),然后生成抽象語法樹(AST),然后用data替換對應的數據,創建虛擬DOM,生成真正的DOM,并最終掛載到文檔中。
既然我們要一步一步來,那么先只看最基本的:拿到節點,進行編譯,將節點與數據結合,并替換節點。
02、數據與模板結合
這里我們分為四個步驟來實現。
1. 獲取節點
const2. 聲明數據
const3. 將數據與模板結合,這里的模板就是克隆的節點。需要深度遍歷這顆樹,方法有遞歸或者用棧保存遍歷的節點,這里采用遞歸實現。
function4. 替換節點
rootElement03、效果
加載script前:
加載script后:
詳細的代碼請看我的
歡迎關注我的公眾號查看更多系列文章~
總結
以上是生活随笔為你收集整理的vue 将字符串最后一个字符给替换_一步一步的实现Vue(一)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: pycharm没有python inte
- 下一篇: python转go_如何看待将Pytho