vue学习（一）ES6常用语法
1 ES6常用语法
1.1 变量提升
例①
# 变量提升
<div id="app">
</div>
<script>
console.log(age); # undefined
var age = 18;
console.log(age) # 18
</script>
例②
# 变量提升
<div id="app">
</div>
<script>
function aa() {
console.log(xiaoqiang) # undefined
if (1){
var xiaoqiang = 'qiang';
console.log(xiaoqiang) # qiang
}
}
aa()
</script>
例③
# 例②的引申 let
<body>
<div id="app">
</div>
<script>
function aa() {
// console.log(xiaoqiang); # 报错
if (1){
let xiaoqiang = 'qiang'; # let 块级作用域
console.log(xiaoqiang) # qiang
}
}
aa()
</script>
</body>
例④
<body>
<div id="app">
</div>
<script>
const s12 = 'high';
console.log(s12) # high
-------------------------------
const s12 = 'high';
const s12 = 'high1';
console.log(s12) # 报错
</script>
</body>
# const 定义一个不变的变量
1.2 模板字符串
<body>
<div id="app">
</div>
<script>
# 反引号与一般引号的区别
var ele = document.getElementById('app');
-------------------------------------
ele.innerHTML = '<ul>' +
'<li>1</li>' +
'<li>2</li>' +
'<li>3</li>' +
'</ul>';
-------------------------------------
ele.innerHTML = `
<ul>
<li>1</li>
<li>2</li> # 形式一
<li>3</li>
</ul>`
-------------------------------------
var xiao = 'qiang';
var age = 18;
var hobby = 'learn';
ele.innerHTML = `
<ul>
<li>${xiao}</li>
<li>${age}</li> # # 形式二
<li>${hobby}</li>
</ul>`
</script>
</body>
1.3 数据的解构
<script>
# 对象
let obj = {
name : 'xiaoqiang',
age:18
};
# 类似于python的**打散
let {name,age}=obj; # 要用一个对象{}来接收
console.log(name);
console.log(age)
</script>
<script>
# 数组
let arry = ['s','12'];
let [a,b] = arry;
console.log(a);
console.log(b)
</script>
1.4 箭头函数
* 1
<script>
let jiantou = x => x+1;
console.log(jiantou(5)) # 6
// 省略了function关键字
// 省略了return返回值
</script>
* 2
<script>
function aa() {
console.log(this) # this的用法
# 打印出的是window
}
aa()
</script>
# 函数的调用的全局的 window调用
* 3
<script>
function aa() {
console.log(this) # {name: "xiaoqiang", aa: ƒ}
}
aa();
let obj = {
name : 'xiaoqiang',
aa:aa
};
obj.aa()
</script>
* 4
<script>
function aa() {
console.log(this) ###
}
aa();
let obj = {
name : 'xiaoqiang',
aa:aa
};
let obj2 = {
name: 'xiaoxiaoqiang',
obj:obj
};
obj.aa();
obj2.obj.aa()
</script>
# this 取决于函数最近的调用者
1.5 类
* 1 单纯的类
<script>
# 定义类要是class，一定要加constructor
class Student{
constructor(){
this.name = 'xiaoqiang';
}
says(say){
console.log(this.name + 'says'+ say)
}
}
// 实例化 要加 new；调用
let xiaoxiao = new Student();
xiaoxiao.says('I love China')
</script>
* 2 类的继承
<script>
----------------------------------------
class Student{
constructor(){
this.name = 'xiaoqiang';
}
says(say){
console.log(this.name + 'says'+ say)
}
}
// 实例化 要加 new；调用
let xiaoxiao = new Student();
xiaoxiao.says('I love China')
----------------------------------------
## ↓ 继承 constructor会报错，要加super
class Stu extends Student{
constructor(){
super();
this.name = 'ganggang'
}
}
let gang = new Stu()
gang.says('Me too')
</script>
1.6 模块
后期补
vue学习（一）ES6常用语法的更多相关文章
- ES6常用语法
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...
- ES6常用语法简介import export
ES6常用语法简介import export let与var用法区别 //var var a = []; for (var i = 0; i < 10; i++) { a[i] = functi ...
- ES5与ES6常用语法教程之 ②解构语法糖、声明变量异同
js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语法教程(3) es5与es6常用语法教程(4) es5与es6常用语法教程(5) es ...
- ES6 常用语法知识汇总
ES6模块化如何使用,开发环境如何打包? 1.模块化的基本语法 /* export 语法 */ // 默认导出 export default { a: '我是默认导出的', } // 单独导出 exp ...
- Vue小白篇 - ES6的语法
为什么要学 ES6 的语法呢? 因为 Vue 语法有很多都是 ES6(ECMAScript 6),这里推荐 [阮一峰 ECMAScript 6 入门]: http://es6.ruanyifeng.c ...
- Vue学习2：模板语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ES6常用语法总结
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015.也就是说,ES6就是ES2015.虽 ...
- ES5与ES6常用语法教程之 ③模板字符串、判断字符串是否包含其它字符串
这部分教程我们主要讲解以下几个常用语法 模板字符串 带标签的模板字符串 判断字符串中是否包含其他字符串 给函数设置默认值 模板字符串 老式的拼接字符串方法 let dessert = '
- es6常用语法学习笔记
1.let和const的常规使用 let声明的变量不存在预解析 let声明的变量不允许重复使用(在同一个作用域内) ES6引入了块级作用域{},块内部定义的变量,在外部是不可以访问到的 使用let在f ...
随机推荐
- Linux命令：date命令
date命令作用:显示和设置系统的日期和时间 一.设置系统日期时间 格式:date [MMDDhhmm[[CC]YY][.ss]] 举例:将当前系统时间改为 2020年10月1日12点10分 # da ...
- vue2 Excel导出数据 js-xlsx的使用
vue2 Excel导出数据 js-xlsx的使用 https://www.jianshu.com/p/ea115a8e9107 小世界最温暖 关注 2018.11.19 16:08 字数 280 阅 ...
- 《O’Reilly精品图书系列共21册》azw3
套装书目: <机器学习:实用案例解析> <利用Python进行数据分析> <社交网站的数据挖掘与分析(原书第2版)> <社会网络分析:方法与实践> &l ...
- 牛客NOIPtg day5 B-demo的gcd
一句话题意:给定长度为n的序列,求任意两两之间gcd的积mod 998244353的值. 好像是莫比乌斯反演板子题???(反正noip估计不考这种毒瘤 考场上想到一个类似正解的思路 好像摊下来最多处理 ...
- LIS问题
LIS定义LIS(Longest Increasing Subsequence)最长上升子序列 .一个数的序列bi,当b1 < b2 < … < bS的时候,我们称这个序列是上升的. ...
- CSP-S 2019 复赛游记
自闭游记 >_< Day 0 随便敲了一些板子 当然打了摆. 奶人的话写满了俩黑板啊,没人奶我可海星. 晚上没怎么打摆,随便敲了几道板子,然后很早就回去睡了. Day 1 平静地出发了.. ...
- 厉害了！SpringBoot是如何动起来的！
程序入口 SpringApplication.run(BeautyApplication.class, args); 执行此方法来加载整个SpringBoot的环境. 1. 从哪儿开始? Spring ...
- 070、Java面向对象之深入贯彻对象引用传递
01.代码如下: package TIANPAN; class Book { // 定义一个新的类 String title; // 书的名字 double price; // 书的价格 public ...
- swoole之建立 http server
一.代码部分 <?php /** * 传统:nginx <-> php-fpm(fast-cgi process manager) <-> php * swoole:ht ...
- vue 线上，本地，不同变量配置
线上的接口和本地的接口不一样,每次打包的时候要手动更改很麻烦.自动让他配置 1.修改package.json --mode line 传参数line给配置项,编译buildline的时候,就能把li ...