vue2.0使用ES6语法
ES6 快速入门
什么是ES6?
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。
ECMAScript和JavaScript到底是什么关系?简单来说,ECMAScript是JavaScript语言的国际标准,JavaScript是ECMAScript的实现。
let:
ES6新增了let命令,用于声明变量。其用法类似var,但是声明的变量只在let命令所在的代码块内有效。
{
let x = 10;
var y = 20;
} x // ReferenceError: x is not defined
y // 20
var声明变量存在变量提升。也就是在声明变量之前就可以使用该变量。
console.log(x) // undefined,var声明变量之前可以使用该变量
var x = 10;
而let不会这样,let声明的变量不能在声明之前使用。
console.log(x) // ReferenceError: x is not defined,let声明变量之前不可以使用该变量
let x = 10;
function foo(){
let x = 10;
var x = 20;
} // 报错
再比如:
function foo(){
let y = 10;
let y = 20;
} // 报错

var name = 'Q1mi' function foo(){
console.log(name)
if (false){
var name = 'Bob'
}
}
foo() // undefined

for (var i=0;i<5;i++){
console.log('哈哈');
}
console.log(i); // 5
ES6中的let声明变量的方式实际上就为JavaScript新增了块级作用域。

var name = 'Q1mi' function foo(){
console.log(name)
if (false){
let name = 'Bob'
}
}
foo() // Q1mi

此时,在foo函数内容,外层代码块就不再受内层代码块的影响。所以类似for循环的计数变量我们最好都是用let来声明。
const
const PI = 3.14;
全局对象的属性:
ES6规定:var命令和function命令声明的全局变量依旧是全局对象的属性;let命令、const命令和class命令声明的全局变量不属于全局对象的属性。
查看下面的示例代码:
var x = 10;
let y = 20;
window.x // 10
window.y // undefined
变量的解构赋值
ES6允许按照一定的模式,从数组或对象中提取值,对变量进行赋值,这种方式被称为解构赋值。
var [x, y, z] = [10, 20, 30]
x // 10
y // 20
z // 30
对象的解构赋值:
var {x, y} = {x: 10, y: 20}
x // 10
y // 20
箭头函数
箭头函数有个特点:
- 如果参数只有一个,可以省略小括号
- 如果不写return,可以不写大括号
- 没有arguments变量
- 不改变this指向

var person = {
name: 'Q1mi',
age:18,
func:function(){
console.log(this);
}
}
person.func() // person对象

和

var person = {
name: 'Q1mi',
age:18,
func:()=>{
console.log(this);
}
}
person.func() // window对象
vue2.0使用ES6语法的更多相关文章
- Vue2.0项目实战语法
一.安装配置依赖 1) vue init webpack-simple 项目名称 2) cnpm install 3 ) npm run dev 4 ) cnpm install vuex vue ...
- vue2.0 移动端,下拉刷新,上拉加载更多 插件
本人正在基于 vue2.0 + webpack + es6 搭建前端架构,整理了部分插件,下面这个是下拉更新 上拉更多的,挺好用的,分享给大家. 直接上代码,不懂的多看几遍,下面我换会告诉大家如何使用 ...
- vue 2.0 无法编译ES6语法
# vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础:ES6初体验 & 模块化编程
缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...
- Vue2.0中v-for迭代语法变化(key、index)【转】
转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...
- 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础:JS面向对象&字面量& this字
缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...
- vue2.0自学笔记
前言: 一.优点: 轻量级.高效率.上手快.简单易学.文档全面而简洁 二.功能: 1.模板渲染 2.模块化 3.扩展功能:路由.Ajax 三.课程包含: 1.Vue实例 2.Vue组件 3.Vue指令 ...
- 用webpack2.0构建vue2.0超详细精简版
初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1. ...
随机推荐
- Py修行路 python基础 (二十二)异常处理
异常处理 一.错误和异常 程序中难免出现错误,而错误分为两种:语言异常和逻辑异常 1.语法错误(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) for i in range ...
- Wireshark捕获非加密的数据包
启动监听模式 root@sch01ar:~# airmon-ng start wlan0 启动Wireshark工具 root@sch01ar:~# wireshark 选择接口,这里选择wlan0m ...
- 3.Periodic Tasks
celery beat是一个调度器,它可以周期内指定某个worker来执行某个任务.如果我们想周期执行某个任务需要增加beat_schedule配置信息. broker_url='redis:/ ...
- Python基础学习四 列表、元组、字典、集合
列表list,用中括号“[ ]”表示 1.任意对象的有序集合 列表是一组任意类型的值,按照一定顺序组合而成的 2.通过偏移读取 组成列表的值叫做元素(Elements).每一个元素被标识一个索引,第一 ...
- web优化
一个小型的网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构.性能的要求都很简单.随着互联网业务的不断丰富,网站相关的技术经过 ...
- C# ShowDialog时窗体贱传值得方法
用C#开发应用的时候,通常需要多个窗体!有时候为了打开窗体的时候禁止操作父窗体,我们一般采用模态对话框的方法,也算就是用ShowDialog()方法. 假设有两个窗体A和B,A作为主窗体使用ShowD ...
- 设置MongoDB课程环境
Setting Up Your Course Environment This course is designed to be very hands on. Virtually all of the ...
- NUMA微架构
NUMA微架构 written by qingran September 8th, 2011 no comment 现在开始补日志,逐步的扫清以前写了一半的和"欠账未还的".半年之 ...
- linux下安装sz/rz命令
参考 https://blog.csdn.net/kobejayandy/article/details/13291655
- 常用eclipse插件
http://dist.springsource.com/release/TOOLS/update/e4.4/ http://propedit.sourceforge.jp/eclipse/upda ...