模擬Vue雙向資料繫結

阿新 • • 發佈：2018-12-11

事件物件

function EventEmit(){
    // {
        // "message":['事件1','事件2']
    // }
    this.callbacks={}
}

EventEmit.prototype.on=function(eventName,fn){
  if(!this.callbacks[eventName]){
      this.callbacks[eventName]=[]
  }
  this.callbacks[eventName].push(fn)
}

EventEmit.prototype.emit=function 
(eventName,fn){
    if(!this.callbacks[eventName]){
        return 
    }
    this.callbacks[eventName].forEach(fn=>{
        fn()
    })
}

// 事件物件
// var e1=new EventEmit();
// // on訂閱事件
// e1.on('message',function(){
//     console.log('操作h1')
// })
// e1.on('message',function(){
//     console.log('操作h2')
// })
// 
 e1.on('message',function(){
//     console.log('操作p')
// })

vue.js

;(function(){
    function Vue(options){
        var {el,data}=options
        //根節點
        var rootEl=document.querySelector(el);
        var _data={}
        var _events=new EventEmit();

        // 資料觀測
        // 當data中的資料發生變化，發出事件通知，所以訂閱了該事件的DOM都會得到更新
        for 
(let key in data){
            _data[key]=data[key]
            Object.defineProperty(this,key,{
                get(){
                    return _data[key]
                },
                set(val){
                    _data[key]=val
                    _events.emit(key)
                }
            })
        }

        // 遞迴解析模板，註冊資料繫結事件
        function compile(childNodes){
            childNodes.forEach((node,index)=>{
                switch(node.nodeType){
                    case 1:
                        // 處理input標籤
                        if(node.nodeName==='INPUT'){
                            const vModel=node.attributes['v-model']
                            if(!vModel){
                                return 
                            }
                            var dataKey=vModel.value.trim();
                            node.oninput=()=>{
                                this[dataKey]=node.value
                            }
                        }
                        // 標籤節點繼續遞迴呼叫
                        compile.call(this,node.childNodes)
                        break;
                    case 3:
                        var matches=/{{(.+)}}/.exec(node.textContent)
                        if(matches){
                            var dataKey=matches[1].trim()
                            node.textContent=_data[dataKey]
                            _events.on(dataKey,()=>{
                                node.textContent=_data[dataKey]
                            })
                        }
                        break;
                }
            })
        }
        compile.call(this,rootEl.childNodes)

    }
    window.Vue=Vue;
})()

index.html

<!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>
    <div id="app">
        {{message}}
        <p>{{message}}</p>
        <div><p>{{message}}</p></div>
        <input type="text" v-model="message">
    </div>

    <script src="js/eventemit.js"></script>
    <script src="js/vue.js"></script>

    <script>
        // 模擬實現{{}} v-model
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello vue'
            }
        })
    </script>
</body>
</html>

模擬Vue雙向資料繫結

