Vue2：数据绑定(响应式数据、双向数据绑定)
1.什么是响应式数据
如果内存中的数据变化了页面UI也会动态跟着刷新这种数据就是 响应式数据
响应式数据:
只能由代码改变UI或者只能由UI改变代码
// this.arr[2]="hello"//没有劫持数组的 下标(不能刷新页面) // this.arr.splice(2,1, "hello")//劫持了数组的方法(可以刷新页面) // Vue. set(this.arr,2,"hello" )//vue帮我们刷新页面 this . $set( this. arr,2,"hello")//vue帮我们刷新页面
响应式数据设计原理:
vue2.0采用数据劫持结合发布者-订阅者模式的方式，通过object . defineProperty ()来劫持各个属性的setter, getter, 在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给
Vue实例来作为它的data 选项时，Vue将遍历它的属性，用object . def ineProperty 将它们转为getter/setter。用户看不到getter/setter， 但是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化。
vue3.0 --使用es6 proxy 代理了data对象
双向数据绑定:
代码改变UI,UI也能改变代码
1、如果数据容器中的数据变了也会让页面刷新（DOM操作让页面改变）
2、如果用户操作DOM，改变了页面，反之也会让数据容器中的数据的值改变
双向数据绑定的实现: 2种方式
1.自己实现：
vue可以自己实现(没必要)
微信开发可以自己实现(只能自己实现) 利用input事件,用户交互的时候,获取用户输入的值,然后把值绑定到data容器中
2.系统指令:v-model
//vue实现数据双向绑定主要是： //采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter， //在数据变动时发布消息给订阅者，触发相应监听回调。 //当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。 //用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。 //利用 Object.defineProperty 自己实现双向数据绑定 <body> <div id="app"> <input type="text" id="txt"> <p id="show"></p> </div> </body> <script type="text/javascript"> var obj = {} Object.defineProperty(obj, 'txt', { get: function () { return obj }, set: function (newValue) { document.getElementById('txt').value = newValue document.getElementById('show').innerHTML = newValue } }) document.addEventListener('keyup', function (e) { obj.txt = e.target.value }) </script>
实例1：使用@input和 :value
<div id="box">
<button v-on:click="fn()">{{msg}}</button>
<button @click="change()">{{get}}</button>
<!-- <input type="text"> -->
<input type="text" :value="msg" @input="inp">
</div>
<!-- 双向数据绑定 -->
<script type="text/javascript">
new Vue({
el:"#box",
data:{
msg:"",
get:"获取",
},
methods: {
fn(){
this.msg="改变了"
},
change(){
if(this.msg == 33){
alert("输入正确")
}else{
alert("错误，输入33")
}
},
inp(el){
this.msg=el.target.value
}
},
})
</script>
实例2：v-model代替@input和 :value
<div id="box">
<button @click="change()">{{get}}</button>
<input type="text" v-model="msg">
</div>
<script type="text/javascript">
new Vue({
el: "#box",
data: {
msg: "",
get: "获取",
},
methods: {
fn() {
this.msg = "改变了"
},
change() {
console.log(this.msg);
},
},
})
</script>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！