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