一、双向数据绑定简介
Vue最核心的功能时双向数据绑定和组件模块化。
双向绑定:
- 当视图(View)的值发生改变时会自动更新Model的值;
- 当model的值发生改变时会自动更新视图(View);
这里的视图View是指html中的标签元素,也就是DOM元素;这里的model就是指JavaScript中的对象,也就是用object{foo: bar}。
二、双向数据绑定JS实现
下面示例写了一个基本双向数据绑定的实现,打开控制台Console我们可以看到,当在input中输入值时也就是input的值发生改变时,input中的value值会自动赋值给user对象的username属性;当对象user的username属性的值发生改变时也会改变input标签的value值,即View也会跟着改变。
<html>
<head>
<title>双向数据绑定</title>
<script type="text/javascript">
// model
var user = {
username: ''};
// 当view(DOM元素)发生了改变也会更改model的值
function viewChangeModel() {
// 更改model的值
var newValue = document.getElementById("view").value;
user.username = newValue;
console.log(newValue);
}
// 改变model的值会被监听监听到,然后更改view(DOM元素)
function modelChangeView() {
user.username = 'mengday';
}
// 监听器:监听属性的改变
// 当model发生改变时也会更新view
Object.defineProperty(user, 'username', {
set:function(value){
//此处拦截了设置请求
console.log('newValue=' + value);
document