Vue2.0

---

前言

一个小白的学习历程，用自己的的亲身经历为各位还未步入职场的朋友们先探探路。qvq

---

提示：这是Vue2.0篇

Vue2.0

一、Vue介绍

Vue是一套前端框架，免除原生JavaScript中DOM操作，简化书写。
基于MVVM思想，实现数据的双向绑定，将编程的关注点放在数据上。
（框架：是一个半成品软件，是一套可用的、通用的、软件基础代码。基于框架进行开发，更快捷、更高效。）

1.1Vue对象的介绍

//新建HTML页面，引入Vue.js文件。
<script src="js/vue.js"></script>
//在JS代码区，创建Vue核心对象，定义数据模型。
<scprit>
	let app = new Vue({
		el : "#app",//vue接管区域
		data : {//定义属性值
			变量:
		},
		methods:{//定义函数
			函数(){}
		},
		computed:{//计算属性
			计算属性名（）{
				基于现有数据，编写求值逻辑
				return 结果
			}
		},
		created(){
			页面加载完成时会自动调用这个位置的代码
		}
	})
</scprit>
//编写视图
<div id="app">
	<input type="text" v-modo="message">
	{{message}}
</div>

1.2插值表达式

形式：{{表达式}}
插值表达式是一种Vue的模板语法，用于给页面进行赋值，注意点：

1. 插值表达式除了基本的赋值外，还可以进行简单的函数调用、算术运算、三元运算等等。
2. 插值表达式中仅仅支持表达式，不支持语句，比如：if、for。
3. 插值表达式中使用的数据必须在data中存在。
4. 插值表达式不能为标签的属性进行赋值。

二、Vue指令

Vue的指令就类似于Java的关键字，是Vue内置好一些有特点含义的语法标签，一般格式都是v-xxxx。

2.1双向绑定(v-model)

v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。
目前v-model的可使用元素有：input、select、textarea。

<input type='text' :name="" v-model="属性名">

<scprit>
	new Vue({
		el : "#app",
		data : {
			属性名:"http://www.baidu.com"
		}
	})
</scprit>

2.2属性绑定(v-bind)

对于HTML标签属性，如果想要动态传值，不能使用{{}}，而应该使用专门的属性绑定语法。
可用于设置href，css样式等。

//标准语法
v-bind:属性名="Vue中的变量"
//简写语法
:属性名="Vue中的变量"

<scprit>
	new Vue({
		el : "#app",
		data : {
			属性名:"http://www.baidu.com"
		}
	})
</scprit>

2.3事件绑定(v-on)

为HTML标签绑定事件，js支持的事件vue都支持。

标准语法   
v-on:事件名="函数名()"
简化语法   
@事件名="函数名()"

<script>
	new Vue({
		el : "#app",
		data : {
			//...
		},
		methode:{
			handle:function(){
				alert('我被点击了');
			}
		},
	})
</script>

2.4列表遍历(v-for)

v-for="临时变量 in 数组/集合"
v-for="(临时变量,索引) in 数组/对象"

