diff --git "a/\346\236\227\344\274\237\347\216\256/Vue-2020-06-05-\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md" "b/\346\236\227\344\274\237\347\216\256/Vue-2020-06-05-\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..0e1912335081779599c13a1f0a355dd011e9776b --- /dev/null +++ "b/\346\236\227\344\274\237\347\216\256/Vue-2020-06-05-\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md" @@ -0,0 +1,162 @@ +## 表单输入绑定 + +### 基础用法 +* text 和 textarea 元素使用 ------valu 属性和 input事件。 +* checkbox 和 radio 使用 --------checked 属性和 change 属性。 +* select 字段将 valu 作为 --------prop 并将 change 作为事件。 + +1. v-model 会忽略所有表单元素的 value 、checked、selected 属性的初始值，将 Vue 实例的数据作为数据的来源。 +``` + +
+ +
+ + + + + +``` +![](./img/2021-06-05_Vuebiaodan.png) + +2. 如果要输入不同的输入语法比如日语韩语等，使用input事件就能在输入法组合文字过程中的得到更新。 + +### 文本 +1. 底部提示用 placeholder="" +``` + +
+ +

得出：{{txt}}

+
+ + + + + +``` +![](./img/2021-06-05_Vuebiaodan2.png) + +### 多行文本 +``` + +
+ +
+ + + + + +``` +![](./img/2021-06-05_Vuebiaodan3.png) + +* 在文本区域插值 （ ）并不会生效，应该要用 v-model 来代替。 + + +### 复选框 +1. 单个复选框，绑定到布尔值 +``` + +
+ + +
+ + + + + +``` +![](./img/2021-06-05_Vuebiaodan4.png) +![](./img/2021-06-05_Vuebiaodan4-1.png) + +2. 多个复选框，绑定到同一个数组 +``` + +
+ + + + + + + + +
+ + + + + +``` +![](./img/2021-06-05_Vuebiaodan5.png) +![](./img/2021-06-05_Vuebiaodan5-1.png) + + +### 单选按钮 diff --git "a/\346\236\227\344\274\237\347\216\256/Vue-2021-06-04-\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\346\236\227\344\274\237\347\216\256/Vue-2021-06-04-\344\272\213\344\273\266\345\244\204\347\220\206.md" index d4dbddea32bfdfeb091b48462fd16d83cfeb96ca..55d13b04976c50f95b50dd9bc19efa9ce2e9d40e 100644 --- "a/\346\236\227\344\274\237\347\216\256/Vue-2021-06-04-\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ "b/\346\236\227\344\274\237\347\216\256/Vue-2021-06-04-\344\272\213\344\273\266\345\244\204\347\220\206.md" @@ -120,8 +120,328 @@ ### 事件修饰符 1. .stop : 阻止单击事件继续传播，阻止冒泡。 +![](./img/Vue-stop详解.png) +如图所示：嵌套div，每一个div都有click事件，点击目标事件，先走捕获->目标->冒泡由此可以看出捕获是从外到内依次执行click事件，而冒泡是从内到外依次执行click事件。 +``` + +
+ + +
+ +
+ +
+ + + +``` +![](./img/2021-06-07_Vue-stop.png) + +添加 .stop 事件后： +``` + +
+ + +
+ +
+ +
+ + + + + +``` +![](./img/2021-06-07_Vue-stop2.png) + + 2. .prevent ：提交事件不再重载页面，阻止默认事件。（对于元素拥有的自身默认事件时（如 ),这种标签在被动或者自动触发事件时，会在执行完触发事件后，最后自动执行本身默认事件。但是！！默认事件在要在触发事件执行完以后执行，并不会因为stop修饰符而阻止。） -3. .capture ：添加事件侦听器时使用事件捕获模式。 -4. .self ：只当事件在该元素本身时触发处理函数。 -5. .once ：事件只触发一次。 +``` + +
+ + + 转接Vue.js的百度链接 + +
+ + + + + +``` +![](./img/2021-06-07_Vue-prevent.png) + +添加 .prevent 事件后。 +``` + +
+ + + 转接Vue.js的百度链接 + +
+ + + + + +``` +![](./img/2021-06-07_Vue-prevent2.png) + + +3. .capture ：添加事件侦听器时使用事件捕获模式（若有多个该修饰符的元素则由外而内触发）。 +``` + +
+ + +
+ +
+ +
+ + + + + +``` +![](./img/2021-06-07_Vue-capture.png) + + +添加 .capture 事件 +``` + +
+ + +
+ +
+ +
+ + + + + +``` +![](./img/2021-06-07_Vue-capture2.png) + + +4. .self ：只当事件在该元素本身时触发（被点击）处理函数。（.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 ) +``` + +
+ + +
+ +
+ +
+ + + + + +``` +![](./img/2021-06-07_Vue-self.png) + + +5. .prevent.once ：事件只触发一次。 +``` + +
+ + + 点击转Vue.js官网 + +
+ + + + + +``` +![](./img/2021-06-07_Vue-prevent-once.png) + +添加 .prevent.once 后 +``` + +
+ + + 点击转Vue.js官网 + +
+ + + + + +``` +![](./img/2021-06-07_Vue-once.png) + +* 注意！！ passive 和 prevent 不能同时使用在一个监听器上，因为 .prevent 将会被忽略，浏览器还会给警告。。 6. .passive ：告诉浏览器不会阻止默认事件。（举一个很简单的例子：当你的朋友要来你家，她提前和你说了，这时候你就有时间去收拾房间，买菜等。但是她要是没有和你说就来了，那你就来不久了，这就是passive的重要性，提前告诉浏览器的原因，提早告诉，提高性能）。 + +* 修饰符还可以串联，但是顺序非常重要，相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击（冒泡）。 + + +### 按键修饰符 +* .enter           //回车键 +* .tab            //tab键 +* .delete          //“删除”和“退格”键 +* .esc            //Esc键 +* .space           //空格键 +* .up            //↑键 +* .down           //↓键 +* .left           //←键 +* .right           //→键 + + +类似： +``` + +``` +按下top 键 +![](./img/2021-06-07_Vue-top.png) + + +### 系统修饰键 + + + +## 所以， .stop 和 .self 的区别是在哪呢？ \ No newline at end of file diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan.png" new file mode 100644 index 0000000000000000000000000000000000000000..cf3b1a91f4ac3cddb2abbf2057fa2d578164b28e Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan2.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan2.png" new file mode 100644 index 0000000000000000000000000000000000000000..062a54dde3be87d015712b5e8c4a42a501d34be1 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan2.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan3.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan3.png" new file mode 100644 index 0000000000000000000000000000000000000000..2aaffc25a542bb07176b2e9f9e4a805c4f0aaba2 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan3.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan4-1.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan4-1.png" new file mode 100644 index 0000000000000000000000000000000000000000..b2c65572736a39a1aa0549c55e5160a4e3a826bf Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan4-1.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan4.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan4.png" new file mode 100644 index 0000000000000000000000000000000000000000..c4f147735c2a07418cd3313eb9f5956ee472614f Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan4.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan5-1.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan5-1.png" new file mode 100644 index 0000000000000000000000000000000000000000..80c3c40fee5ed0e656087f0bf7c9d86c2d619f27 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan5-1.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan5.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan5.png" new file mode 100644 index 0000000000000000000000000000000000000000..7b45357085f46e6b85c1998725eba4891680f894 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-05_Vuebiaodan5.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-capture.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-capture.png" new file mode 100644 index 0000000000000000000000000000000000000000..e608735c552af1daa603596b9f1eff28c92a0d31 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-capture.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-capture2.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-capture2.png" new file mode 100644 index 0000000000000000000000000000000000000000..d1a097a07ac7ddd5d0503407ff464123c1270d23 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-capture2.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-once.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-once.png" new file mode 100644 index 0000000000000000000000000000000000000000..ca2d163294285f5d50089ca3f5f14fc52593116e Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-once.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-prevent-once.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-prevent-once.png" new file mode 100644 index 0000000000000000000000000000000000000000..18ecdbfc2150ee3ee05e258a418f5e3b98bb5a04 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-prevent-once.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-prevent.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-prevent.png" new file mode 100644 index 0000000000000000000000000000000000000000..918b01cb26c2bc7a51d6536131f34d284d306b32 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-prevent.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-prevent2.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-prevent2.png" new file mode 100644 index 0000000000000000000000000000000000000000..7b8ee64187232d11e8db38faea589ee681dc7f3c Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-prevent2.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-self.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-self.png" new file mode 100644 index 0000000000000000000000000000000000000000..5e6b825156b388b0a745fe2a97f166f820cf9995 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-self.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-stop.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-stop.png" new file mode 100644 index 0000000000000000000000000000000000000000..1bfa8af8c062849b3aa4a2855306bc02b22a3eb3 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-stop.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-stop2.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-stop2.png" new file mode 100644 index 0000000000000000000000000000000000000000..8bd40c07ff99ae2e5d277df06c874837bac57df9 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-stop2.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-top.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-top.png" new file mode 100644 index 0000000000000000000000000000000000000000..c6178355324d9cae3988aa2fa6d1bbbe55e84d1a Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_Vue-top.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-07_self.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_self.png" new file mode 100644 index 0000000000000000000000000000000000000000..a09925f2c27cb3c5db9f8bf49f479c2404c1b51c Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-07_self.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/Vue-stop\350\257\246\350\247\243.png" "b/\346\236\227\344\274\237\347\216\256/img/Vue-stop\350\257\246\350\247\243.png" new file mode 100644 index 0000000000000000000000000000000000000000..b00a615e0db8801b66cc941d32f78619a74c95b4 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/Vue-stop\350\257\246\350\247\243.png" differ