v-for循环为什么需要使用key和focus事件与blur事件的用法，以及我们的v-model双向绑定

1.v-for为什么需要使用key

v-1.for中key的重要性

我们在v-for中创建一个有选择按钮和名称以及后面有着一个删除的选项，来实现我们类似于购物车的效果，就是选择删除那个就会删除指定的那个内容，并且我们选择的内容不会因为删除了其他的内容而发生改变。

首先创建一个我们的页面，显示出我们的一些基本信息，也就是我们上面所说的布局效果。

因为这个还没有做我们的事件和定位所以是没有如何效果的，所以我们需要对其进行一些添加事件，比如@check点击事件和：key主键，并且需要给我们的item再次添加一个值也就是我们的引用，相当于我们的定位。

 

我们因为添加了key作用这个被选中的内容不会发送改变，如果没有使用我们的key的话而是使用我们index那么会发生什么了？

所以我们在使用v-for的时候一定要添加我们的key否则可能导致丢失我们之前的数据。

2.focus事件与blur事件的用法

1.了解focus事件与blur事件

我们在使用一些软件上进行我们的注册时会有一些输入框，这些输入框是需要我们根据他给我们的格式进行输入的如果没有按照格式则会提示你出错了，那么它是如何了解到你输入的内容与其格式并不一致呢？

我们可以先去官网了解focus和blur这两个事件的用法：写文章-CSDN创作中心

我们可以从中了解到这个格式分别是我们的获取焦点和失去焦点，我们可以创建一个项目来使用我们的这两个事件。

2.focus事件和blur事件的用法

那么我们可以使用这个作用来做一个图片的显示，就是我们点击了我们的输入框和点击其他地方的时候，会有一张图片出来。

我们先选择一张图片，然后给我们的输入框赋予一些值，同时加上我们的class并且在加上我们的：class这个是在我们是否点击了输入框时使用，当我们点击了输入框，则会出现一个新的class，点击其他地方时这个class又会消失，我们根据这个来做我们的图片展示和消失。

我们设置好了之后在style里面给class赋予一些页面属性，来更好的实现我们的图片展示。

点击一下我们的输入框看一下我们为其赋予的属性是否起到了作用。

可以看的我们点击了输入框之后我们引入的图片就出现在了我们的输入框上方，我再次丁点击其他的地方图片则又会回到输入框的下方。

其实我们可以直接在事件里面就传递了我们的true和false的值效果是一样的。

我们修改完成了之后可以在页面去查看一下我们的效果是否引用，不过这个只适用于我们的比较简答的方法，因为可以为我们节省很多的代码，如果是个难度比较大的项目则不推荐使用。

3.v-model的认知和双向绑定

1.了解v-model和

我们在输入框里面输入值的时候如果我们想要在另一个地方同步我们输入的值的时候可以使用@input来协助我们实现。

其实我们并不需要使用这么麻烦的方法，我们只需要添加一个v-model即可有完全一样的效果。

保存好运行页面输入值可以查看我们的效果是和之前的效果一样的。

2.双线绑定的用法

我们在软件的输入框里面输入值的时候可以按下我们的回车键来提交我们的数据，那么我们需要实现这个效果的话就要使用到我们的@confirm，它是我们的按下按钮的时候触发。

我们在输入框里面添加我们的@confirm并且给其调用一个方法来实现我的页面控制台输出。

这个也就是我们按下回车键的时候提交数据的原理，也就是我们的双向绑定。