<script>
	new Vue({
		el : "#app",
		data : {
			数组/对象
		},
</script>

遍历哪个标签,就要将这个指令当成属性写在谁哪个标签上

2.5条件判断(v-if/v-show)

//v-if=布尔值 条件性的创建或者移除某些元素，判定为true时创建，判定为false移除
v-if="属性名 判断条件 属性值"
v-else-if="属性名 判断条件 属性值 && 属性名 判断条件 属性值"
v-else
//v-show=布尔值 条件性的显示或者隐藏某些元素，判定为true时显示，判定为false隐藏
v-show="属性名 判断条件 属性值"

注意:

1. v-if 一般用于要么显示，要么隐藏的场景；v-show用于频繁切换显示和隐藏的场景。
2. v-if还可以配合v-else以及v-else-if实现多分支条件判断,此时要注意三个标签中间不能有其它内容。
3. v-show用于切换display属性的值。

2.6页面赋值(v-html)

v-html="变量名称"

<script>
	new Vue({
		el : "#app",
		data : {
			变量名称:"变量值"
		},
</script>

v-html用于将指定变量的值渲染到页面上，如果变量值中有html语法，会进行解析.
此标签跟插值表达式功能相似，区别在于插值表达式不会进行html语法的解析.

三、指令修饰符

3.1按键修饰符

按键修饰符是用来修饰键盘事件的，比如keyup、keydown，它可以精准的定位哪个键按下、弹起时触发的事件。例如：
@keyup.enter 监听回车键弹起
@keydown.esc 监听esc键按下
@keyup.49 监听数字1键弹起

@keydown.esc → 监听esc键按下: <input type="text" @keydown.esc="fn1()" >
<script>
	new Vue({
		el: '#app',
		methods: {
			fn1(){
				console.log("监听回车键弹起");
			},
		}
	})
</script>

3.2v-model修饰符

v-model修饰符是用来修饰v-model指令的，它可以对输入框中内容执行如下操作
v-model.trim 去除输入内容的首尾空格
v-model.number 将输入内容转为数字
v-model.lazy 输入框失去焦点的时候更新内容

<input type="text" v-model.lazy="phone"><br>
<script>
	new Vue({
		el: '#app',
		data: {
			name: "张三",
			age: 18,
			phone: "13800138000"
		}
	})
<script>

3.3事件修饰符

事件修饰符是用来修饰事件的，它可以更好的控制事件的细节，常用的有下面两个：
@事件名.stop 阻止冒泡
@事件名.prevent 阻止默认行为

<div class="father" @click="f()">
<script>
	new Vue({
		el: '#app',
		methods: {
			f() {
				console.log("father");
			},
			s() {
				console.log("son");
			},
			b(){
				console.log("点击了.....")
			}
		}
	})
</script>

四、动态样式

动态样式指的是vue对css样式的一种控制方式，它可以使得css样式的切换变的更加简单
我们知道，css样式主要就是通过行内样式和类选择器来添加，vue对两种方式都有对应的支持

4.1控制class

//对象的写法
<div :class="{类名1:布尔值,类名2:布尔值}"></div>
//数组的写法
<div :class="[类名1,类名2]"></div>

<button @click="addPink()">添加pink效果</button>
<button @click="removePink()">移除pink效果</button>
<button @click="big()">盒子变大</button>
<button @click="small()">盒子变小</button>
<div :class="{box:true,pink:pinkFlag,big:bigFlag}">盒子1</div>
<div class="box" :class="styleArr">盒子2</div>

<script>
	const app = new Vue({
    	el: '#app',
        data: {
        	pinkFlag: true,
            bigFlag: false,
            styleArr: ['box','pink','big']
        },
        methods: {
            addPink() {
            	this.pinkFlag = true
            },
            removePink() {
                this.pinkFlag = false
            },
            big(){
                this.bigFlag = true
            },
            small(){
                this.bigFlag = false
            }
		}
	})
</script>

4.2控制style

<div :style="{css属性1:值1 , css属性2:值2}"></div>

<div class="box" :style="{width: w,backgroundColor: c}"></div>
<script>
	new Vue({
    	el: '#app',
        data: {
        	w: '300px',
            c: 'red'
        }
	})
</script>

五、计算属性

计算属性就是基于现有的数据推算出来的新属性，只要依赖的数据变化，新属性就会自动更新，而且计算属性多次调用的情况下只会计算一次，效率非常高
计算属性的值默认情况下是不能直接进行修改的，如果非要修改，就必须使用计算属性的完整写法

//简化写法
computed:{
	计算属性名（）{
		基于现有数据，编写求值逻辑
		return 结果
	}
}
computed:{//跟data平级
       计算属性名:{
           get(){//取值
               返回计算属性的值
           }
           set(val){//赋值 
            提供修改的逻辑
           }
       } 
   }

六、侦听器

//侦听器可以监控一个值的变化，通过监听器可以获取到变化前后的值
watch: {
	被监控的简单变量(value, oldValue) {
	}
}
//如果侦听的值是一个对象，需要进行深度侦听，才能监控到对象中属性的变化，这种方式只能获取到变化之后的对象的值
watch: {
	被监控的对象变量: {
		deep:true,//开启深度监控
		handler(value) {//val指的是变化之后的对象
        }
	}
}

七、Vue生命周期

7.1Vue 生命周期的四个阶段

Vue生命周期：一个Vue实例从 创建 到 销毁 的整个过程。
生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

7.2Vue 生命周期函数（钩子函数）

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码。

八、axios发送请求

8.1介绍

Ajax
介绍：Asynchronous JavaScript And XML，异步的JavaScript和XML。
作用：可以给服务器发送请求，获取服务器响应的数据，在不重新加载整个页面的情况下，更新部分网页
Axios
介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发。

8.2Axios入门

1. 引入Axios的js文件

<script src="js/axios-0.18.0.js"></script>

2. 使用Axios发送请求，并获取响应结果

axios({
    method: "get",
    url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById?id=1"
}).then((result) => {
    console.log(result.data);
});

8.3Axios请求方式

axios.get(url) 查询
axios.delete(url) 删除
axios.post(url, data) 新增
axios.put(url, data) 修改

//发送GET请求
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById?id=1").then((result) => {
    console.log(result.data);
});
//发送POST请求
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",{id:1}).then((result) => {
    console.log(result.data);
});

