vue实现简单数据双向绑定


Posted in Vue.js onApril 28, 2021

本文实例为大家分享了vue实现简单数据双向绑定的具体代码,供大家参考,具体内容如下

这里是简单的实现,有助于新手理解消化,当然vue要实现双向数据代理不可缺少,期待后续在更新

vue双向数据绑定

-> Object.defineProperty() //2.0核心语法
-> 数据代理
-> 双向绑定
-> 订阅发布模式
compile-> 模版解析 (template模版 html 指令 {{表达式}})
observer-> 观察者(订阅发布) data里的所有的属性进行 数据劫持 数据代理
watcher-> 监听 data里的所有的属性被改变之后触发

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="ipt" />
    <p id="lc"></p>
  </body>
</html>
<script>
  //获取页面元素
  var ipt = document.getElementById("ipt");
  var ps = document.getElementById("lc");

  var obj = { name: "" };

  //vue双向数据绑定的核心原理应用
  Object.defineProperty(obj, "name", {
    get() {
      return ipt.value;
    },
    set(newval) {
      ipt.value = newval;
      ps.innerHTML = newval;
    },
  });

  //监听input中的数据变化并赋值p标签
  ipt.addEventListener("keyup", function() {
    ps.innerHTML = ipt.value;
  });
</script>

效果展示:

vue实现简单数据双向绑定

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue+iview分页组件的封装
Nov 17 Vue.js
Vue组件生命周期运行原理解析
Nov 25 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
vue引入Excel表格插件的方法
Apr 28 #Vue.js
原生JS封装vue Tab切换效果
vue项目两种方式实现竖向表格的思路分析
vue首次渲染全过程
浅谈vue2的$refs在vue3组合式API中的替代方法
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
vue backtop组件的实现完整代码
You might like
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
简单的Python的curses库使用教程
2015/04/11 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
详解python分布式进程
2018/10/08 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
英文求职信结束语大全
2013/10/26 职场文书
五好党支部事迹材料
2014/02/06 职场文书
房地产开盘策划方案
2014/02/10 职场文书
总经理助理的职责
2014/03/14 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
公司考勤管理制度
2015/08/04 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python