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/...