ES6 Simple Extensions and Single-File Components

Introduction to es6

ECMAScript is an international standard for the JavaScript language, and JavaScript is an implementation of ECMAScript

ES6 new features

多样化的声明方式

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

Babel

Babel is a widely used ES6 transcoder that converts ES6 code to ES5 code for execution in existing environments. This means that you can write programs the ES6 way without worrying about whether your existing environment supports it. Below is an example.

// before transcoding
input.map(item => item + 1);

// after transcoding
input.map(function (item) {
  return item + 1;
});

let

ES6 adds the let command to declare variables. Variables declared with let are only valid within the code block where the let command is located.

let actually adds block-level scope to JavaScript . In previous js there was no block scope, only functions could have scope!

const

constant: an unchanging quantity

What is an invariant quantity and the difference between it and a variable (var/let)

string expansion

在原先js的基础上增加了一些新的方法,扩展了一些新的功能
最好用的莫过于模板字符串,大大简化了我们的书写方式

function extension

module syntax

Historically, JavaScript has never had a module system, and it is impossible to split a large program into small files that depend on each other, and then assemble them in a simple way. Other languages have this feature, such as Ruby's require, Python's import, and even CSS has @import, but JavaScript doesn't have any support for this, which is a huge obstacle to developing large and complex projects.

Before ES6, the community developed some module loading schemes, the most important ones being CommonJS and AMD. The former is for the server and the latter is for the browser. At the level of language standards, ES6 implements the module function, and the implementation is quite simple. It can completely replace the CommonJS and AMD specifications and become a common module solution for browsers and servers.

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量

array expansion

Numerical expansion

single file component

单文件组件:就是将我们的组件部分单独抽取到一个.vue文件
通过单文件组件的方式,可以完美的解决上述问题

Simple single-file component example

Componentized development of complex pages

模块分离的思想
将一个个单独的功能模块抽取成一个个单文件组件进行使用

Reduced file structure complexity in larger projects
It is convenient to modify the content of the page, that is, to update iteratively. When modifying the content of the file, it is more convenient to directly find the corresponding single-file component.
The most important point is that for some components that are used multiple times, we can extract them individually and call them directly when using them to achieve component reuse.

在主页面,将整体的功能结构划分成头部----主体----底部三部分,每一部分提取成一个组件,具体实现如下

Implementation of complete functions, perfecting App.vue and main.js