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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
详解Vue的options
May 15 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue的项目如何打包上线
Apr 13 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 版获取重定向后的地址(代码)
2013/06/26 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
Vue响应式原理详解
2017/04/18 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
实现vuex原理的示例
2020/10/21 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
如何搜索查找并解决Django相关的问题
2014/06/30 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
Django model select的多种用法详解
2019/07/16 Python
python同时遍历两个list用法说明
2020/05/02 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
员工自我鉴定范文
2013/10/06 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL
使用CSS连接数据库的方式
2022/02/28 HTML / CSS