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项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 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
基于xcache的配置与使用详解
2013/06/18 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
JSON.stringify 语法实例讲解
2012/03/14 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
对于Python的框架中一些会话程序的管理
2015/04/20 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
关于numpy数组轴的使用详解
2019/12/05 Python
python中元组的用法整理
2020/06/15 Python
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
销售员求职个人的自我评价
2014/02/19 职场文书
工程部部长岗位职责
2015/02/12 职场文书
婚宴父亲致辞
2015/07/27 职场文书
《迟到》教学反思
2016/02/24 职场文书