本篇文章合適javascript基本迥殊弱的同硯，如果有基本同硯能夠無視。

更多概況：https://github.com/jilaokang/…

背景

vue是最最先是尤雨溪自寫自用的一個框架，後由於一個大佬在推特引薦，讓這個框架霎時大批漲粉。時至今日，這個框架在前端開闢範疇MVVM層已非常有名和成熟。

MVVM

*VM：ViewModel指的是視圖層/數據層的一個映照，經由過程這類體式格局，開闢人員將數據和視圖舉行星散，將前端開闢舉行優化。

官網示例

    <div id="app">
        {{ message }}
    </div>

    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })

解讀：
el:element listen 監聽這個元素
data:數據寄存

運用：請見源文件tutorial1/gm

明白

    var Person = function(name, age){
        this.name = name
        this.age = age
    }

    var Kaso = new Person('kaso', 18)

置信上面的代碼人人不會生疏，經由過程定義一個person對象，new一個kaso實例出來。然而在我們實際運用的時刻，如果傳入值過量，經由過程function(name, age)這類明顯不容易舉行保護，我們能夠改寫成如許

    var Person = function(obj){
        this.name = obj.name
        this.age = obj.age
    }

    var Kaso = new Person({
        name:'kaso',
        age:18
    })

經由過程object傳值能夠越發正確直觀將數據傳進去。
是否是和官網有幾分類似呢？

    // 官網
    var = new Vue({
        el: '#root'
        data: {
            msg: 'halo vue'
        }
    })

如許置信人人對new一個vue的對象有了相識。

有人會發生疑問，你上面寫的那些只能簡樸的實例化一個新的對象，並沒有什麼實例功用啊，來，讓我們繼承。

設想這一部份是我們寫的一個vue框架

    var Person = function (obj) {
        this.name = obj.name
        this.age = obj.age

      this.sayHalo()
    }

    Person.prototype.sayHalo = function (){
        alert(`halo ${this.name} , Welcome !!`)
    }

我們要寫的代碼照樣沒有變

    var Kaso = new Person({
           name:'kaso',
           age:18
       })

經由過程這類體式格局，在你實例化一個Kaso的時刻執行了內部封裝的sayHalo()函數。同理，我們能夠寫多少函數在Person對象內里。

拓展

如果我們要接見掛在節點el並將data.msg中的內容在el地點的div模塊中顯現。（下面代碼不能稱作MVVM，只是為了便於明白用）

    <div id="app">
    </div>

    var MVVM = function (obj) {
        this.el = obj.el
        this.data.msg = obj.data.msg

        this.sayHalo();
    }

    MVVM.prototype.sayHalo = function () {
        var DOM = document.getElementById(this.el)

        DOM.innerHTML = this.data.msg
    }

    var app = new MVVM({
        el: 'app',
        data: {
            msg:'halo MVVM'
        }
    })

如許就完成了一個和官網差不多的例子，我們將處置懲罰函數放在sayHalo中。
詳細源代碼請看tutoria1/understand

更多概況：https://github.com/jilaokang/…