當下很火爆的一個JavaScript MVVM庫:Vue.js淺析

當下很火的一個JavaScript MVVM庫:Vue.js

MVVM模式

MVVM是Model-View-ViewModel的簡寫

當下很火的一個JavaScript MVVM庫:Vue.js

  • ViewModel是Vue.js的核心,它是一個Vue實例。

  • Vue實例是作用於某一個HTML元素上的,這個元素可以是HTML的body元素,也可以是指定了id的某個元素。

  • 首先,我們將上圖中的DOM Listeners和Data Bindings看作兩個工具,它們是實現雙向綁定的關鍵。

  • 從View側看,ViewModel中的DOM Listeners工具會幫我們監測頁面上DOM元素的變化,如果有變化,則更改Model中的數據;

  • 從Model側看,當我們更新Model中的數據時,Data Bindings工具會幫我們更新頁面中的DOM元素。

PHP與Vue.js示例

當下很火的一個JavaScript MVVM庫:Vue.js

HTML代碼

PHP代碼如下:

<?php

echo "今日頭條作者:中國碼農";

?>

啓動瀏覽器

當下很火的一個JavaScript MVVM庫:Vue.js

雙向綁定示例

修改HTML代碼如圖

當下很火的一個JavaScript MVVM庫:Vue.js

加入紅框代碼

當下很火的一個JavaScript MVVM庫:Vue.js

發佈了164 篇原創文章 · 獲贊 240 · 訪問量 89萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章