谷粒商城基础篇(前端篇)

VSCode的使用

1. 在空白html页面输入!按回车会自动生成一段html代码
2. alt + shift + f 格式化代码

ES6

1. let声明变量

<script>
        //var 声明变量往往会越域
        //let 声明的变量有严格的作用域
        {
            var a = 1;
            let b = 2;
        }
        console.log(a); //1
        console.log(b); //报错ReferenceError: b is not defined
    </script>

// var 可以声明多次
        // let 只能声明一次
        var m = 1;
        var m = 2;
        let n = 3;
        let n = 4;
        console.log(m); // 2
        console.log(n); // Identifire 'n' has already been declared

  // var 会变量提升
        // let 不存在变量提升
        console.log(x); // undefined x被提升为了undefined 其实也是一个值
        var x = 10;
        console.log(y); // ReferenceError: y is not defined 这里直接报错了
        let y = 20; 

2.const声明变量(只读变量)即常量

// 1. 声明之后不允许改变
        // 2. 一旦声明必须初始化, 否则会报错
        const a = 1;
        a = 3;// Uncaught TypeError: Assignment to constant variable

3. 解构表达式

3.1 数组解构

 let arr = [1,2,3];
        //以前我们想获取其中的值, 只能通过角标
		let x = arr[0];
		let x = arr[1];
		let x = arr[2];
		//ES6可以这样
        const [x,y,z] = arr; // x, y, z将于arr中的每个位置对应来取值
        // 然后打印
        console.log(x, y, z);

3.2 对象解构

 const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        //解构表达式获取值, 将person里面每一个属性和左边对应赋值
        const {name, age, language} = person;
        //等价于下面
        // const name = person.name;
        // const age = person.age;
        // const language = person.language;
        //可以分别打印
        console.log(name);
        console.log(age);
        console.log(language);

4. 字符串扩展

4.1 几个新的API

4.2 字符串模板

还可以在${}中写表达式

5. 函数优化

5.1 函数参数默认值

5.2 不定参数

5.3 箭头函数

如果方法体内有多条语句, 先写大括号, 在大括号中写多条语句


lambda + 对象解构

6. 对象优化

6.1 新增的API

6.2 声明对象简写

6.3 对象函数属性简写

6.4 对象的扩展运算符

7. 数组优化

7.1 map 方法 接收一个函数, 将原数组中的所有元素用这个函数处理后返回

7.2 reduce方法

8. promise异步编排

抽取出promise方法后的异步调用

9. 模块化

9.1 什么是模块化

9.2 export

导出对象不起名字

等到导入的时候, 可以随意起名字

9.3 import

9.4 测试以上代码

Node.js

Vue

1. MVVM思想

2. vue简介

老杨的vue学习笔记
https://blog.youkuaiyun.com/weixin_43744059/article/details/107231447

3. vue项目初始化

在vue文件夹中打开新的终端, 输入npm init -y进行初始化

输入cls可以清屏

输入npm install vue安装vue程序
安装失败, 尝试用cnpm install vue 如果cnpm不识别 先npm install -g cnpm --registry=https://registry.npm.taobao.org 再cnpm install vue
在vue2目录下创建index.html文件 使用!加enter 自动生成html



直接在控制台修改值, 发现页面也会跟着改变, 这就是数据的双向绑定

4. 基本语法&插件安装

vsCode中安装vue2的语法插件

5. 单项绑定和双向绑定

6. 组件化

7. 生命周期和钩子函数

8. vue脚手架开发

错误信息, 用npm install -g @vue/cli-init安装后报错 vue不是内部或外部命令, 此时使用npm install -g vue-cli命令安装vue
再进行初始化vue即可

项目名, 描述, 作者信息等都回车, 选择第一个runtime , vue-router选y , 剩下的n, 选择npm包管理工具, 等待创建完毕

此时再cd进设置的工程名vue-demo 执行npm run dev 启动项目

vue-cli 文件夹描述
build是webpack打包相关工具
config文件夹是项目配置其中index.js存放端口配置等信息
node_modules存放的是所有安装的依赖, 使用npm安装的东西会存放到这里
src 编写代码的文件夹 src下的main.js是主程序
static里存放静态资源文件, 图片, 视频等资源

Vue的模块名一定要大写

9. elementui