华为交换机学习

vue-day4

1. localStorage与sessionStorage

1.1 localStorage的使用

<script>

    // localStorage都是以key-value的形式将数据储存的
    // localStorage储存的信息会直接以文本的形式保存到硬盘  不会随着页面刷新而 浏览器关闭的关系而消失
    // localStorage中的数据必须用户主动删除才会消失  2-5m 数据
    // localStorage.name = "百知教育";
    // console.log(localStorage.name)

    // 删除数据
    // localStorage.removeItem("name")
    // console.log(localStorage.name)

    // localStorage数据的储存方式  与访问方式
    localStorage.age = 12;
    localStorage['bir'] = "2012-12-12";
    localStorage.setItem("pwd", "123456");
    // console.log(localStorage.bir)
    // console.log(localStorage["age"])
    // let pwd = localStorage.getItem("pwd")
    // console.log(pwd)

    // 遍历数据
    // for (let n = 0; n < localStorage.length; n++) {
    //     console.log("第" + n + "条数据的key为" + localStorage.key(n) + ",value为" + localStorage.getItem(localStorage.key(n)))
    // }

    // 删除所有
    localStorage.clear()

    // sessionStorage与localStorage在使用方式上完全一致

</script>

1.2 localStorage储存对象类型

localStorage只能以文本的形式将数据保存到浏览器, 所以储存对象类型的数据时需要进行序列化与反序列化

1. 序列化: JSON.stringify();
2. 反序列化: JSON.parser()

<script>

    let local = localStorage;
    local.number = 13;
    local.name = "小黄";
    // console.log(typeof local.number)
    // console.log(typeof local.name)

    local.student = {
        id: 1,
        username: "武开沅",
        age: 18,
    }
    console.log(typeof local.student)
    console.log(local.student)

    let student2 = {
        id: 2,
        username: "小黄",
        age: 55,
    }
    // 储存对象类型的数据 需要将数据进行序列化
    local.stu = JSON.stringify(student2);

    // 取出数据  将数据反序列化成对象
    let stu2 = JSON.parse(local.stu);
    console.log(stu2.age)

</script>

2. vue-cli的开发

2.1 安装脚手架

# 1. 安装脚手架
	npm install -g vue-cli
# 2. 卸载脚手架
	npm uninstall -g vue-cli
# 3. 查看脚手架版本
	vue -V
	
# 4. vue -V 如果不能被识别  需要配置系统环境变量path vue.cmd所在位置
	D:\node_space\npm_global

2.2 创建脚手架项目

脚手架项目中一切皆组件, 组件是一个个的单独的文件

# 1. 创建目录, 在此目录下创建项目
	vue init webpack 项目名
# 2. 切换到创建成功的项目的目录下 执行命令  每创建一个项目都需要执行一次
	npm install
	
# 3. 启动项目  使用webstorm或者pycharm打开启动 终端启动
	npm start  npm run dev

1603421507018

1603421994206

2.3 常见命令的解释

1. npm install
	a. 如果后面有包名, npm install xxx  则按照给定的包名安装
	b. 如果npm install 后面没有包名,则按照当前目录下的packag.json来安装依赖
	c. -g代表全局安装  只能安装工具  不能安装依赖
2. npm start  npm run dev
		所有使用npm构建的项目都可以使用npm start启动  等价于npm run dev