//這個是單向數據流，改變這個input的value值并不能是data中的text屬性發(fā)生改變。
<input type="text" :value="text">
data:{
  return {
    text:'文本輸入框'
  }
}
//這個是雙向數據綁定，無論是修改model還是修改view都能引起另一方的改變。
<input type="text" v-model="text">
data:{
  return {
    text:'文本輸入框'
  }
}

//首先通過input事件監(jiān)聽視圖的改變
<input type="text" :value="inputTitle" @input="onInput">
data:{
  return {
    text:'文本輸入框'
  }
},
methods:{
  //視圖發(fā)生改變的時候，將視圖的值賦予模型的值，實現數據雙向綁定
  onInput(event) {
    this.text=event.target.value;
  }
}

//定義一個對象并監(jiān)聽他的text屬性的存值操作與取值操作
let data={};
Object.defineProperty(data,'text',{
  get() {
    console.log('取值操作');
  },
  set(newVal) {
    console.log('存值操作');
  }
});
console.log('data');
===>輸出:
===>{}
===>取值操作
data.text='文本輸入框';
===>輸出
===>存值操作

//html
<div id="app">
  <input type="text" id="input">
</div>
//js
let input = document.querySelector('#input');
//定義model
let data={
  text:''
};
//監(jiān)聽model中text的變化，首先實現數據單向流
Object.defineProperty(data,text,{
  get() {
  
  }，
  //text發(fā)生改變的時候，修改input元素的value值 
  set(newVal) {
    input.value=newVal;
  }
});
//監(jiān)聽input元素的改變并修改model的值，實現數據雙向綁定
input.addEventLisener('input',event=> {
  data.text=event.target.value;
});