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

本文固定链接: http://www.js-code.com/vue-js/vue-js_25653.html