es6

webpack-ES6的處理

• ES6的模塊,vue本身默認(rèn)支持es6的模塊導(dǎo)入導(dǎo)出

• babel

  • babel-loader(內(nèi)部依賴babel-core)

    • 關(guān)鍵字(presets es2015)
    • 函數(shù)(plugins babel-plugin-transform-runtime)

ES6中的模塊

• 默認(rèn)

  • 導(dǎo)入import [,..xxx] [,..from] './xxx.ext'
  • 導(dǎo)出 export default obj;

• 聲明式

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

• 默認(rèn)導(dǎo)出和聲明式導(dǎo)入在使用上的區(qū)別

  • 要注意，聲明式導(dǎo)入的時候，必須{名稱} 名稱要一致（按需導(dǎo)入)
  • 默認(rèn)導(dǎo)入，可以隨意的使用變量名

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

• import 和export一定寫在頂級，不要包含在{}內(nèi)

ES6中的代碼變化

• 對象屬性的聲明

var name = 'abc';var person = {name}; 簡寫-> var person = {name:name};聲明函數(shù) var cal = {add:function(){return 1;},add2(){return 2;},add3:funtion(n1,n2){return n1 + n2;},add4(n1,n2){ 干掉了functionreturn n1 + n2;}}

• 當(dāng)屬性的key和變量的名相同,而要使用變量的值做value,
• 就可以簡寫{name}->{name:name}
• es6中的函數(shù)聲明 () {}

總結(jié)

以上是生活随笔為你收集整理的Vue学习笔记第一天--es6的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。