学习前准备

🎈ES6简单语法

🍿let和const

// 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 声明常量，一旦声明，立即初始化，不能重复声明。

🍿模板字符串

var a = 1;
var b = 2;
// 传统方式使用+拼接，太过繁琐，易错
// var str = "哈哈哈哈" + a + "嘿嘿嘿" + b;   

//es6中模板字符串方式``加${变量名或值}
var str = `哈哈哈哈${a}嘿嘿嘿${b}`;

console.log(str);

🍿箭头函数

// function(){} === ()=>{}

// 1.this的指向发生改变，指向了定义对象时的对象（注意）
// 2.arguments不能使用

🍿对象的单体模式

var person = {
    name:'张三',
    age: 18,
    //下面是用对象的单体模式写的
    fav(){
        console.log(this);
    }
}
person.fav();

🍿面向对象

//  构造函数的方式创建对象
//  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)

其实上面的创建对象的方式在es6中用class如下：

class Animal{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    showName(){
        // 一定不要加逗号
        console.log(this.name)
    }
}
var d = new Animal('张三',19);

d.showName();

🎈前端开发知识介绍

🍿nodejs和npm

1. 去官网https://nodejs.org/en/download/ 下载 安装(傻瓜式安装)

2. 打开终端 cmd : 执行node -v 如果出现版本号，证明安装node成功 ，跟安装python雷同

3. 下载完node之后，会自带包管理器 npm，好比 是python中 pip3包管理器。pip3 install xxx

4. 使用npm

   1. 要初始化npm的项目 :

      npm init --yes 自动生成一个package.json文件

      ​```javascript
      {
      
          "name": "vue_lesson",
      
          "version": "1.0.0",
      
          "description": "这是我的vue的第一个项目",
      
          "main": "index.js", //入口文件
      
          "scripts": {
      
            "test": "echo "Error: no test specified" && exit 1"
      
          },
      
          "author": "qiaofu",
      
          "license": "ISC",
      
          "dependencies": {
      
            "vue": "^2.5.16"   //依赖
      
          }
      
        }
      
      ​
      

      ```

      2.下载依赖包，例如：

   ​ npm install vue --save ​ npm install jquery --save

   3.卸载包

   ​ npm uninstall vue --save

   4.下载所有的依赖包

   ​ npm install

🍿webpack和Babel

webpack作为一个打包工具，其作用是将开发的文件打包成固定格式的文件，放在服务器上，如图：

Babel则是作为一个编译工具，由于许多浏览器可能不支持es6+语法，开发者开发时不需要考虑编译过程，只需安装上Babel就会自动将es6+语法编译为浏览器可以识别的js语法,网上也有在线编译的网站：