ES6簡單擴展和單文件組件

 

 es6簡介

ECMAScript是JavaScript語言的國際標準，JavaScript是ECMAScript的實現

ES6新特性

多樣化的聲明方式

1. var
2. let
3. const
4. function
5. import
6. class

Babel

Babel 是一個普遍使用的 ES6 轉碼器，能夠將 ES6 代碼轉爲 ES5 代碼，從而在現有環境執行。 這意味着，你能夠用 ES6 的方式編寫程序，又不用擔憂現有環境是否支持。下面是一個例子。

// 轉碼前
input.map(item => item + 1);

// 轉碼後
input.map(function (item) {
  return item + 1;
});

　

 let

ES6新增了let命令，用於聲明變量，用let聲明的變量，只在let命令所在的代碼塊內有效

let實際上是爲JavaScript新增了塊級做用域。在以前的js中沒有塊級做用域,只有函數可以產生做用域!

 

　

const

常量：不變的量

什麼是不變的量,與變(var/let)的區別

字符串擴展

在原先js的基礎上增長了一些新的方法,擴展了一些新的功能
最好用的莫過於模板字符串,大大簡化了咱們的書寫方式

 

函數擴展

 

module語法

歷史上，JavaScript 一直沒有模塊（module）體系，沒法將一個大程序拆分紅互相依賴的小文件，再用簡單的方法拼裝起來。 其餘語言都有這項功能，好比 Ruby 的require、Python 的import，甚至就連 CSS 都有@import， 可是 JavaScript 任何這方面的支持都沒有，這對開發大型的、複雜的項目造成了巨大障礙。

在 ES6 以前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用於服務器，後者用於瀏覽器。 ES6 在語言標準的層面上，實現了模塊功能，並且實現得至關簡單，徹底能夠取代 CommonJS 和 AMD 規範，成爲瀏覽器和服務器通用的模塊解決方案。

 

一個模塊就是一個獨立的文件。該文件內部的全部變量，外部沒法獲取。若是你但願外部可以讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量

數組的擴展

 

數值的擴展

單文件組件

單文件組件:就是將咱們的組件部分單獨抽取到一個.vue文件
經過單文件組件的方式,能夠完美的解決上述問題

 簡單的單文件組件示例

 複雜頁面的組件化開發

模塊分離的思想
將一個個單獨的功能模塊抽取成一個個單文件組件進行使用

1. 在較大項目中下降文件結構的複雜度
2. 便於頁面內容的修改,也就是更新迭代,在修改文件內容的時候直接查找對應的單文件組件,變得更方便
3. 最重要的一點,對於一些屢次使用的組件,咱們能夠單獨將其抽取,使用的時候直接調用,實現組件的複用

在主頁面,將總體的功能結構劃分紅頭部----主體----底部三部分,每一部分提取成一個組件,具體實現以下

完整功能的實現,完善App.vue和main.js