8.4Axios参数位置

url路径 http://xwork.cn/mock/emp/1
url参数 http://xwork.cn/mock/emp/deleteById?id=1
请求体 仅PUT和POST方式支持

九、前端工程化

9.1环境准备

安装下两个软件：NodeJS和Vue-cli

9.1.1NodeJS

前端开发的基础环境，相当于Java的JDK

1. 安装完毕后，通过node -v验证一下是否安装成功
2. 使用管理员身份运行命令行，执行如下指令配置npm的全局安装路径

npm config set prefix "D:\soft\nodejs"

3. 使用管理员身份运行命令行，执行如下指令切换镜像源

npm config set strict-ssl false
npm config set registry https://registry.npm.taobao.org

9.1.2Vue-cli

Vue-cli是一个创建vue项目的辅助工具，它可以快速创建一个符合企业规范的vue项目

1. 使用管理员身份运行命令行，执行如下指令

npm install -g @vue/cli

2. 安装完成后,使用下面命令来查看vue版本

vue --version

9.2创建项目

命令行：通过在命令行执行vue create项目名`创建vue项目
图形化界面：通过命令执行vue ui先进入到图形化界面，在界面中创建项目

9.3启动项目

1. 在VsCode中使用npm插件启动
2. 直接在项目目录下使用命令行启动
   启动之后，它会占用8080端口，如果想要自己指定一个端口，需要在vue.config.js文件中，添加端口号的配置，然后重启一下vue项目即可

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port: 7000
  }
})

9.4项目介绍

我们以main.js作为文件的主入口，此文件会引入我们开发的根组件App.vue
我们可以在根组件中编写代码，也可以在其它自定义组件中开发，再引入到根组件中
组件：我们开发代码的主战场，一般包含三部分：template（定义HTML）、script（定义js）、style（定义css）

十、组件

10.1介绍

组件分为两类：根组件和普通组件，根组件就一个–App.vue，它用来装载普通组件，普通组件可以有很多个，普通组件也可以装载其它普通组件

10.2书写规范

组件的定义是有一定规范的：

1. 文件名必须是多词（例如: AbcDef、 abcDef、 abc-def），如果实在无法使用多词，可以在文件中使用name属性控制
2. template中只能有一个根元素
3. script中有一个default对象，我们所有的vue的属性，除了el外，都写在这里面（例如：data、methods、computed…）
4. data不能再像原来一样，而是要写成一个函数的形式，将所有的属性值放在一个对象中，使用return返回来

10.3组件注册

一个组件只有先注册才能使用，组件注册方式分为两种：

1. 局部注册：只能在注册的组件内使用
2. 全局注册：在所有组件中都能使用

10.3.1局部注册

操作步骤:

1. 创建.vue结尾的组件
2. 在要使用的组件中导入组件
3. 使用注册组件
4. 使用组件
   ① 创建header组件

<template>
    <div class="header">
        我是hm-header
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
    .header{
        width: 500px;
        height: 100px;
        background-color: blueviolet;
        text-align: center;
        font-size: 20px;
        color: aliceblue;
    }
</style>

（其他两个同理）
④ 在根组件中导入上面的三个组件并注册使用

<template>
  <div>
    <!-- 将组件等价标签写在html中 -->
    <hm-header></hm-header>
    <hm-main></hm-main>
    <hm-footer></hm-footer>
  </div>
</template>

<script>
//1. 将组件文件导入进来
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'


export default {
  //2. 将导入进来的文件注册为vue的组件-->标签
  components: {
    /* 标签:组件变量名 */
    HmHeader,
    HmMain,
    HmFooter,
  }
}
</script>

<style lang="scss" scoped></style>

10.3.2全集注册

① 创建button组件

<template>
    <div>
        <button>按钮</button>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
    button{
        width: 100px;
        height: 40px;
        background-color: darkturquoise;
        color: white;
    }
</style>

② 注册全局组件

importH吗Button from './components/HmButton.vue'

Vue.component('HmButton',HmButton)

③ 在任何需要使用组件的时候直接使用标签名调用
(和局部变量的创建组件相同，同上)

10.4组件细节

10.4.1scope

我们观察组件的style标签，会发现每个每个上面都有一个scope属性，它的作用是用来控制当前css样式的控制区域的：

1. 如果不写scope属性，写在组件中的样式会全局生效，很容易造成多个组件之间的样式冲突问题
2. 如果写了scope属性，样式只作用于当前组件，不会影响到其它组件
   scoped原理：
3. 当前组件内标签都被添加一个data-v-hash值的属性
4. 使用css的属性选择器按照data-v-hash值精确定位页面区域然后控制样式

10.4.2data

变量区域data跟原来的写法不一样了，不在是一个对象，而变成了一个函数
它的作用是保证每个组件实例都维护一份独立的数据，每次创建新的组件实例，都会新执行一次 data 函数，得到一个新对象

10.5组件通信

我们组件之间的数据默认情况下是独立的，互不影响的，但是在很多情况下，组件之间需要做数据的交互，此时就要用到组件的通信了。
要实现组件的通信我们就要先了解组件之间的关系，vue中的组件关系主要有两种：父子关系和非父子关系。

不同的关系之间，使用的通信方式是不一样的，今天我们先来研究父子关系的组件通信，即：父传子和子传父

10.5.1父传子

父传子: 父组件的<子表签 :自定义属性=“变量” :自定义属性=“变量”> 子组件 props:[‘属性1’,‘属性2’]

<template>
    <div class="goods wrapper">
        <div class="title">
            <div class="left">
                <h3>新鲜好物</h3>
                <p>新鲜出炉 品质靠谱</p>
            </div>
            <div class="right">
                <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
            </div>
        </div>
        <div class="bd">
            <ul>
                <!-- <子组件标签 :自定义属性名="变量"> -->
                <xtx-picture v-for="goods in goodsList" :obj="goods" :key="goods.id"></xtx-picture>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //好物集合
            goodsList: [
                { id: 1, pic: 'goods1.png', name: 'KN95级莫兰迪色防护口罩', price: 79 },
                { id: 2, pic: 'goods2.png', name: '仿古收纳小盒子', price: 132 },
                { id: 3, pic: 'goods3.png', name: '法拉蒙高颜值记事本可定制', price: 58 },
                { id: 4, pic: 'goods4.png', name: '科技布布艺沙发', price: 3759 }
            ]
        }
    }

}
</script>

<style lang="scss" scoped>
.goods .bd ul {
    display: flex;
    justify-content: space-between;
}
</style>

<template>
    <li>
        <a href="#">
            <div class="pic"><img :src="require('@/assets/images/'+obj.pic)" alt="" /></div>
            <div class="txt">
                <h4>{{obj.name}}</h4>
                <p>¥ <span>{{obj.price}}</span></p>
            </div>
        </a>
    </li>
</template>

<script>
export default {
    //props :接收来自父类变量信息
    props:['obj']

}
</script>

<style lang="scss" scoped>
li {
    width: 304px;
    height: 404px;
    background-color: #EEF9F4;
}

li {
    display: block;
}

li .pic {
    width: 304px;
    height: 304px;
}

li .txt {
    text-align: center;
}

li h4 {
    margin-top: 17px;
    margin-bottom: 8px;
    font-size: 20px;
}

li p {
    font-size: 18px;
    color: #AA2113;
}

li p span {
    font-size: 22px;
}
</style>

10.5.2子传父

子传父: 子组件中–添加事件–触发父组件中的一个事件–绑定方法

<template>
    <div class="goods wrapper">
        <div class="title">
            <div class="left">
                <h3>新鲜好物</h3>
                <p>新鲜出炉 品质靠谱</p>
            </div>
            <div class="right">
                <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
            </div>
        </div>
        <div class="bd">
            <ul>
                <!-- 
                    <子组件标签 :自定义属性名="变量">
                    <子组件标签 @自定义事件名="方法">
                -->
                <xtx-picture v-for="goods in goodsList" :obj="goods" :key="goods.id" @kyd="kyd"></xtx-picture>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //好物集合
            goodsList: [
                { id: 1, pic: 'goods1.png', name: 'KN95级莫兰迪色防护口罩', price: 79 },
                { id: 2, pic: 'goods2.png', name: '仿古收纳小盒子', price: 132 },
                { id: 3, pic: 'goods3.png', name: '法拉蒙高颜值记事本可定制', price: 58 },
                { id: 4, pic: 'goods4.png', name: '科技布布艺沙发', price: 3759 }
            ]
        }
    },
    methods: {
        //参数1:要修改的对戏  参数2: 要减的钱数
        kyd(id, price) {
            this.goodsList.forEach(e => {
                if(e.id === id){
                    e.price -= price;
                }
            })
        }
    }

}
</script>

<style lang="scss" scoped>
.goods .bd ul {
    display: flex;
    justify-content: space-between;
}
</style>

<template>
    <li>
        <a>
            <div class="pic"><img :src="require('@/assets/images/' + obj.pic)" alt="" /></div>
            <div class="txt">
                <h4>{{ obj.name }}</h4>
                <p>
                    ¥ <span>{{ obj.price }}</span>
                    <span><input type="text" v-model="price"></span>
                    <span><button @click="kyd()">砍一刀</button></span>
                </p>
            </div>
        </a>
    </li>
</template>

<script>
export default {
    //props :接收来自父类变量信息
    props: ['obj'],
    data() {
        return {
            price: 1
        }
    },
    methods: {
        kyd() {
            //console.log("kyd");
            //触发父类的一个事件
            this.$emit('kyd',this.obj.id, this.price);
        }
    }

}
</script>

<style lang="scss" scoped>
li {
    width: 304px;
    height: 404px;
    background-color: #EEF9F4;
}

li {
    display: block;
}

li .pic {
    width: 304px;
    height: 304px;
}

li .txt {
    text-align: center;
}

li h4 {
    margin-top: 17px;
    margin-bottom: 8px;
    font-size: 20px;
}

li p {
    font-size: 18px;
    color: #AA2113;
}

li p span {
    font-size: 22px;
}
</style>

十一、路由

11.1路由介绍

vue属于单页面应用程序（Single Page Application , SPA），也就是说一个网站中显示一个页面，所有的功能与交互都在这唯一的一个页面内完成。
所谓路由，其实就是根据浏览器的访问路径不同，将不同的组件渲染到唯一的一个页面上。
而路由的核心就是配置页面路径和访问组件之间的映射关系。

11.2路由安装

安装vue-router包

# vue2 项目，要指定版本安装

创建路由模块

// 1. 导入所需模块
import Vue from 'vue'
import VueRouter from 'vue-router'

// 2. 调用 Vue.use() 函数，将 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)

// 3. 配置路由规则
const routes = []

// 4. 创建路由的实例对象
const router = new VueRouter({
    /*路由的配置*/
    routes
})

// 5. 导出路由的实例对象
export default router

创建并挂载路由模块

import Vue from 'vue'
import App from './App.vue'

// 1. 导入路由模块
import router from '@/router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 2. 挂载路由模块
  router
}).$mount('#app')

验证
浏览器访问localhost:7000 ，如果路径后自动添加了 /#/ ，则基本上配置成功。

11.3路由配置

VueRouter：路由器，根据路由请求在路由视图中动态渲染对应的视图组件。
路由链接组件，浏览器会解析成。
：路由视图组件，用来展示与路由路径匹配的视图组件。

核心步骤：

1. 配置路由规则（router/index.js中）
2. 设置超链接（router-link）
3. 设置路由锚点（router-view）
   ① 配置路由规则（router/index.js中）
   
   ② 设置超链接（router-link）
   
   ③ 设置路由锚点（router-view）
   
   如果下面报错，可以执行：npm install less-loader less
   

11.4路由嵌套

如果在一个组件中还嵌套了其它的组件，那么路由也就需要使用嵌套路由。
（组件怎么嵌套，路由规则就怎么嵌套，方法同上）

11.5路由细节

11.5.1重定向

使用场景：页面hash地址是 xx 的情况，你希望跳转到 yy 地址。
比如：页面打开后，hash地址是 / ，我希望跳转到 /disCover/recommend

11.5.2历史模式

路由模式有两种，一种为 hash模式（默认），一种为历史模式。
hash模式 — 地址栏有 # 号
历史模式 — 地址栏没有 # 号
如需使用历史模式，在 router/index.js 中进行配置：

11.5.3 404处理

场景：当访问一个不存在的地址时，页面一片空白。而我们希望提示用户没有这个页面。
解决办法：加一条一级路由规则即可。

11.6路由传参

很多情况下，我们会有一组相同类型的页面，区别就是页面上展示的数据不同.
那么此时会使用同一个组件来装载这些页面，而通过给页面传递不同的参数，以展示不同的数据。
在vue中参数传递有两种方式：

1. 查询参数 /xxx/xxx?id=数字&name=自定义名字
2. 路径参数 /xxx/xxx/数字/自定义名字

11.6.1查询参数

查询参数就是在路由后面使用？跟上要给页面传递的参数，页面跳转后可以使用 $route.query.参数名`获取到参数的值

