详细解释单向绑定

参考资料

MDN

addEventListener()定义与用法

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <input type="text" id="a">

  <span id="b"></span>

  <script>

    // var obj = {};

    // Object.defineProperty(obj,"hello",{

    //   set: () => {

    //     console.log("get方法被调用");

    //   },

    //   get: (val) => {

    //     console.log("se方法被调用"+val);

    //   }

    // })

    let obj = {};

    //Object.defineProperty(obj, prop, descriptor)

    // obj 要在其上定义属性的对象。

    // prop 要定义或修改的属性的名称。

    // descriptor 将被定义或修改的属性描述符。

    Object.defineProperty(obj, 'hello', {    //这里定义obj.hello为完成修改的属性

      set: (newVal) => {                     //当obj.hello的属性发生变化,就会以参数传进来

        document.getElementById('a').value = newVal;    //set触发给a值同时把值给b实现绑定

        document.getElementById('b').innerHTML = newVal;

        obj.hello

      },

      get: ()=> {

        console.log("hahahaah");

      }

    });

    //addEventListener() 方法用于向指定元素添加事件句柄。

    //element.addEventListener(event, function, useCapture)

    //event 所有 HTML DOM 事件

    //function 指定事件触发时执行的函数。

    //useCapture 指定事件是否在捕获或冒泡阶段执行。

    document.addEventListener('keyup', (e) => { //监听键盘的按键松开的事件

      console.log(e);

      obj.hello = e.target.value; //将监听到了变化的值给obj.hello,让他触发set属性

    })

  </script>

</body>

</html>

使用js实现单向绑定的更多相关文章

  1. Vuejs——（1）入门（单向绑定、双向绑定、列表渲染、响应函数）

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   参照链接: http://cn.vuejs.org/guide/index.html [起步]部 ...

  2. ng1中 如何用双向绑定 实现单向绑定的初始时不显示双括号效果？

    ng1中 如何用双向绑定 实现单向绑定(ng-bind就可以不显示{{}})的初始时不显示双括号效果? AngularJS 实例 页面加载时防止应用闪烁: <div ng-app="& ...

  3. JS基础——事件绑定

    上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理V ...

  4. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  5. js事件的绑定与移除

    事件的绑定分为3类: <div id='clickEvent'>点击事件</div> 在DOM元素中直接绑定 <div onclick="alert('4567 ...

  6. 用原生 JS 实现双向绑定及应用实例

    写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...

  7. 【前端】vue.js实现输入框绑定

    vue.js实现输入框绑定 实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动 ...

  8. Vue.js：样式绑定

    ylbtech-Vue.js:样式绑定 1.返回顶部 1. Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v- ...

  9. JS 监听绑定和取消事件

    1. 原生 JS 语言: 绑定:addEventListener(type, function, false) 取消: removeEventListener(type, function, fals ...

随机推荐

  1. Python爬虫教程-19-数据提取-正则表达式(re)

    本篇主页内容:match的基本使用,search的基本使用,findall,finditer的基本使用,匹配中文,贪婪与非贪婪模式 Python爬虫教程-19-数据提取-正则表达式(re) 正则表达式 ...

  2. Qt QDialog将窗体变为顶层窗体（activateWindow(); 和 raise() ）

    m_pLoginDlg->hide(); m_pLoginDlg->activateWindow(); //m_pLoginDlg->raise(); m_pLoginDlg-> ...

  3. shell 脚本解压war包+备份+tomcat自动关闭+启动

    公司的开发环境每次替换war包时候,老是需要重新上传并且手动解压,然后再去重启tomcat.觉得这样子太麻烦了,于是写了一个shell脚本,自动解压+备份+tomcat自动关闭+启动.代码如下: #关 ...

  4. HTML 水平线hr

    HTML 水平线 <hr /> 标签在 HTML 页面中创建水平线. hr 元素可用于分隔内容. 实例 <p>This is a paragraph</p> < ...

  5. html tags and attribute集参考

    cite 表示引用到某一本书籍名称,默认样式为斜体,q 表示直接引用到里面的话,大块的引用使用block默认样式将增加“双引号” ,关键的词用<b>默认为粗体:一些技术术语则用<i& ...

  6. Linux 虚拟机虚拟网卡问题导致无法连接问题

    问题描述 当 Linux 虚拟机启动时,通过串口输出或者启动日志, 观察到虚拟网卡启动或者初始化故障, 导致虚拟机无法连接. 问题分析 常见的超时报错范例如下: CentOS 复制 Bringing ...

  7. 在win7 windows 上编译 beego 上传到 linux 去执行

    在beego的项目目录下,执行: GOOS=linux GOARCH=amd64 go build So easy!但是却搞了好久! 参考连接:http://blog.csdn.net/changji ...

  8. ignore_user_abort函数制定计划任务

    PHP中的ignore_user_abort函数是当用户关掉终端后脚本不停止仍然在执行,可以用它来实现计划任务与持续进程,下面会通过实例讨论ignore_user_abort()函数的作用与用法.   ...

  9. tftp传输可执行程序问题

    昨天搭建了板子从nfs系统启动,这样只要在开发机上编写程序编译,就可以在板子上测试运行了,编写了hello world 程序,用arm编译器编译,在主板上运行,提示出错:什么exception ((什 ...

  10. NET平台微服务

    .NET平台微服务项目汇集   最近博客园出现了一篇文章<微服务时代之2017年五军之战:Net PHP谁先死>,掀起了一波撕逼,作者只是从一个使用者的角度来指点江山,这个姿势是不对的.. ...