事件物件 function EventEmit(){ // { // "message":['事件1','事件2'] // } this.callbacks={} } EventEmit.prototype.on=function(eventNa

vue 雙向資料繫結的實現學習（二）- 監聽器的實現

廢話：上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue實現的基本實現原理：Object.defineProperty() -資料劫持和釋出訂閱者模式（觀察者），下面講的就是資料劫持在程式碼中的具體實現。 1.先看如何呼

vue雙向資料繫結的實現

總所周知，偵測一個物件變化的方法，常用的兩種是Object.defineProperty，和es6的proxy，下面就基於Object.defineProperty實現簡單的雙向繫結其實vue主要是通過Object.defineProperty實現的，至於vue3.0會不會重寫

Vue 雙向資料繫結實現

<!DOCTYPE html> <html> <head> <title>myVue</title> <style> #app{ text-align: center;

詳解 vue 雙向資料繫結的原理，並實現一組雙向資料繫結

1：vue 雙向資料繫結的原理： Object.defineProperty是ES5新增的一個API，其作用是給物件的屬性增加更多的控制Object.defineProperty(obj, prop, descriptor)引數 obj: 需要定義屬性的物件（目標物件）prop: 需被定義或修改的屬性名（物

vue雙向資料繫結原理

Vue應用的是mvvm框架，view和model分離，然後通過vm雙向資料繫結，` <code class="hljs handlebars has-numbering" style="display: block; padding: 0px; color: inh

vue雙向資料繫結的原理

有關雙向資料繫結的原理最近兩次面試的時候，被問到了vue中雙向資料繫結的原理，因為初學不精，只是使用而沒有深入研究，所以答不出來。之後就在網上查找了別人寫的部落格，學習一下。下面是部落格園一篇部落格，以及MDN上講解Object.defineProper

Vue雙向資料繫結的理解

一、什麼是MVVM框架所謂MVVM，是Model - View - ViewModel 的簡寫。我的理解是頁面上所看到的就是View。使用Vue.js或者是其他MVVM框架，是在操作ViewModel，實現View - ViewModel的雙向互動。然後Mod

vue 雙向資料繫結原理

Vue的雙向資料繫結原理是什麼？vue.js是採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter, getter，在資料變動時釋出訊息給訂閱者，出發相應的監聽回撥。具體步驟：首先Vue會使用document

Vue雙向資料繫結原理解析

首先上原始碼，模擬vue的雙向資料繫結原理<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Two-way data-

面試題：你能寫一個Vue的雙向資料繫結嗎？

在目前的前端面試中，vue的雙向資料繫結已經成為了一個非常容易考到的點，即使不能當場寫出來，至少也要能說出原理。本篇文章中我將會仿照vue寫一個雙向資料繫結的例項，名字就叫myVue吧。結合註釋，希望能讓大家有所收穫。 1、原理 Vue的雙向資料繫結的原理相信大家也都十分了解了，主要是通過 Obje

轉 vue實現雙向資料繫結之原理及實現篇 vue的雙向繫結原理及實現

轉自：canfoo#! vue的雙向繫結原理及實現前言先上個成果圖來吸引各位：程式碼： &nb

Vue 框架-03-鍵盤事件、健值修飾符、雙向資料繫結

Vue 框架-03-鍵盤時間及健值修飾符一、鍵盤事件，當按鍵盤時，在控制檯輸出提示 html 原始碼： <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

Vue學習(3)————————繫結Class繫結Style,雙向資料繫結，dom節點

標籤內繫結屬性（此功能看來可以動態繫結標籤屬性） <template> <div id="app"> <div v-bind:title="title"> 滑鼠走一走 </div> </div> </temp

Vue學習（三）——屬性繫結和雙向資料繫結

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>屬性繫結和雙向資料繫結</title> <script src="./v

簡單實現VUE的雙向資料繫結

<!DOCTYPE html> <html> <head> <title>vue-雙向資料繫結的簡單實現</title> </head> <body> <input type="text" name="" id

vue.js v-model雙向資料繫結， vue.js form表單資料繫結

vue指令v-model(雙向資料繫結)自動收集資料

前言：表單提交資料在網站頁面中是十分常見的，而這個表單資料的獲取在原生寫法甚至於JQ都是比較麻煩的（首先需要獲取DOM，然後獲取值）。但是，在vue的專案環境下，表單資料的收集又該怎麼辦呢？（這種自己寫input元素的方法在實際專案中是不常用的哈，因為一般我們都會用一個UI庫，方便而快捷！

vue.js和angular雙向資料繫結的實現原理

一、vue雙向資料繫結 1、原理資料劫持： vue.js 是採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應的監聽回撥。 2、實現步驟要實現mv

angular,vue,react的基本語法—雙向資料繫結、條件渲染、列表渲染、angular小案例

基本語法： 1、雙向資料繫結 vue 指令：v-model="msg" react constructor(){ this.state{ msg:"雙向資料繫結" } render(){ <input type="text" value={this.state

模擬Vue雙向資料繫結

事件物件

vue.js

index.html

相關推薦