Vue框架之基础

Posted 2021-01-22 qq631243523

介绍

vue.js 是用来构建web应用接口的一个库

技术上，Vue.js 重点集中在MVVM模式的ViewModel层，它连接视图和数据绑定模型通过两种方式。实际的DOM操作和输出格式被抽象的方式到指令（Directives）和过滤器（Filters）

在哲学领域内,尽量让MVVM数据绑定API尽可能简单。模块化和可组合性也是重要的设计考虑。vue不是一个全面的框架,它被设计成简单的和灵活的。你可以用它快速原型,或混合和匹配与其他库定义前端堆栈。

Vue。js的API是参考了AngularJS、KnockoutJS Ractive.js Rivets.js。尽管有相似之处,我相信Vue.js提供一个有价值能够让你在现在的一些现有框架中舍取其价值

即使你已经熟悉其中的一些术语,建议您通过以下概念的概述,因为你的这些术语的概念可能在Vue.js的下文中有所不同。https://cn.vuejs.org/v2/guide/instance.html

 

在没有学习Vue之前 我们需要了解一下es6语法

es6语法基础介绍:

　　变量的用法:

    <!--es6的变量的用法 -->
    var a = [];
     for (var i = 0;i < 10;i++ ){
        a[i] = function () {
            console.log(i)
        }
    }
    a[2]();
    // 打印结果是 10 ，var声明变量的时候，会使变量提升到最上面
    for (let i = 0;i < 10;i++ ){
        a[i] = function () {
            console.log(i)
        }
    }
    a[2]();
    // 打印的结果是 2

　　箭头函数的使用:

 function fv(x) {
        return x
    }

    let add = (x) => {
        return x
    };

    let add2 = x => x;
    console.log(add2(10));

    console.log(fv(2));
    console.log(add(2));

　　对象:

let person = {
        name:‘sado‘,
        age:18,
        hobby:function () {
            console.log(this)
        //    打印的是当前对象
        }
    };
    person.hobby();

    let person = {
        name:‘sado‘,
        age:18,
        hobby: () => {
            console.log(this)
        //    打印的是上一层对象
        }
    };
    person.hobby();
    let person = {
        name:‘sado‘,
        age:18,
        hobby () {
            console.log(this)
        //    打印的是当前对象
        }
    };
    person.hobby();

　　类的用法:

 class obj{
        constructor(name,age){
            //constructor等同于python中类的初始化方法__init__
            this.name=name;
            this.age = age;
        //    与python中类的声明很相似
        }
        // 方法的声明
        showname(){
            console.log(this.name);


        }

        showage(){
            console.log(this.age);

        }
    }
    // 实例化对象,注需要在类名前加 ‘new‘ 关键字
    let sado = new obj(‘sado‘,18);
    sado.showname();
    sado.showage();