手写一个简单的vue双向数据绑定

最新推荐文章于 2022-05-19 10:05:28 发布
最新推荐文章于 2022-05-19 10:05:28 发布
阅读量266 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41846172/article/details/109195986
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="ipt">
    <div id="box"></div>
    <script>
        let a = 1;
        //1.先获取元素
        let ipt = document.getElementById('ipt');
        let box = document.getElementById('box');
        //设定数据上一个对象，用于和view视图实现双向数据绑定
        var str = {}
     
        // //先初始化view视图，简单实现数据绑定
        ipt.value = str.name;
        box.innerHTML = str.name;

        //通过Object.defineProperty知道对象属性变了
        Object.defineProperty(str,'name',{
            get(){
                return ipt.value;
            },
            set(val){
                ipt.value = val;
                box.innerHTML = val;
            },
            writeable:true,
          
        })
        ipt.addEventListener('keyup',function(){
            box.innerHTML = ipt.value;
        })
        
    </script>
</body>
</html>

 

LQSG
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
手写一个简单的vue实现双向数据绑定
qq_37473645的博客
10-02 1270
手写一个简单的vue实现mvvm 1. 准备两个文件index.html和mvvm.js index.html内容如下： <body> <div id="app"> <input type="text" v-model="person.name"> {{person.name}} <div> ...
手写vue双向数据绑定
weixin_47450807的博客
03-05 397
一、写在前面 学习前端不得不学vue，学习vue不得不学习他的响应式原理，下面为我实现响应式的思路和代码，注释写在代码中。 二、实现 const CommandUtils = { setValue(vm, attr, newValue) { attr.split('.').reduce((data, currentAttr, index, arr) => { if (index === arr.length - 1) { data[currentAttr] =
手写vue双向绑定数据
weixin_34240520的博客
04-19 264
来一张原理图： 实现思路： 　　（1）绑定data 种的数据，为每个数据添加指令。通过Object,defineProperty() 来通知属性是否更改 　　（2） 找到每个DOM节点的指令。绑定事件。并绑定watcher 　　（3） 实现DOM事件改变之后， 响应data数据，实现视图更新 <!DocType> <html> <title...
Vue的双向数据绑定
10-16 154
1、原理 Vue的双向数据绑定的原理相信大家也都十分了解了，主要是通过Object对象的defineProperty属性，重写data的set和get函数来实现的,这里对原理不做过多描述，主要还是来实现一个实例。为了使代码更加的清晰，这里只会实现最基本的内容，主要实现v-model，v-bind 和v-click三个命令，其他命令也可以自行补充。 添加网上的一张图 2、实现 ...
(转)手写Vue的双向数据绑定
CaseyWei
03-30 246
在目前的前端面试中，vue的双向数据绑定已经成为了一个非常容易考到的点，即使不能当场写出来，至少也要能说出原理。本篇文章中我将会仿照vue写一个双向数据绑定的实例，名字就叫myVue吧。结合注释，希望能让大家有所收获。 1、原理 Vue的双向数据绑定的原理相信大家也都十分了解了，主要是通过Object对象的defineProperty属性，重写data的set和get函数来实现的,这里对原理...
vue用Object.defineProperty手写一个简单的双向绑定的示例
08-27
使用 Object.defineProperty 可以手写一个简单的双向绑定示例。 什么是双向绑定？ 双向绑定是指视图层和模型层之间的相互更新。它可以分为两部分： 1. 模型到视图（Model => View）：当模型层的数据发生变化时，...
vue双向绑定实现解析
06-20
通过带着读者手写简化版的vue双向绑定，了解vue双向绑定的核心原理; 从零开始实现vue的双向绑定，让大家可以更好的理解双向绑定的逻辑走向； 本项目依次实现了下面的功能 1、自定义的vue类 2、模板解析 Compile 类 3...
手写Vue源码实现MVVM的响应式原理以及数据的双向绑定
08-04
手写Vue源码实现MVVM的响应式原理以及数据的双向绑定 帮你理解什么是数据劫持 什么是发布者-订阅者模式 帮你理解Vue内部是如何实现的双向数据绑定 了解Observer Dep Watcher三者之间的关系
手写vue作业1
08-08
在手写Vue的过程中，我们需要理解如何定义一个Vue组件，包括`<template>`（模板）用于描述UI结构，`<script>`（脚本）用于定义组件逻辑，以及`<style>`（样式）用于组件的样式定制。 数据绑定是Vue的另一个关键特性...
笔记02_手写vue1
08-03
在Vue中，`{{ }}`用于文本插值，`v-bind`用于绑定属性，`v-on`用于事件监听，`v-model`用于双向数据绑定，`v-for`用于循环渲染，而`v-if`则用于条件渲染。 ```html <div id="app">{{ foo }} ``` 在这个例子中，`{{ ...
使用Vue如何写一个双向数据绑定(面试常见)
12-29
1、原理 Vue的双向数据绑定的原理相信大家也都十分了解了，主要是通过 Object对象的defineProperty属性，重写data的set和get函数来实现的,这里对原理不做过多描述，主要还是来实现一个实例。为了使代码更加的清晰，这里只会实现最基本的内容，主要实现v-model，v-bind 和v-click三个命令，其他命令也可以自行补充。 添加网上的一张图 2、实现 页面结构很简单，如下 <form> <input type=text v-model=number> <button type=button v-click=in
手写Vue 的双向数据绑定
油墨香^-^的博客
05-19 767
在目前的前端面试中，vue的双向数据绑定已经成为了一个非常容易考到的点，即使不能当场写出来，至少也要能说出原理。 本篇文章中我将会仿照vue写一个双向数据绑定的实例，名字就叫myVue吧。结合注释，希望能让大家有所收获。 1、原理 Vue的双向数据绑定的原理相信大家也都十分了解了，主要是通过 Object对象的defineProperty属性，重写data的set和get函数来实现的,这里对原理不做过多描述，主要还是来实现一个实例。 为了使代码更加的清晰，这里只会实现最基本的内容，主要实现v-m
手写简单的双向数据绑定
weixin_33881050的博客
01-04 718
github.com/logictuLuoq… 简单介绍一下MVVM MVVM是Model-View-ViewModel的简写 MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了 还是听不懂 简单一点 你控制 Model(数据) 写vue 全在控制数据 View(模板) 你就理解成 你写的templeat View...
手写实现Vue双向数据绑定
qq_43460760的博客
10-15 172
简单手写实现类似Vue双向数据绑定 <!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">
Vue--双向绑定的原理--手写双向绑定(模仿vue)
IT利刃出鞘的博客
01-05 1328
原文网址： 简介 说明 本文用示例介绍Vue的双向绑定的原理（实现方式）。 什么是双向绑定 双向绑定：数据和视图任意一个变化，则另一个也跟着变化。也就是：数据变化更新视图，视图变化更新数据。 Vue是MVVM模型。数据属于Model，视图属于View。本文要介绍的双向绑定就是：VM（ViewModel）。 MVVM表示的是 Model-View-ViewModel Model：模型层。负责处理业务逻辑以及和服务器端进行交互 View：视图层：负责将数据模型转...
手写一个数据双向绑定
潇湘子的博客
10-30 633
<input id="input" type="text" /> <div id="text"></div> let el_input = document.querySelector("#input") let el_div= document.querySelector("#text") let data = { value: '' } Object.defineProperty(data, "value", { set: function (val) {
手写vue源码(精简版) -- 更新显示(Watcher)，双向数据绑定
huolinianyu的博客
08-30 763
手写mini版的vuevue原理图编译前的知识准备实现编译 vue原理图 编译前的知识准备 节点类型 – nodeType。document可以看成是一棵节点树，它是由一个个的节点组成的。 <p key='index'>text</p //每一个标签都属于元素节点， //包裹在标签里面的是文本节点, //开始标签里面的健值对是属性节点 //所有以上的都统称为节点，这些节点...
手写VUE mvvm双向数据绑定
热门推荐
Alinachanchan的博客
08-09 1万+
当你打开这篇文章时，你肯定已经使用过vue，当你改变数据时，与之绑定的UI自动更新，当你触发一些表单元素时，与之绑定的数据也会自动更新。我刚开始学vue的时候对vue的双向数据绑定很好奇，所以今天我给大家实现一个简单的vue。 首先，你得明白为什么我们要使用双向数据绑定，在没有什么mvc，mvvm之前，当数据改变，我们总是需要手动通过id class等方式找到我们的DOM，手动的调用什么inne
手写JS双向数据绑定
Matrix_Designer的专栏
03-13 947
function DataBinder( object_id ) { // Create a simple PubSub object var pubSub = { callbacks: {}, on: function( msg, callback ) { this.callbacks[ msg ] = this.callbacks[ msg ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值