Vue學習筆記第一天--es6

es6

webpack-ES6的處理

• ES6的模塊,vue自己默認支持es6的模塊導入導出

• babel

  • babel-loader(內部依賴babel-core)

    • 關鍵字(presets es2015)
    • 函數(plugins babel-plugin-transform-runtime)

ES6中的模塊

• 默認

  • 導入import [,..xxx] [,..from] './xxx.ext'
  • 導出 export default obj;

• 聲明式

  • 1導出 export var obj = xxx;
  • 2導出 export var obj2 = {};
  • 3單獨導出 export {stu};
  • 導入 import {obj,obj2,stu} from './xxx.js'; 直接使用obj
• 全體

• 默認導出和聲明式導入在使用上的區別

  • 要注意，聲明式導入的時候，必須{名稱} 名稱要一致（按需導入)
  • 默認導入，能夠隨意的使用變量名

{
default:"我是默認導出的結果"    
        import xxx from './cal.js'會獲取到整個對象的default屬性
obj1:"我是聲明式導出1"
obj2:"我是聲明式導出2" 
obj3:"我是聲明式導出3"     import {obj1,obj2}
obj4:"我是聲明式導出4"
}
    import * as allObj from './cal.js';  獲取的就是一整個對象

• import 和export必定寫在頂級，不要包含在{}內

ES6中的代碼變化

• 對象屬性的聲明

var name = 'abc';
    var person = {name}; 簡寫-> var person = {name:name};

    聲明函數 
    var cal = {
        add:function(){
            return 1;
        },
        add2(){
            return 2;
        },
        add3:funtion(n1,n2){
            return n1 + n2;
        },
        add4(n1,n2){  幹掉了function
            return n1 + n2;
        }
    }

• 當屬性的key和變量的名相同,而要使用變量的值作value,
• 就能夠簡寫{name}->{name:name}
• es6中的函數聲明 () {}