diff --git "a/\344\275\231\346\267\221\345\251\267/2021-06-05.md" "b/\344\275\231\346\267\221\345\251\267/2021-06-05.md" new file mode 100644 index 0000000000000000000000000000000000000000..e0da7f150a5fe6e653b6237f0bc6234a56504f1b --- /dev/null +++ "b/\344\275\231\346\267\221\345\251\267/2021-06-05.md" @@ -0,0 +1,254 @@ +# 2021-06-05的笔记 +# Vue第八节课 事件处理 + +## 表单输入绑定 +``` +text 和 textarea 元素使用 value property 和 input 事件； +checkbox 和 radio 使用 checked property 和 change 事件； +select 字段将 value 作为 prop 并将 change 作为事件。 +``` +## v-model +v-model 会忽略所有表单元素的 value、checked、selected attribute +``` + +
+ + + //原本写value是会显示在上面 但是有v-model有值 就会忽略value + //text 和 textarea 元素使用 value property 和 input 事件 + 也就是type是text 那么就要使用input事件 @input="" + +
+ + + +``` +这个的结果就是在文本框里面写啥 Console里面就会输出 +![](./img/2021-06-05-01.png) + +## 文本 +``` + +
+ //placeholder="edit me"是默认在文本框里灰色的 但是有v-model在 绑定了下面的的message 所以默认的会被覆盖掉 +

Message is:{{message}}

//在文本框下面的 is: 后面是自己在文本框打的东西 打什么就实时显示在下面 +
+ + + +``` +输出 +![](./img/2021-06-05-02.png) + +## 多行文本 +``` + +
+ 多行文本如下： +

{{message}}

//这里的message是引用了app里面的data +
+ //如果把v-model删除 那么多行文本框里面才会出现灰色的 默认的 这里引用了val事件 +
+ + + +``` +输出 +![](./img/2021-06-05-03.png) + +## 复选框 +### 单个复选框 +``` + +
+ //按钮绑定到了a 用了@change是因为 checkbox 和 radio 使用 checked property 和 change 事件 + 这是个单选 //这个是那个选择框后面跟着的文字 checked绑了'好难' +
+ + + +``` +输出 +![](./img/2021-06-05-04.png) + +### 多个复选框 +``` + +
+ //如果这里的4行都没有写value 那么电脑就会觉得这四个是一个东西 所以选择一个框 所有的框都会被选择上 + 这是个单选1 //所以要加上value进行区分 +
//换行 + + 这是个单选2 +
+ + 这是个单选3 +
+ + 这是个单选4 +
+ 你选择的按钮是:{{a}} +
+ + + +``` +输出 并且会按照按按钮的顺序输出 +![](./img/2021-06-05-05.png) + +## 单选按钮 +``` + +
+ ////按钮绑定到了a 用了@change是因为 checkbox 和 radio 使用 checked property 和 change 事件 + +
+ + +
+ 你选择：{{a}} //选择会跟在这后面 +
+ + + +``` +输出 +![](./img/2021-06-05-06.png) + +## 选择框 +### 单选 +``` + +
+ + 你选择了：{{a}} +
+ + + +``` +输出： +![](./img/2021-06-05-07.png) + +### 多选 +``` + +
+ +
+ 请选择:{{name}} +
+ + + + + +``` +![](./img/2021-06-05-08.png) \ No newline at end of file diff --git "a/\344\275\231\346\267\221\345\251\267/img/2021-06-05-01.png" "b/\344\275\231\346\267\221\345\251\267/img/2021-06-05-01.png" new file mode 100644 index 0000000000000000000000000000000000000000..c275ac400306a6a409dcb9988d67c68d52feff15 Binary files /dev/null and "b/\344\275\231\346\267\221\345\251\267/img/2021-06-05-01.png" differ diff --git "a/\344\275\231\346\267\221\345\251\267/img/2021-06-05-02.png" "b/\344\275\231\346\267\221\345\251\267/img/2021-06-05-02.png" new file mode 100644 index 0000000000000000000000000000000000000000..5b00252677020aebe05c592cd53335253a015d2d Binary files /dev/null and "b/\344\275\231\346\267\221\345\251\267/img/2021-06-05-02.png" differ diff --git "a/\344\275\231\346\267\221\345\251\267/img/2021-06-05-03.png" "b/\344\275\231\346\267\221\345\251\267/img/2021-06-05-03.png" new file mode 100644 index 0000000000000000000000000000000000000000..28c352f179cbe85547aa00652f9dcc1d42dca463 Binary files /dev/null and "b/\344\275\231\346\267\221\345\251\267/img/2021-06-05-03.png" differ diff --git "a/\344\275\231\346\267\221\345\251\267/img/2021-06-05-04.png" "b/\344\275\231\346\267\221\345\251\267/img/2021-06-05-04.png" new file mode 100644 index 0000000000000000000000000000000000000000..e9f69746fc755511ea5f967cf3d51ab3d1029aab Binary files /dev/null and "b/\344\275\231\346\267\221\345\251\267/img/2021-06-05-04.png" differ diff --git "a/\344\275\231\346\267\221\345\251\267/img/2021-06-05-05.png" "b/\344\275\231\346\267\221\345\251\267/img/2021-06-05-05.png" new file mode 100644 index 0000000000000000000000000000000000000000..4ba787b45cc35bf93151d72ba2e7d184a77e2bff Binary files /dev/null and "b/\344\275\231\346\267\221\345\251\267/img/2021-06-05-05.png" differ diff --git "a/\344\275\231\346\267\221\345\251\267/img/2021-06-05-06.png" "b/\344\275\231\346\267\221\345\251\267/img/2021-06-05-06.png" new file mode 100644 index 0000000000000000000000000000000000000000..504a9a9603ecfc4d50ad4470105e557a3aaf7cd6 Binary files /dev/null and "b/\344\275\231\346\267\221\345\251\267/img/2021-06-05-06.png" differ diff --git "a/\344\275\231\346\267\221\345\251\267/img/2021-06-05-07.png" "b/\344\275\231\346\267\221\345\251\267/img/2021-06-05-07.png" new file mode 100644 index 0000000000000000000000000000000000000000..6c9a92fbcd1b74cceab7182884c90e8ad6b13e8b Binary files /dev/null and "b/\344\275\231\346\267\221\345\251\267/img/2021-06-05-07.png" differ diff --git "a/\344\275\231\346\267\221\345\251\267/img/2021-06-05-08.png" "b/\344\275\231\346\267\221\345\251\267/img/2021-06-05-08.png" new file mode 100644 index 0000000000000000000000000000000000000000..1c325533029d2d721ac4028eb41a61f0a18cdd35 Binary files /dev/null and "b/\344\275\231\346\267\221\345\251\267/img/2021-06-05-08.png" differ