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 $router和$route的区别详解
Dec 02 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
jQuery操作cookie
2016/08/08 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
python matplotlib拟合直线的实现
2019/11/19 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
python Cartopy的基础使用详解
2020/11/01 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
特色蛋糕店创业计划书
2014/01/28 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
2015年双拥工作总结
2015/04/08 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL