vue（1）

知识铺垫：

ES6语法：

1. let 和 const

1 ES6中，可用 let和 const 声明变量
2 let 声明的变量是：块级作用域（通常用于for 循环中）；不能重复声明；不存在变量提升
3 const 声明一个只读的常量；一旦声明，常量的值就不能改变；并且const一旦声明变量，就必须立即初始化，不能留到以后赋值（只声明不赋值会报错）

2. 模板字符串语法：

var a = 1;
var b = 2;

var str = `哈哈哈${a}嘿嘿嘿${b}`;  // 反引号

3. 箭头函数：

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

//无形参
var f = () => 5;
// 等同于
var f = function () { return 5 };

//多个形参
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};


// 箭头函数有几个使用注意点（坑）：
// （1）函数体内的this对象，就是定义时所在的对象（指向window），而不是使用时所在的对象。
// （2）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

4. 对象的单体模式：

var person = {
        name:'小马哥',
        age:12,
        fav(){
            console.log(this.name,this.age);
        }
      }
 person.fav();

// fav:function(){}  等价于 fav(){} （该函数可以使用 this；解决了箭头函数的第一个问题）

5. ES6 引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

class Animal{
            
            // 构造器  当你创建实例之后 constructor()方法会立刻调用 通常这个方法初始化对象的属性
            constructor(name,age){
                this.name = name;
                this.age = age;
            }
            showName(){
                console.log(this.name);
            }
        }
        var a2 = new Animal('点点',3);

// 上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。也就是说，ES5 的构造函数Animal，对应 ES6 的Animal类的构造方法。
// Animal类除了构造方法，还自己定义了一个showName方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。

6. 模块化 esModule

// 一个js文件就是一个模块
export default xxx
import xxx from yyy

7. 前端工具:

(1) webpack：打包机；它能将我们的html,css,js,png,font 等进行打包，交给服务器
作用：html压缩、css压缩、js压缩、js进行混淆、图片压缩等

(2) nodejs：服务器语言

命令：
npm init   // 初始化项目（自动生成一个文件 package.json）；如果想立即生成 package.json ===> npm init --yes
npm install 包名称  --save  // 下载包 （--save 意味着 项目依赖）
npm install webpack --save-dev  // 下载开发依赖

当拿到一个新的项目时：
1. cd 当前目录
2. npm install  // 下载 node_module ; 如果 npm install 报错，先运行 npm rebuild

npm run dev // 启动当前项目服务器；运行的是 package.json 中 "scripts" 脚本中写的变量
npm start

// 淘宝镜像
npm run build  // 让webpack 编译、打包，最后生成一个静态文件夹

知识铺垫：

ES6语法：

猜你喜欢