当下很火爆的一个JavaScript MVVM库:Vue.js浅析

MVVM模式

MVVM是Model-View-ViewModel的简写

• 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示例

HTML代码

PHP代码如下：

<?php

echo "今日头条作者：中国码农";

?>

启动浏览器

双向绑定示例

修改HTML代码如图

加入红框代码