脚本宝典收集整理的这篇文章主要介绍了

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

总结

以上是脚本宝典为你收集整理的

VUE教程:vue的理解与基础使用(一)

全部内容,希望文章能够帮你解决

VUE教程:vue的理解与基础使用(一)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过