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