VUE教程：vue的理解與基礎使用（一）

本篇文章適合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/...