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 ...
随机推荐
- webView之可加载JavaScript
有两个方法 方法一: 首先就是在xml文件中添加webview标签很简单不用说明 初始化控件 private WebView wv= (WebView) findViewById(R.id.wv); ...
- HDU 5506：GT and set bitset+暴力
GT and set Accepts: 35 Submissions: 194 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 655 ...
- 三、多线程基础-自旋_AQS_多线程上下文
1. 自旋理解 很多synchronized里面的代码只是一些很简单的代码,执行时间非常快,此时等待的线程都加锁可能是一种不太值得的操作,因为线程阻塞涉及到用户态和内核态切换的问题.既然sync ...
- 搭建solr集群的时候出现 ./zkcli.sh:行13: unzip: 未找到命令
主要的原因是: linux系统下面没有安装压缩解压工具 zip 和 unzip:需要我们自己手动的安装: 利用yum命令安装即可: yum install -y unzip zip
- 关于C/C++的各种优化
一.常量 声明常量可以方便代码的修改,提高复用性. ; +; ; 同时,声明常量也可以减少重复运算,提高代码速度,例子如下: string s; cin>>s; ;i<len;i++ ...
- 嵊州普及Day5T2
题意:将(w,h)的纸条折成(W,H),最少需几步. 思路:横竖互不干扰,然后最多可折int型一半,拿个函数判断两次比较即可,然后折不了的条件是需要的矩形大于给的矩形. 见代码: #include&l ...
- Jquery实现列表增删改
//需求:对列表的增删改 //代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- poj 3069 Saruman's Army 贪心模拟
Saruman's Army Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 18794 Accepted: 9222 D ...
- vue - 子组件向父组件 传递方法和参数
1,子组件 TodoItem.vue : <template> <div class="todo-item" :class="{'is-compl ...
- Ubuntu安装Orcale
Linux_Ubuntu安装oracle总结 ---------转自 https://www.2cto.com/database/201305/215338.html 话说我花了一晚上才在ubuntu ...