vue实现简单数据双向绑定

2024-10-01 22:51:10

本文实例为大家分享了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.js实现双向数据绑定方法(表单自动赋值、表单自动取值)

1.使用Vue.js实现双向表单数据绑定,例子  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>财产查勘处理</title> <link r
vue的style绑定background-image的方式和其他变量数据的区别详解

问题:使用vue加载图片变量,为了图片的自适应,需设置为背景图居中排布 <tr v-for="(item,index) in dataObj"> <td class="video-msg" v-bind:id="item.videoid"> <div class="videoImg fl" v-bind:style="{backgroundImage:'url(' + item.vide
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写入访问器属性时,会调用setter函数并传入新值. 这里介绍的重点是
Vue.js每天必学之数据双向绑定

Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值文本数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新. 你也可以只处理
vue.js数据绑定的方法（单向、双向和一次性绑定）

这两天学习了vue.js数据绑定这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 前言感觉 vue 的很多方面的内容,都参考了 angular 的东西,数据绑定方面,更是赤裸裸的"抄袭".对照来看,更有助于我们学习和理解框架本身透露出来的思想,而非框架本身. 一.单向绑定 (一)Mustache 语法,双大括号 {{}}(html 内字符串绑定) <div id="app"> <p>{{text}}</p> <
vue 实现v-for循环回来的数据动态绑定id

如下所示: 代码效果图!!!!! <ul> <li v-for="(site,index) in sites" :key="index" :id="forId(index)"> <span class="channel-li-li-border"> <span class="firstLevel">{{site.name}}</span> <
简单谈谈Vue 模板各类数据绑定

『天下武功,唯快不破』√,这一直是对武学造诣方面的追捧,虽然对于这个丝毫不会:更是对待现实工作不懈渴求,乃至苛求.因为这已不是遁隐修行,而是职场卖命,唯有先快速解决需求,方能攫取更为充盈的时间去深究技术机理,以使臻于更强,更强而优于快,如此优良循环得以形成.言归正传,作为前端ER,一度觉得,这 Vue 的诞生,好比一柄倚天利器,其易上手,写以及运行也都很高效,十分让人爱不释手:但这易上手,倒不等于容易精通,蛮多东西都需悉心学习.练习.理解,才能运用自如. 在使用 Vue 开发过程中,那基于 Do
详解Vue.js基于$.ajax获取数据并与组件的data绑定

Vue.js与jQuery不冲突??? 在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax请求来完成的. 说到ajax请求,第一反应肯定想到了jQuery,项目中如果引入jQuery会帮助我们简化很多操作,简化DOM操作,ajax方法获取后端数据等. 然而,Vue.js和jQuery冲突吗??? 答案显然是不冲突!!! 接下来会实现Vue.js组件中使用jQuery的ajax方法获取服务器端数据并绑定至组件的data中. 创建Vue.js单文件组件 <
vue.js数据绑定操作详解

本文实例讲述了vue.js数据绑定操作.分享给大家供大家参考,具体如下: 数据绑定响应式的数据绑定系统.建立绑定之后,DOM将和数据保持同步,无须手动维护DOM.使代码能够更加简洁易懂.提升效率. 数据绑定语法 1.文本插值 {{ }}Mustache标签 <span>Hello {{ name }}</span> data:{ name: 'vue' } == > Hello vue 单次插值首次赋值后再更改vm实例属性值不会引起DOM的变化 <span v-on
浅谈vue中关于checkbox数据绑定v-model指令的个人理解

vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: <div id='myApp'> <input type="text" v-model="msg"><br> {{msg}} </div> js里data初始化数据 <script src="./js/vue.js"></script> <script

vue实现简单数据双向绑定

相关推荐

随机推荐