一、es6的基本语法
1.let是局部作用域,let代码块内部生效,外部不能使用这个变量
if (1){
let b = 'xxx';
}
console.log(b); //报错
if (1){
var a = 'xxx';
}
console.log(a); //xxx 可以使用,但是函数不行
2.不存在变量提升
console.log(xx); //undefined
var xx = 'oo';
console.log(xxx); //报错
let xxx = 'ooo';
3.不能重复声明（var可以重复声明）
4.let声明的全局变量不从属于window对象，var声明的全局变量从属于window对象
-
ES5声明变量只有两种方式：var和function。
-
ES6有let、const、import、class再加上ES5的var、function共有六种声明变量的方式。
-
还需要了解顶层对象：浏览器环境中顶层对象是window.
-
ES5中，顶层对象的属性等价于全局变量。var a = 10; window.a
ES6中，有所改变：var、function声明的全局变量，依然是顶层对象的属性；let、const、class声明的全局变量不属于顶层对象的属性，也就是说ES6开始，全局变量和顶层对象的属性开始分离、脱钩，目的是以防声明的全局变量将window对象的属性造成污染，因为window对象是顶层对象，它里面的属性是各个js程序中都可以使用的，不利于模块化开发，并且window对象有很多的自有属性，也为了防止对window的自由属性的污染，所以在ES6中将顶层对象和全局变量进行隔离。 -
const 特点： 1.局部作用域 2.不存在变量提升 3.不能重复声明 4.一般声明不可变的量
const pi = 3.1415926; -
模板字符串:tab键上面的反引号，${变量名}来插入值
let bb = 'jj'; var ss = `你好${bb}`; console.log(ss); -- '你好jj'
前端的一道面试题(自行忽略)
let len = 10;
function fn() {
console.info(this.len)
}
fn(); //undefined
let Person = {
len: 5,
say: function() {
fn(); //undefined
arguments[0](); //undefined arguments是object类型，它内部以索引取值获取的函数执行时，会以箭头函数的形式执行，所以执行console.info(this.len) 这个this指向的其实是arguments对象，arguments对象有length属性，但是没有len属性，length属性是传入的实参个数
}
}
Person.say(fn);
二、es5全局和局部变量和作用域
1.函数的全局变量和局部变量
局部变量：
在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
全局变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
2.变量生存周期
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
三、es5和es6的函数对比
1.ES5写法
function add(x){
return x
}
add(5);
2.匿名函数
var add = function (x) {
return x
};
add(5);
3.ES6的匿名函数
let add = function (x) {
return x
};
add(5);
4.ES6的箭头函数,就是上面方法的简写形式
let add = (x) => {
return x
};
console.log(add(20));
// 更简单的写法，但不是很易阅读
let add = x => x;
console.log(add(5));
多个参数的时候必须加括号，函数返回值还是只能有一个，没有参数的，必须写一个()
let add = (x,y) => x+y;
四、自定义对象中封装函数的写法
1.es5对象中封装函数的方法
var name = '子俊';
var person1 = {
name:'超',
age:18,
f1:function () {
//在自定义的对象中放函数的方法
console.log(this);//this指向的是当前的对象,{name: "超", age: 18, f1: ƒ}
console.log(this.name) // '超'
}
};
//<h1 id='d1'>xxx</h1>
//document.getElementById('d1').onclick = function(){this.innerText;};
person1.f1(); //通过自定对象来使用函数
2.ES6中自定义对象中来封装箭头函数的写法
let username = '子俊'; //-- window.username
let person2 = {
name:'超',
age:18,
//f1:function(){};
f1: () => {
//在自定义的对象中放函数的方法
console.log(this); //this指向的不再是当前的对象了，而是指向了person的父级对象(称为上下文)，而此时的父级对象是我们的window对象，Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
console.log(window);//还记得window对象吗，全局浏览器对象，打印结果和上面一样：Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
console.log(this.username) //'子俊'
}
};
person2.f1(); //通过自定对象来使用函数
person2 -- window.person2
//而我们使用this的时候，希望this是person对象，而不是window对象，所以还有下面这种写法
let person3 = {
name:'超',
age:18,
//f1:function(){};
//f1(){}
f1(){
//相当于f1:function(){},只是一种简写方式,称为对象的单体模式写法，写起来也简单，vue里面会看用到这种方法
console.log(this);//this指向的是当前的对象,{name: "超", age: 18, f1: ƒ}
console.log(this.name) //'超'
}
};
person3.f1()
五、es5和es6的类写法对比（了解）
<script>
//es5写类的方式
function Person(name,age) {
//封装属性
this.name = name; //this--Python的self
this.age = age;
}
//封装方法，原型链
Person.prototype.f1 = function () {
console.log(this.name);//this指的是Person对象, 结果：'超'
};
//封装方法，箭头函数的形式写匿名函数
Person.prototype.f2 = ()=>{
console.log(this); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} this指向的是window对象
};
var p1 = new Person('超',18);
p1.age
p1.f1();
p1.f2();
//其实在es5我们将js的基本语法的时候，没有将类的继承，但是也是可以继承的，还记得吗，那么你想，继承之后，我们是不是可以通过子类实例化的对象调用父类的方法啊，当然是可以的，知道一下就行了，我们下面来看看es6里面的类怎么写
class Person2{
constructor(name,age){
//对象里面的单体模式，记得上面将函数的时候的单体模式吗，这个方法类似于python的__init__()构造方法，写参数的时候也可以写关键字参数 constructor(name='超2',age=18)
//封装属性
this.name = name;
this.age = age;
} //注意这里不能写逗号
showname(){
//封装方法
console.log(this.name);
} //不能写逗号
showage(){
console.log(this.age);
}
}
let p2 = new Person2('超2',18);
p2.showname() //调用方法 '超2'
//es6的类也是可以继承的，这里咱们就不做细讲了，将来你需要的时候，就去学一下吧，哈哈，我记得是用的extends和super
</script>
六、vue使用
1.vue.js库的下载
vue.js是目前前端web开发最流行的工具库，由尤雨溪在2014年2月发布的。
另外几个常见的工具库：react.js /angular.js
官方网站：
中文：https://cn.vuejs.org/
英文：https://vuejs.org/
官方文档：https://cn.vuejs.org/v2/guide/
vue.js目前有1.x、2.x和3.x 版本，我们学习2.x版本的。2.x到3.x是平滑过渡的，也就是说你之前用2.x写的代码，用3.x的版本的vue.js也是没问题的。
2.vue.js库的基本使用
在github下载：https://github.com/vuejs/vue/releases
在官网下载地址： https://cn.vuejs.org/v2/guide/installation.html
vue的引入类似于jQuery，开发中可以使用开发版本vue.js，产品上线要换成vue.min.js。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- {
{ message }} 表示把vue对象里面data属性中的对应数据输出到页面中 -->
<!-- 在双标签中显示数据要通过{
{ }}来完成 -->
<p>{
{ message }}</p>
</div>
</body>
<script>
// vue.js的代码开始于一个Vue对象。所以每次操作数据都要声明Vue对象开始。
let vm = new Vue({
el:'#app', // 设置当前vue对象要控制的标签范围。
// data属性写法方式1
data:{
// data是将要展示到HTML标签元素中的数据。
message: 'hello world!',
}
// 方式2
// data:function () {
// return {
// 'msg':'掀起你的盖头来1！'
// }
// }
// 方式3
data(){
// 单体模式 这种写法用的居多，并且后面学习中有个地方一定要这样写，所以我们就记下来这种写法就可以了
return {
'msg':'掀起你的盖头来2！',
}
}
});
</script>
</html>
总结：
1. vue的使用要从创建Vue对象开始
var vm = new Vue();
2. 创建vue对象的时候，需要传递参数，是自定义对象，自定义对象对象必须至少有两个属性成员
var vm = new Vue({
el:"#app",
data: {
数据变量:"变量值",
数据变量:"变量值",
数据变量:"变量值",
},
});
el:圈地，划地盘，设置vue可以操作的html内容范围，值就是css的id选择器,其他选择器也可以，但是多用id选择器。
data: 保存vue.js中要显示到html页面的数据。
3. vue.js要控制器的内容外围，必须先通过id来设置。
<div id="app">
<h1>{
{message}}</h1>
<p>{
{message}}</p>
</div>
3.vue中变量进行一些简单直接的js操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test vue</title>
</head>
<body>
<div id="app">
<!-- vue的模板语法，和django的模板语法类似 -->
<h2>{
{ msg }}</h2> <!-- 放一个变量，会到data属性中去找对应的值 -->
<!-- 有人说，我们直接这样写数据不就行吗，但是你注意，我们将来的数据都是从后端动态取出来的，不能写死这些数据啊，你说对不对 -->
<h2>{
{ 'hello beautiful girl!' }}</h2> <!-- 直接放一个字符串 -->
<h2>{
{ num+1 }}</h2> <!-- 四则运算 -->
<h2>{
{ 2+1 }}</h2> <!-- 四则运算 -->
<h2>{
{ {'name':'chao'} }}</h2> <!-- 直接放一个自定义对象 -->
<h2>{
{ person.name }}</h2> <!-- 下面data属性里面的person属性中的name属性的值 -->
<h2>{
{ 1>2?'真的':'假的' }}</h2> <!-- js的三元运算 -->
<h2>{
{ msg2.split('').reverse().join('') }}</h2> <!-- 字符串反转 -->
</div>
<!-- 1.引包 -->
<script src="vue.js"></script>
<script>
//2.实例化对象
new Vue({
el:'#app',
data:{
msg:'黄瓜',
person:{
name:'超',
},
msg2:'hello Vue',
num:10,
}
})
</script>
</body>
</html>
4.vue.js的M-V-VM思想
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。
Model 指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。
View 指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。
ViewModel（数据驱动视图） 指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接 View 和Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
// 创建vm对象
var vm = new Vue({
el: "#app",
data: {
name:"大标题",
age:16,
},
})
}
</script>
</head>
<body>
<div id="app">
<!-- 在双标签中显示数据要通过{
{ }}来完成 -->
<h1>{
{name}}</h1>
<p>{
{age}}</p>
<!-- 在表单输入框中显示数据要使用v-model来完成，模板语法的时候，我们会详细学习 -->
<input type="text" v-model="name">
</div>
</body>
</html>
在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据
console.log(vm.$el) # #box vm对象可以控制的范围
console.log(vm.$data); # vm对象要显示到页面中的数据
console.log(vm.message);# 这个 message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,message只是举例.
总结：
1. 如果要输出data里面的数据作为普通标签的内容，需要使用{
{ }}
用法：
vue对象的data属性：
data:{
name:"小明",
}
标签元素：
<h1>{
{ name }}</h1>
2. 如果要输出data里面的数据作为表单元素的值，需要使用vue.js提供的元素属性v-model
用法：
vue对象的data属性：
data:{
name:"小明",
}
表单元素：
<input v-model="name">
使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值，则data里面对应数据的值也会随之发生改变，甚至，页面中凡是使用了这个数据都会发生变化。
七、Vue指令系统的常用指令
1.文本指令v-html和v-text
v-text相当于js代码的innerText，相当于我们上面说的模板语法，直接在html中插值了，插的就是文本，如果data里面写了个标签，那么通过模板语法渲染的是文本内容，这个大家不陌生，这个v-text就是辅助我们使用模板语法的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test vue</title>
</head>
<body>
<div id="app">
<!-- vue的模板语法 -->
<div>{
{ msg }}</div>
<div v-text="msg"></div>
<div v-html="msg"></div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
//记着data中是一个函数，函数中return一个对象，可以是一个空对象，但必须return
return{
msg:'<h2>超</h2>', //后端返回的是标签，那么我们就可以直接通过v-html渲染出来标签效果
}
}
})
</script>
</body>
</html>
指令会在vm对象的data属性的数据发生变化时，会同时改变元素中的其控制的内容或属性。
因为vue的历史版本原因，所以有一部分指令都有两种写法：
vue1.x写法 vue2.x的写法
v-html ----> {
{ }} # vue2.x 也支持v-html
v-bind:属性名 ----> :属性
v-on:事件名 ----> @事件名
2.条件渲染指令v-if和v-show
vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。
1)v-if
标签元素：
<!-- vue对象最终会把条件的结果变成布尔值 -->
<h1 v-if="ok">Yes</h1>
data数据：
data:{
ok:false // true则是显示，false是隐藏
}
2)v-else
v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
标签元素：
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
data数据：
data:{
ok:false // true则是显示，false是隐藏
}
3)v-else-if
可以出现多个v-else-if语句，但是v-else-if之前必须有一个v-if开头。后面可以跟着v-else，也可以没有。
标签元素：
<h1 v-if="num===1">num的值为1</h1>
<h1 v-else-if="num===2">num的值为2</h1>
<h1 v-else>num的值是{
{num}}</h1>
data数据：
data:{
num:2
}
4)v-show
标签元素：
<h1 v-show="ok">Hello!</h1>
data数据：
data:{
ok:false // true则是显示，false是隐藏
}
总结v-if和v-show
v-show后面不能v-else或者v-else-if
v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[DOM操作中的remove]
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
3.操作属性v-bind
格式：
<标签名 :标签属性="data属性"></标签名>
<p :title="str1">{
{ str1 }}</p> <!-- 也可以使用v-html显示双标签的内容，{
{ }} 是简写 -->
<a :href="url2">淘宝</a>
<a v-bind:href="url1">百度</a> <!-- v-bind是vue1.x版本的写法 -->
3.事件绑定v-on和methods属性
有两种事件操作的写法，@事件名 和 v-on:事件名
<button v-on:click="num++">按钮</button> <!-- v-on 是vue1.x版本的写法 -->
<button @click="num+=5">按钮2</button>
总结：
1. 使用@事件名来进行事件的绑定
语法：
<h1 @click="num++">{
{num}}</h1>
2. 绑定的事件的事件名，全部都是js的事件名：
@submit ---> onsubmit
@focus ---> onfocus
密码明文密文切换效果：配合v-on事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input :type="type" v-model="xxx">
<button @click="f1">{
{tip}}</button>
</div>
</body>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el:'#app', //圈地,划分vue的控制区域
data(){
//数据属性写法,后面学的组件必须这样写
return {
tip:'睁眼',
xxx:'',
type:'password'
}
},
methods:{
// f1:function(){}
f1() {
//单体模式
if (this.type === 'password'){
this.type='text';
this.tip = '闭眼';
}
else {
this.type='password';
this.tip = '睁眼';
}
}
}
})
</script>
</html>
商品增加减少数量
步骤：
1. 给vue对象添加操作数据的方法
2. 在标签中使用指令调用操作数据的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<!--<button @click="num++">+</button>-->
<button @click="add">+</button>
<input type="text" v-model="num">
<!-- <button @click="num--">-</button> -->
<button @click="sub">-</button>
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
num:0,
},
methods: {
// add(){
// this.num++
// },
// sub(){
// if (this.num > 0){
// this.num--
// }
//
//
// }
}
})
</script>
</body>
</html>