VUE教程：vue的理解与基础使用（一）

Vicky 发布于2019-08-26 12:00 / 2448人阅读

摘要：本篇文章适合基础特别弱的同学，如果有基础同学可以忽视。下面代码不能称作，只是为了便于理解用这样就实现了一个和官网差不多的例子，我们将处理函数放在中。

本篇文章适合javascript基础特别弱的同学，如果有基础同学可以忽视。

更多详情：https://github.com/jilaokang/...

背景

vue是最开始是尤雨溪自写自用的一个框架，后因为一个大佬在推特推荐，让这个框架瞬间大量涨粉。时至今日，这个框架在前端开发领域MVVM层已经十分著名和成熟。

MVVM

*VM：ViewModel指的是视图层/数据层的一个映射，通过这种方式，开发人员将数据和视图进行分离，将前端开发进行优化。

官网示例

    
        {{ message }}

    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，只是为了便于理解用）

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

GPU云服务器云服务器 vue基础教程 vue教程 vue视频教程 vue入门教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108018.html

学习Vue2.0的建议顺序

摘要：官方文档官方文档，官方文档永远是学习资料的第一步起步扎实的基本功。学习的新特性，理解，建议可以看看阮一峰的教程。的学习曲线会比较长，需要了解到的常用命令，以及和的模块规范，的也很多，其实更多的是属于一项后端语言。学习Vue2.0的建议顺序注：本文是看过其他关于vue文章之后的想法，欢迎转载，请注明出处。　 Vue官方文档：Vue2.0官方文档，官方文档永远是学习资料的第一步起步...

iamyoung001 2019-08-20 14:18 评论0 收藏0
(原创)vue 学习笔记

摘要：菜鸟教程这是一个属性其值是字符串菜鸟教程同上这是一个属性其值是字符串用于定义的函数，可以通过来返回函数值。它们都有前缀，以便与用户定义的属性区分开来。开篇语我最近学习了js,取得进步,现在学习vue.js.建议新手学习,请不要用npm的方式(vue-cli,vue脚手架),太复杂了. 请直接下载vue.js文件本地引入,就上手学习吧参照菜鸟教程网站的vue.js教程http://...

layman 2019-08-22 18:09 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0