一、什么是双向数据绑定
数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。
二、vue里面的双向数据绑定
在vue里面使用v-model实现双向数据绑定,原理是检测用户输入,把输入的值获取到 ,然后同步更新给页面的元素
v-model的注意点:
1.没有简写形式
2.只有指定表单元素可以使用(input selete textarea )
3.修饰符 : .enter .13 .stop .prevent等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div class="text">{{info}}</div>
<input type="text" value="" v-model = "info">
</div>
</body>
</html>
<script src="./lib/vue.js"></script>
<script>
const app = new Vue({
el : "#app",
data : {
info : ""
}
})
</script>
三、v-model的实现原理
vue.js是利用ES5中的Object.defineProperty方法实现的双向数据绑定,Object.defineProperty他可以直接在一个对象上面定义一个新属性,或者修改一个对象的现有属性,并返回这个对象.
- 语法
Object.defineProperty(object, propertyname, descriptor) //参数(3个且必须)
- 参数
- object :要在其上添加或修改属性的对象。
- propertyname:要定义或修改的属性的名称。(存在修改,不存在,自定义,设置属性和描述配置)
- descriptor:将被定义或修改的属性描述符。(可以包含以下属性,默认情况下, writable, enumerable,configurable值为false)
- 方法访问器,可选键值()
- get() : 属性的 getter 函数,如果没有 getter,则为 undefined。当访问该属性时,会调用此函数。执行时不传入任何参数,但是会传入 this 对象(由于继承关系,这里的this并不一定是定义该属性的对象)。该函数的返回值会被用作属性的值。
- set() : 属性的 setter 函数,如果没有 setter,则为 undefined。当属性值被修改时,会调用此函数。该方法接受一个参数(也就是被赋予的新值),会传入赋值时的 this 对象。
四、原生js实现v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#spanText {
display: block;
}
#inputText {
margin-top: 30px;
}
</style>
</head>
<body>
<span id="spanText">{{text}}</span>
<input type="text" id="inputText"/>
<script>
var obj = {};
Object.defineProperty(obj,'text',{
set:function(val){
document.getElementById('spanText').innerHTML = val;
document.getElementById('inputText').value = val;
}
});
document.getElementById('inputText').onkeyup = function(e){
obj.text = e.target.value;
};
obj.text = "";
</script>
</body>
</html>