代码展示

不使用v-mode实现双向绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/vue.js"></script>
</head>
<body><!--VUE 3步1. 做界面1.1 唯一父元素包裹1.2 找可能发生改变的位置本例中: 只有文本框input的内容(value属性中)由用户主动输入来改变。因为要获得用户在界面主动输入的内容，所以只能用双向绑定v-model标记。1.3 找触发事件的元素本例中: 点button按钮触发事件--><div id="app"><input :value="str" @input="doit"><!--相当于DOM中的oninput事件--><button @click="search">百度一下</button></div><script>//2. 创建new Vue()对象, 监视id为app的区域var vm=new Vue({el:"#app",//3. 创建模型对象: //3.1 创建data对象//本例中: 因为页面中只需要一个变量str，所以data:{str:"" //开局用户什么都没输入，默认为""},//3.2 创建methods对象//本例中: 因为页面中只需要一个事件处理函数，所以methods:{doit(e){//获得当前表单元素//错误: //this->vue中因为所有的this都被new Vue()强行改为当前new Vue()对象自己了！无法获得当前触发事件的元素。//正确: //e.target也能获得触发事件的元素: //复习DOM 第四天最后的事件委托。//获得当前表单元素的新内容var value=e.target.value;//将新内容修改到data中的str变量里this.str=value;},search(){console.log(`搜索 ${this.str} 相关的内容`)}}})</script>
</body>
</html>

原理就是 :value 和 @input

VUE模拟实现双向绑定相关推荐

Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
[vue] vue父子组件双向绑定的方法有哪些？
[vue] vue父子组件双向绑定的方法有哪些? 1.利用对象的引用关系来实现 2.父子组件之间的数据传递 3.使用.sync修饰符个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但 ...
[vue] 什么是双向绑定？原理是什么？
[vue] 什么是双向绑定?原理是什么? 双向数据绑定个人理解就是存在data→view,view→data两条数据流的模式.其实可以简单的理解为change和bind的结合.目前双向数据绑定都是基于 ...
Vue 3.0双向绑定原理的实现
proxy方法 vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过new Proxy()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调. Vu ...
vue 如何取消双向绑定
vue中的双向绑定,在单页面中使用起来非常便利,表单数据和对象保持数据一致,但是在某些应用场景下,比如弹窗,我们需要取消双向绑定功能,否则会出现,当我们修改弹窗数据的时候,父页面的数据同步修改的现象, ...
vue取消数据双向绑定问题
如图,由于vue数据的双向绑定,给waterSetInfo拼接单位的时候,会将res.data也进行赋值,导致waterSet里面的结果不对,同一个对象多处使用问题解决方案: 深拷贝的方法:JSON ...
Vue 父子组件双向绑定传值
最简单的双向绑定(单文件中)就是表单元素的v-model了,如果同时设置v-model和value,value属性无效. 自定义v-model:(不推荐) child: <template> ...
剖析Vue原理实现双向绑定MVVM
本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋, ...
Vue 中实现双向绑定的 4 种方法
1. v-model 指令 <input v-model="text" /> 复制代码上例不过是一个语法糖,展开来是: <input:value="t ...

VUE模拟实现双向绑定

代码展示

VUE模拟实现双向绑定相关推荐

最新文章

热门文章