嗨，早上好，打工人~
先告诉自己，我真的很棒！

如何学习新技术 = 是什么 + 为什么 + 怎么用

课程内容：
20220818 - 今日学习的内容包括：

第2章 Vue.js基础

2-15 表单中双向绑定指令的使用-doing

代码案例：

代码解读：
学习什么是双向绑定。

首先在 第22行 这里定义一个input框，
在input框上面我去定一个data 第14行，
我这里定义一个数据，比如说叫message:'hello' 第16行，‍‍

然后在 第21行 这里我去写一个 v-model 指令，它指的是一个双向绑定的指令，‍‍我让input框的值和message这个数据做上绑定，
保存一下，‍‍然后回到页面上刷新，这个时候它的内容是hello：【执行效果】

因为‍‍ message的内容是hello，所以input框对应的值它和message是绑定的，它的值就是hello。‍‍
我在上面再把 message的值‍‍打印出来，

保存一下，然后我们刷新一下，
现在我们说message是hello，
我们打开控制台，‍‍我们去改变一下message，我们vm.$data.message让它等于world，回车。

大家发现‍‍当你的数据变化的时候，input 框的内容也会发生相应的变化，这是一个单向绑定。‍‍好，再反过来看另一个方向，
当我去改变input框里的内容的时候，你发现message这个数据是不是也会跟着变？‍‍

所以数据变了，input框的值会变，input框的值变了，数据也会跟着变，这就是一个双向的绑定，‍‍
刚才我们讲解的是谁的一个双向绑定？
是input这种表单项或者说‍‍ form 里面的一个独特的这种标签，它的一个双向绑定的方式，input的框双向绑定我们就讲完了。‍‍

那么接着我们再来看，‍‍除了input框还有一些什么样的 form 常用的标签，比如说textarea。
input 我再提一嘴，‍‍如果你用input框这种v-model的形式做双向绑定了之后，就不必写value这样的一些东西了，直接用v-model的形式就可以了。‍‍即：

直接使用v-model就可以了：

接着我们来到textarea这块，以前在hml里面的编写过程中，如果我想写这种textarea的标签的时候，‍‍我要怎么写？写法如下：

比如说写一个hello保存，看下效果：

这是没问题的。‍‍当然在 vue 里面，如果你想让这种多行文本的标签也可以实现一个双向绑定，它的语法该怎么写呢？‍‍写法如下：

直接一个单标签就行了。一样的v-model等于message就可以，‍‍vue 的底层会帮你处理textarea和message之间的绑定关系。
大家不用关注这里的内容，你只要关注‍‍这么去写这样的语法就可以了。

我们保存一下，然后回到页面上，刷新，然后输入内容，‍‍没有任何的问题，内容变了数据就变，我改一下数据变了内容也会变，效果：

这就是在text rea里面，我们去使用v-model的单标签的方式。‍‍

v-model 还可以使用在checkbox这样的语法上面来。我们这么去写:

checkbox 它是一个可以勾选的复选框。‍‍
如果复选框去用我们现在的 v-model 指令该怎么去用？
我们这么去写：

但是这时候message它的值只能是true或者false，如果我写false的话，大家来看‍‍默认一开始数据是false，checkbox展示的就是一个没有勾选的状态，我们看一下是不是这个效果:
代码：

效果：

果然‍‍，当我改它的时候就变成true，再改又变成false。‍‍

所以大家记得当你用checkbox的时候，你要这么去用——传递 bool值，

当然其实‍‍你可以有好多个checkbox，
再看第二种checkbox的形式，我这里先把checkbox写上去，如果多个checkbox，‍‍代码如下：

保存一下，回到页面上刷新，有的时候我要选 jack dell lee，其实你不管选哪个，‍‍你看现在它都是一起变成true或者一起变成false，不是我想要的效果:

比如说我勾选了jack，我希望前面显示的是 jack，‍‍勾选了dell，前面显示的是dell，
如果checkbox想做到这样的一个功能，你也可以不让它是一个true或者false，‍‍你也可以让它是一个什么？让它是一个数组。‍‍

我们这里写一个数组，一起来看一下它的效果情况。
代码;

效果：

代码及效果解读如下：

一开始是个空，当你选 jack的时候，‍‍你发现前面这个数组里多了一个jack，你再选一个dell，又多了一个dell，好你再选一个lee，多了一个lee。‍‍

当你把这个jack勾掉的时候，只剩下后面两个东西:

所以你会发现如果checkbox你想这么用的时候，‍‍你可以用一个数组去存储v-model对应的内容，同时‍‍你还要在 input 框上去写一个value这样的值，告诉它你每一个input框对应的值到底是什么？‍‍

因为如果没有这个值的话，当你点击这个checkbox的时候，它是不知道往这个数组里要存什么样的内容的，‍‍所以这是checkbox一个高级的使用。‍‍

接着我们再去讲一下 radio 这个按钮，radio其实差不多，代码如下：
图片上传不了，直接把第23行的type="checkbox"改成 type="radio"

radio实际上它是一个单选，‍‍如果是一个单选的话，用一个数组存就不太合适了，因为 jack dell lee 它只能选中一个，三个不可能都选，‍‍

比如这样，你会发现它每次只把这个数组变成了一个字符串，所以当你去写‍‍ radio 的时候，你的初始值也不要给它一个这样的一个数组，你给它一个字符串就好了，message:""第27行。

一开始都没有选中，字符串是空，当你选 jack的时候，前面这个字符串变成 jack，‍‍当你选 dell的时候它变成dell，当你选 lee 的时候它会变成lee。

radio的使用和checkbox它的区别在于哪里呢？‍‍
radio的使用中我们不会在这里用一个数组去存它的内容，而是用字符串去存，为什么用字符串？因为radio不像checkbox，‍‍checkbox可以多选，而radio只能单选，所以每次只会存 jack dell lee 里面中的一个到 message里面去，‍‍那么就没有必要用数组来存了，用字符串存就可以了。‍