介紹

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();