Object属性分为两个类型:数据属性、访问器属性,每类属性又有其不同的特显,双向绑定的原理是根据其访问器属性的特性来实现的。
数据属性有四个描述其行为的特性
1、Configurable:是否可以通过delete删除,能否修改他的属性特性,能否修改为访问器属性。默认值true
2、Enumerable:是否可以通过for in循环返回改属性
3、Writable:是否能修改属性值
4、Value:属性值
要就修改数据属性的默认特性,需要用Object.defineProperty()方法
var person = {}
Object.defineProperty(person,"name",{
writable:false;
value:'Nicholas';
})
1、Configurable:是否可以删除
2、Enumerable:是否能够循环返回属性
3、Get:在读取属性的时候调用的函数。默认值是undefind
4、Set:在写入属性时调用的函数。
访问器属性不能直接定义,必须使用Object.defineProperty()来定义。
var book = {
_year:2014,
edition:1
};
Object.defineProperty(book,"year",{
get:function(){
return this._year
},
set:function(newValue){
if(newValue>2004){
this._year = newValue;
this.editon +=newValue -2004;
}
}
});
book.year = 2005;
alert(book.edition); //2
var book = {};
Object.defineProperties(book,{
//数据属性
_year:{
writable:true,
value:2004
},
edition:{
writable:true,
value:1
},
//访问器属性
year:{
get:()=>{
return this._year;
},
set:(newValue)=>{
if(newValue>2004){
this._year = newValue;
this.edition += newValue -2004;
}
}
}
})
var descriptor = Object.getOwnPropertyDescriptor(book,"year");
alert(descriptor.value); //undefind 访问属性没有value值
alert(descriptot.get); //funtion
<div id="app">
<input type="text" id="txt">
<p id="show-txt"></p>
</div>
<script>
var obj = {}
Object.defineProperties(obj,{
_txt:{
writable:true,
value:'测试'
},
txt:{
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show-txt').innerhtml = newValue
}
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
});
console.log(bj.txt) //或者txt值
</script>
有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。先来一个组件,不用vue-model,正常父子通信;点击回应后,父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了,实现通信。
双向数据绑定: 所谓双向数据绑定是指View(视图)与Model(模型)之间的绑定:View<=>Model。View的改变: 通过界面交互使视图发生改变,如Input框的输入,Select元素的选择,scrollBar滚动,浏览器窗口大小改变等等。
虽然是基于 react 的框架,但是在 nautil 中可以使用双向数据绑定,这得益于基于观察者模式的开发思路。在 react 中使用双向绑定并非没有需求,react 严格的单向数据流,严重影响了开发者的发挥空间,特别是在表单组件的使用中
首先我们先说一下在自定义组件中使用v-model的必要条件,在自定义的组件中要有input(这里我们先不讨论单选复选框),在自定义组件的模板对象中要有props属性,且里面要含有一个value
之前公司招人,面试了一些的前端同学,因为公司使用的前端技术是 Vue ,所以免不了问到其响应式原理和 Vue 的双向数据绑定。但是这边面试到的80%的同学会把两者搞混,通常我要是先问响应式原理再问双向数据绑定原理,来面试的同学大都会认为是一回事
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!