11.6.2路径参数

路径参数就是在路由后面直接添加一部分内容作为参数，页面跳转后可以使用 $route.params.参数名获取到参数的值

11.6.3小结

十二、插槽

12.1介绍

我们在设计组件的时候，有时候为了通用性更强，就需要将更多的内容设计为占位符。
我们会发现，三个虽然都是弹窗，但是内容完全不一样：有提示文字的、有表格的、有表单的
如果此时要封装一个通用的弹窗组件，就需要将弹窗的内容设置为可变的，在vue中将这种可变的结构称为插槽（slot）

12.2默认插槽

子组件中使用标签占位，表示这里要放一些内容，相当于在这里挖了一个坑位，准备放内容.
父组件在使用子组件的时候，需要在标签中间为插槽提供要展示的内容。

12.3具名插槽

如果在一个组件中只有一个插槽，使用前面的默认插槽就够用了，但是如果一个页面中需要多个插槽，就必须给插槽起名字了，也就是具名插槽。
子组件中使用name给插槽命名，父组件中使用template包裹要传给子组件的值，并且使用v-slot:插槽名 来指定传给哪个插槽。
最后注意：如果一个插槽没有手动的起名字，那么他也会有一个默认的名字叫default。

12.4作用域插槽

有些时候，子组件在定义插槽的时候，需要向使用者（父组件）传递一些数据，此时就需要使用作用域插槽。

父组件接收并使用数据：

十三、LocalStorage存储和取值

localStorage.setItem(key,value)
localStorage.getItem(key)