vue(原理)_模板解析(一般指令的解析和事件指令的解析)


 

1、解析一般指令(以v-text為例)

 

其他普通指令(v-text, v-model, v-html, v-class)和上面的原理類似

 

 

2、解析事件指令(以v-on:click為例)

 

 

 

3、總結

事件指令解析步驟:

1) 從指令名中取出事件名
2) 根據指令的值(表達式)從methods 中得到對應的事件處理函數對象
3) 給當前元素節點綁定指定事件名和回調函數的dom 事件監聽
4) 指令解析完后, 移除此指令屬性

 

一般指令解析步驟:

1) 得到指令名和指令值(表達式) text/html/class msg/myClass
2) 從data 中根據表達式得到對應的值
3) 根據指令名確定需要操作元素節點的什么屬性
* v-text---textContent 屬性
* v-html---innerHTML 屬性
* v-class--className 屬性
4) 將得到的表達式的值設置到對應的屬性上
5) 移除元素的指令屬性

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM