一. web框架-----------ES6语法和VUE介绍(一)
一. 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 的安装详细步骤