一. es6语法
http://es6.ruanyifeng.com/
http://es6.ruanyifeng.com/#docs/module-loader Module 的加载实现
什么是ECMAScript，以及es6的诞生？ 1997年 ECMAScript 1.0 诞生 1999年12月 ECMAScript 3.0诞生，它 是一个巨大的成功，在业界得到了广泛的支持，它奠定了JS的基本语法，被其后版本完全继承。
直到今天，我们一开始学习JS，其实就是在学3.0版的语法 2000年的ECMAScript4.0是当下ES6的前身，但由于这个版本太过激烈，对ES3做了彻底升级，所以暂时被“和谐”了 2009年12月，ECMAScript5.0版正式发布。ECMA专家组预计ECMAScript的第五个版本会在2013年中期到2018年作为主流的开发标准。2011年6月，
ES5.1版发布，并且成为ISO国际标准 2013年，ES6草案冻结，不再添加新的功能，新的功能将被放到ES7中；2015年6月，ES6正式通过，成为国际标准 好的，介绍es6的诞生，我们简单来学几个es6的语法，仅仅的只是为了后面咱们vue的课程做课前准备。如果感兴趣的同学可以查看
https://www.cnblogs.com/majj/p/9041582.html ES6基本语法使用
https://www.cnblogs.com/haiyan123/p/8361470.html ES6基本语法使用
对象的单体模式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> var person = { name:'张三', 属性 age: 18, fav(){ 方法 console.log(this,"111111111111"); } } person.fav(); 调用方法 </script> </body> </html>
面向对象ES6和javascript
https://www.cnblogs.com/chaixiaozhi/p/8515087.html javascript 面向对象(实现继承的几种方式)
https://www.cnblogs.com/shizk/p/9561997.html javaScript面向对象是什么？（一）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
javascript 面向对象构造函数 使用
// 构造函数的方式创建对象
function Animal(name,age){
this.name = name; 初始化属性
this.age = age;
}
// 给上面构造函数添加方法
Animal.prototype.showName = function(){
console.log(this.name);
}
// 给上面构造函数添加方法
Animal.prototype.showName2 = function(){
console.log(this.name);
}
// 给上面构造函数添加方法
Animal.prototype.showName3 = function(){
console.log(this.name);
}
// 给上面构造函数添加方法
Animal.prototype.showName4 = function(){
console.log(this.name);
}
// 给上面构造函数添加创建实例
var dog = new Animal('日天',18)
console.log("*********************************************************************************")
ES6 面向对象(构造器函数)使用
class Animal{
constructor(name,age){
this.name = name; 初始化属性
this.age = age;
}
// 方法
showName(){
// 一定不要加逗号
console.log(this.name)
}
}
var d = new Animal('张三',19); //实例 对象
d.showName();
</script>
</body>
</html>
模板字符串拼接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> var a = 1; var b = 2; // var str = "哈哈哈哈" + a + "嘿嘿嘿" + b; var str = `哈哈哈哈${a}嘿嘿嘿${b}`; console.log(str); </script> </body> </html>
01-let和const
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script type="text/javascript"> // let声明变量块级作用域,不能重复声明 // let声明的变量 是块级作用域,不能重复声明 // { // // let a = 12; // let a = 12; // let a = 13; // } // console.log(a); // var a = []; // for (let i = 0; i < 10; i++) { // a[i] = function () { // console.log(i); // }; // } // a[6](); // 6 10 // 不存在变量提升 console.log(foo); // 输出undefined var foo = 2; // const 声明常量，一旦声明，立即初始化，不能重复声明。 </script> </body> </html>
二.VUE.框架介绍
一、什么是VUE？
它是构建用户界面的JavaScript框架（让它自动生成js,css，html等）
https://www.cnblogs.com/haiyan123/p/8352742.html vue
https://www.cnblogs.com/pythonywy/p/11568799.html vue
三. VUE调试工具
https://www.cnblogs.com/sandaizi/p/11582610.html Vue开发调试神器 vue-devtools
https://blog.csdn.net/versionli/article/details/83147047 Vue.js devtools chrome 的安装详细步骤