响应式数据:只能由代码改变UI或者只能由UI改变代码
<div id="app">
<button @click="fn">change1button>
<h1 v-html="title">h1>
<p>{{msg}}p>
div>
<script>
var vm=new Vue({
el:"#app",
data:{
title:"hello",
msg:"666"
},
methods:{
fn(){
this.title=this.msg
}
}
})
script>
双向数据绑定:代码改变UI,UI也能改变代码
什么是双向数据绑定？
如果变量变了也会让页面刷新(DOM操作让页面改变)
如果用户操作DOM，改变了页面，反之也会让数据容器中的数据的值改变
双向数据绑定的实现: 2种方式
1.自己实现,vue可以自己实现(没必要) 微信开发可以自己实现(只能自己实现)利用input事件,用户交互的时候,获取用户输入的值,然后把值绑定到data容器中
<div id="app">
<h1 id="title">h1>
<p id="msg">p>
div>
<script>
function MyVue(obj){
let _vm={}
//劫持
let arr=Object.keys(obj.data)
for(let i=0;i<arr.length;i++){
Object.defineProperty(_vm,arr[i],{
set(v){
//劫持
obj.data[arr[i]]=v
//响应-刷新页面
let title=document.querySelector(obj.el+" #title")
let msg=document.querySelector(obj.el+" #msg")
title.innerHTML=_vm["title"]
msg.innerHTML=_vm["msg"]
},
get(){
return obj.data[arr[i]]
}
})
_vm[arr[i]]=obj.data[arr[i]]
}
return _vm
}
var vm=new MyVue({
el:"#app",
data:{
title:"mytitle66666",
msg:"mymsg666666",
obj:{age:10,name:"karen"},
arr:[10,230,5]
}
})
script>
2.系统指令:v-model
<div id='app'>
<input type="text" v-model="value">
<button @click="look">获取数据button>
<input type="text" :value="msg">
<button @click="look2">获取数据二button>
div>
<script>
new Vue({
el:'#app',
data: {
value:"123456",
msg:"12345678"
},
methods: {
look(){
console.log(this.value)
},
look2(){
console.log(this.msg)
}
}
})
script>