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. Css var 的基础使用

    Css var 语法 var(custom-property-name, value) - custom-property-name 必须 变量必须以 --开头 后面可以是英文.数字连接符,区分大小写 ...

  2. OpenCompass 作业

    Smiling & Weeping ---- 愿我们都做生活的高手 -- 昭阳&乐瑶

  3. 交通规划四阶段法：基于 Python 的交通分布预测算法复现 - 附完整代码链接

    目录 交通规划四阶段法:基于 Python 的交通分布预测算法复现 - 附完整代码链接 我只是想使用这些代码 下载代码文件 代码的使用方法 合作 部分代码内容的展示 交通规划四阶段法:基于 Pytho ...

  4. 13-flex

    01 flex2个重要的概念 02 flex布局模型 03 flex相关属性 04 flex container相关属性 4.1 flex direction 不同的值会改变主轴的方向 4.2 fle ...

  5. Nuxt3 的生命周期和钩子函数（四）

    title: Nuxt3 的生命周期和钩子函数(四) date: 2024/6/28 updated: 2024/6/28 author: cmdragon excerpt: 概述了Nuxt3的六个关 ...

  6. EC热键问题

    EC热键问题 ec 问题描述 ACPI事件监控 按键监控 UDEV事件监控 kprobe探测 初步总结热键功能流程 调试记录 PS2 问题描述 系统无触摸板打开和关闭的提示 已知热键功能 快捷键 功能 ...

  7. PHP 真的不行了？透过 PHP 的前世今生看真相

    大家好,我是码农先森. 1994年我出生在湖南的农村,就在同年加拿大的拉斯姆斯·勒多夫创造了 PHP,这时的 PHP 还只是用 Perl 编写的 CGI 脚本.或许是时间的巧合 PHP 变成了我后半生 ...

  8. Vue2 整理（二）：核心篇（组件化开发）

    前言 上一篇连接:vue2 整理:基础篇. 组件化开发 组件概念 组件,对于学Java的人来说的话,这个词所要表达的意思再熟悉不过了. 所谓组件就是:面向对象中的抽象.封装思想:而所谓的组件化就是:把 ...

  9. mac idea 设置类注解说明

    类注解 打开file->setting->Editor->File and Code Templates->Includes->File Header #if (${PA ...

  10. SpringBoot注解配置文件映射属性和实体类

    配置文件加载 方式一 Controller上面配置@PropertySource({"classpath:pay.properties"}) 添加属性@Value("wx ...