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 相关文章推荐
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
如何实现vue的tree组件
Dec 03 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 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
PHP 学习路线与时间表
2010/02/21 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
python构建指数平滑预测模型示例
2019/11/21 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
自荐信格式范文
2013/10/07 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
应届生面试求职信
2014/07/02 职场文书
金砖之国观后感
2015/06/11 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
公司转让协议书
2016/03/19 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
js不常见操作运算符总结
2021/11/20 Javascript
HDFS免重启挂载新磁盘
2022/04/06 Servers
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers