Vue学習の心得

Vueソース学習の心得
Vueソースの読み取りの心得を記録し、gitからコードをダウンロードし、最初のコードから読み取ります.1.Vueデータバインド

<div id="app'>
    {{msg}}
    {{hello}}
    {{world}}

new Vue({
el:'app',
data:{
msg:'hello Wolrd',
hello:「こんにちは!」
}
})
双方向バインドの原理は、次のとおりです.

function Vue(opt){
    const bindingMark = 'data-element-binding'
    //  id   html          
    var item = document.getElementById(opt.el);
    content  = el.innerHTML.replace(/\{\{(.*)\}\}/g, markToken);
    el.innerHTML = content;//            
    //     bingding   
    for(variable in bindings){
        bind(variable);
    }
    if (opt.data) {
                    for (var variable in opt.data) {
                        data[variable] = opt.data[variable]
                    }
//      ,      {{some}} ⇒ 
function markToken (match, variable) {
                    bindings[variable] = {}
                    return ' + bindingMark + '="' + variable +'">'
                }   
                //           node  ,  bindings      els        nodeList,          bindingMark  ,  binding          [msg:{els:nodesList},hello:{els:nodeList},world:{els:[]}]
                function bind (variable) {
                    bindings[variable].els = el.querySelectorAll('[' + bindingMark + '="' + variable + '"]')
                    ;[].forEach.call(bindings[variable].els, function (e) {
                        e.removeAttribute(bindingMark)
                    })
                    //            ,set           ,               ,            ,         ,      ,         
                    Object.defineProperty(data, variable, {
                        set: function (newVal) {
                            [].forEach.call(bindings[variable].els, function (e) {
                                bindings[variable].value = e.textContent = newVal
                            })
                        },
                        get: function () {
                            return bindings[variable].value
                        }
                    })
                }

}

心得

Vue             ,    "<span>{{params}}<span>"
         <span data-element-bindings='params'><span>  ,
    Object.define      ,          ,