1.背景

2.let与var与const的区别

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue18-es6语法之let与var与const的区别</title>

</head>

<body>

<h3>let与var的区别</h3>

<pre>

块级作用域

JS中使用var来声明一个变量时, 变量的作用域主要是和函数的定义有关.

针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题。

 const

在JavaScript中也是如此, 使用const修饰的标识符为常量, 不可以再次赋值.

</pre>

<h4>总结</h4>

变量建议使用let

常量使用 const

<h4>区别</h4>

var设计的作用域是一个函数,函数外不生效

let具有严谨的块级作用域,定义在一个大括号内,就只能在大括号内使用

const定义的常量不可用修改

<h4>建议</h4>

在ES6开发中,优先使用const, 只有需要改变某一个标识符的时候才使用let.

</body>

</html>

3.es6中对象增强写法

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>对象增强写法</title>

</head>

<body>

<h3>对象增强写法</h3>

<script>

  /*  1.对象*/

  let name = '李东平'

  let age = 18

  // 正常的写法

  let obj1 = {

    name: name,

    age: age

  }

  // es6的增强写法

  console.log("obj1=" + obj1)

  let obj2 = {

    name, age

  }

  console.log("obj2=" + obj2)

  /*  1.方法*/

  // 之前的写法

  let obj3 = {

    f1: function () {

      console.log("-----f1------")

    }

  }

  obj3.f1();

  // es6增强写法

  let obj4 = {

    f2() {

      console.log("----f2----------")

    }

  }

  obj4.f2();

</script>

</body>

</html>

完美！

vue之es6语法的更多相关文章

  1. .Vue 文件 ES6 语法 webstorm 中的一个识别Bug

    webstorm 2017 版本中即使安装了vue template file 设置了 js 语言为 es6 语法仍旧会出现识别不了划线的情况,苦寻很久,最后解决方式如下 <script typ ...

  2. vue 2.0 无法编译ES6语法

    # vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...

  3. .vue文件在webstorm中es6语法报错解决方法

    1 语法支持es6设置 Preferences > Languages & Frameworks > JavaScript 把 Javascript Language versio ...

  4. Webstorm添加新建.vue文件功能并支持高亮vue语法和es6语法

    转载:https://blog.csdn.net/qq_33008701/article/details/56486893 Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法 ...

  5. Vue（1）- es6的语法、vue的基本语法、vue应用示例，vue基础语法

    一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...

  6. webstorm中.vue报错(es6语法报错)-转

    1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript把 Javascript L ...

  7. [bug] VUE 的 template 中使用 ES6 语法导致页面空白

    如果你在 template 中,使用了 es6 及以上的语法,那么,在部分ios.安卓.微信浏览器中,打开页面后显示一片空白内容.如下: <ul id="example-1" ...

  8. webpack打包不识别es6语法的坑

    今天Vue项目npm run build 后webpack,报错uglifyjs,自己研究了一下,翻译过来,意思是不识别项目中写的高级语法,这里要把项目里es6语法转es5让浏览器识别, 也就是web ...

  9. ES6语法的学习与实践

    ES6是JavaScript语言的新一代标准,是ECMAScript的第六个版本,加入了很多新的功能和语法,在很多框架,如在使用Vue,React等框架的项目中一般都采用ES6语法来编写的,下面对经常 ...

  10. vue-i18n使用ES6语法以及空格换行问题

    1.运行报错 报错使用了不恰当的exports Uncaught TypeError : Cannot assign to read only property 'exports ' of objec ...

随机推荐

  1. 安装并使用 openssl 生成证书

    1. 安装 openssl参考链接: OpenSSL加密算法库使用系列教程_openssl算法哭调用-CSDN博客 安装包下载地址: 安装包下载地址(正常情况需要将 openssl 源码下载后, 自己 ...

  2. redis 锁

    demo1 public ErrorCode initDemo1(@RequestParam("orderNo") String orderNo) throws IOExcepti ...

  3. Task - lmdeploy

    基础作业: 使用 LMDeploy 以本地对话.网页Gradio.API服务中的一种方式部署 InternLM-Chat-7B 模型,生成 300 字的小故事(需截图

  4. [ABC184F] Programming Contest题解

    前置知识 meet in middle (折半搜索) 会的大佬请跳过 不会的请自己前往oi wiki或CSDN(百度吧,少年) 解题思路 纯暴力 看完题目考虑将每一种情况计算出来,排序后找不超过T的最 ...

  5. 基于NXP i.MX 8M Mini开发板规格书（四核ARM Cortex-A53 + 单核ARM Cortex-M4，主频1.6GHz）

     1 评估板简介 创龙科技TLIMX8-EVM-B是一款基于NXP i.MX 8M Mini的四核ARM Cortex-A53 + 单核ARM Cortex-M4异构多核处理器设计的高性能评估板,由核 ...

  6. Spring5.X的bean的scope作用域

    scope属性 singleton:单例,默认值,调用getBean方法返回是同一个对象,实例会被缓存起来,效率比较高,当一个bean被标识为singleton时候,spring的IOC容器中只会存在 ...

  7. 在Winform程序中增加隐藏的按键处理，用于处理一些特殊的界面显示或者系统初始化操作

    以前,我看到一个朋友在对一个系统做初始化的时候,通过一组魔幻般的按键,调出来一个隐藏的系统设置界面,这个界面在常规的菜单或者工具栏是看不到的,因为它是一个后台设置的关键界面,不公开,同时避免常规用户的 ...

  8. 第二部分：关键技术领域的开源实践【内网穿透FRP】

    FRP简介 FRP(Fast Reverse Proxy)作为一种高性能的内网穿透工具,支持 TCP.UDP.HTTP.HTTPS 等多种协议.可以将内网服务以安全.便捷的方式通过具有公网IP节点(云 ...

  9. 推荐王牌远程桌面软件Getscreen,所有的远程桌面软件中使用最简单的一个

    今天要推荐的远程桌面软件就是这款叫Getscreen的,推荐理由挺简单: 简单易用:只需要两步就能轻松连上远程桌面 第一步:在需要被远程连接的机器上下载它的Agent程序并启动,点击Send获得一个链 ...

  10. KubeCube 用户管理与身份认证

    前言 KubeCube (https://kubecube.io) 是由网易数帆近期开源的一个轻量化的企业级容器平台,为企业提供 kubernetes 资源可视化管理以及统一的多集群多租户管理功能.K ...