当下很火爆的一个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万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章