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" index 0e1912335081779599c13a1f0a355dd011e9776b..c5638039415f55ebd3439f01ecff4054492fe746 100644 --- "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" @@ -105,7 +105,8 @@ el:'#app', data:{ txt:'比u比u', - checked:'' + checked:'', + select:'' }, methods:{ up:function(){ @@ -141,13 +142,205 @@ data:{ txt:'比u比u', checked:[] + } + }) + + + +``` +![](./img/2021-06-05_Vuebiaodan5.png) +![](./img/2021-06-05_Vuebiaodan5-1.png) + + +### 单选按钮 +``` + +
+ + +
+ + + +
+ + 选择：{{txt}} +
+ + + + + +``` +![](./img/2021-06-10_Vuedanxuan.png) + + +### 选择框 +1. 单选时 +``` + +
+ + + 选择：{{txt}} +
+ + + + + +``` +![](./img/2021-06-10_Vuexuanzekuang.png) + + +* 如果 v-model 表达式的初始值未能匹配任何选项， + + + + +
+ 选择：{{txt}} + + + + + + +``` +![](./img/2021-06-10_Vuexuanzeqi2.png) + + +3. 用 v-for 渲染的动态选项 +``` + +
+ + 选择：{{selected}} +
+ + + + + +``` +![](./img/2021-06-10_Vuexuanzeqi3.png) + + + +### 值绑定（好处在于绑定了值它选择的内容不会乱） +1. 对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值) +``` + +
+ + +
+ + + +
+ + 选择：{{txt}} + +
+ + + +
+ +
+ + + + + +``` +![](./img/2021-06-10_Vuezhibangding.png) + +* 如果想把值绑定到Vue实例的一个动态property上，这时就可以用v-bind实现，并且这个property的的值可以不是字符串。 + + +### 修饰符 +``` + +
+
+ + {{txt}} +
+
+ + + + + + +``` +![](./img/2021-06-10_Vuelazy2.png) +* 加上.lazy后相当于 双向数据绑定不起作用了。 + +2. number(将用户输入值转为数值类型，要转一起转，有异同的转不了) + +``` + +
+
+ + {{txt}} +
+
+ + + + + +``` +![](./img/2021-06-10_Vuenumber.png) + + +3. trim(想要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符) +``` + +
+
+ + {{txt}} +
+
+ + + + + +``` +![](./img/2021-06-10_Vuetrim.png) diff --git "a/\346\236\227\344\274\237\347\216\256/Vue-2020-06-08-\347\273\204\344\273\266\345\237\272\347\241\200.md" "b/\346\236\227\344\274\237\347\216\256/Vue-2020-06-08-\347\273\204\344\273\266\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..f8e677cf245e2873ea7568f153725244f11baaf2 --- /dev/null +++ "b/\346\236\227\344\274\237\347\216\256/Vue-2020-06-08-\347\273\204\344\273\266\345\237\272\347\241\200.md" @@ -0,0 +1,80 @@ +## 组件基础 + + +### 基本示例 +``` +body> +
+ +
+ + + + + +``` +![](./img/2021-06-08_Vuezujian.png) + + +### 组件的复用（将组建进行任意次数复用） +``` + +
+ + + + +
+ + + + + +``` +![](./img/2021-06-08_Vuefuyong.png) + + +### 组件的组织 +![](./img/2021-06-08_Vuezuzhi.png) \ No newline at end of file diff --git "a/\346\236\227\344\274\237\347\216\256/Vue-2020-06-09-Vue cli\344\270\216\346\217\222\346\247\275.md" "b/\346\236\227\344\274\237\347\216\256/Vue-2020-06-09-Vue cli\344\270\216\346\217\222\346\247\275.md" new file mode 100644 index 0000000000000000000000000000000000000000..de695defe1b3017ec03209baa507c40888d98732 --- /dev/null +++ "b/\346\236\227\344\274\237\347\216\256/Vue-2020-06-09-Vue cli\344\270\216\346\217\222\346\247\275.md" @@ -0,0 +1,73 @@ +## 插槽与 Vue/cli + +### 插槽 +1. 向一个组件传递内容。 +``` + +
+ hello,插槽 +
+ + + + + +``` +![](./img/2021-06-09_Vuechacao.png) + +试试另一种 +``` + +
+ + hello,插槽 + +
+ + + + + +``` +![](./img/2021-06-09_Vuechacao2.png) + + + +### \ No newline at end of file diff --git "a/\346\236\227\344\274\237\347\216\256/Vue-2020-06-11-cli\346\226\271\345\274\217.md" "b/\346\236\227\344\274\237\347\216\256/Vue-2020-06-11-cli\346\226\271\345\274\217.md" new file mode 100644 index 0000000000000000000000000000000000000000..d0e235adf30a080b0a7f887f9142d3ed1f7f0d3d --- /dev/null +++ "b/\346\236\227\344\274\237\347\216\256/Vue-2020-06-11-cli\346\226\271\345\274\217.md" @@ -0,0 +1,4 @@ +### 前面部分还是和上次一样 +![](./img/2021-06-12_174705.png) + +1. 接下来 diff --git "a/\346\236\227\344\274\237\347\216\256/Vue-2020-06-12-\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266.md" "b/\346\236\227\344\274\237\347\216\256/Vue-2020-06-12-\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266.md" new file mode 100644 index 0000000000000000000000000000000000000000..15116df5ec91edbafca2c6487cda4d8067bb731c --- /dev/null +++ "b/\346\236\227\344\274\237\347\216\256/Vue-2020-06-12-\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266.md" @@ -0,0 +1,17 @@ +## 单文件组件 + +### 单文件组件 .vue文件 +之前的 Vue 项目当中我们用 Vue.component 来定义全局组件，接着用 new Vue({el:"#app"})。这样有很多的缺点就会暴露出来。 +* 全局定义： 强制的要求component中的名称不能重复。 +* 字符串模板：在HTML很多行的时候，要用到/。 +* 不支持CSS：同HTML一个模板可以写HTML和Javascript却不能写CSS。 +* 没有构建步骤：限制只能使用HTML和Javascript,却不能使用预处理器。 + +1. Vue.js自定义的 .vue文件，可以把html、javascript、css写到一个组件当中，实现对一个组件的封装。template里面写的都是html的代码。 +![](./img/2021-06-12_Vuehtml.png) + +script里面写的是js的代码 +![](./img/2021-06-12_Vuescript.png) + +style里面写的是CSS里面的样式 +![](./img/2021-06-12_Vuestyle.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 55d13b04976c50f95b50dd9bc19efa9ce2e9d40e..96619d7ffd168b941d7682deefb9750f4aed68fb 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" @@ -421,6 +421,23 @@ ### 按键修饰符 +1. Vue允许v-on在监听键盘事件时添加按键时修饰符。 +``` +//只有在 'key' 是 'Enter' 时调用 submint 方法 + + +//也可以直接将 keyboardEvent.key 暴露的忍一有效按键名转换为 kebab-case 来作为修饰符号。 + +//下面这个示例，处理函数只有在 'key' 等于 PageDown 时被调用 + +``` + +2. keyCode 的事件已被弃废，并不可能被心得浏览器所支持，使用keyCode特性也是允许的。 +``` + +``` + +3. 为了支持旧版本，提供了常用的按键码别名。 * .enter           //回车键 * .tab            //tab键 * .delete          //“删除”和“退格”键 @@ -434,14 +451,89 @@ 类似： ``` - + ``` 按下top 键 ![](./img/2021-06-07_Vue-top.png) + 可通过全局的 Vue.config.keyCodes 对象自定义按键修饰符别名。 + ``` +Vue.config.keyCodes.f1 = 999 + ``` + + 5. Vue中还支持组合写法： + ``` + 组合写法 按键组合 +@keyup.alt.67=”function” Alt + C +@click.ctrl=”function” Ctrl + Click +@keyup.ctrl.c=”function” Ctrl + C +@keyup.ctrl.c+@keyup.c=”function” Ctrl + C +``` + +### 系统修饰键(仅在按下相应按键时才触发鼠标或键盘事件的监听器，简单地说就是，配合其他按键才能使用,假设：在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。) + +1. .ctrl +2. .alt +3. .shift +4. .meta + +* 注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。 -### 系统修饰键 +``` + + + + +
...
+``` + + +### .exact修饰符 +1. 可以让你控制精确的系统修饰符组合触发事件。 +``` + + + + + + + + +``` + +### 鼠标按钮修饰符(这些修饰符会限制处理函数仅响应特定的鼠标按钮) +1. .left:点击鼠标左键即可触发事件 +2. .right:点击鼠标右键即可触发事件 +3. .middle:按下滑轮触发事件 + + +``` +
+ + + + + + + + +
+ + + +``` ## 所以， .stop 和 .self 的区别是在哪呢？ \ No newline at end of file diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-08_Vuefuyong.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-08_Vuefuyong.png" new file mode 100644 index 0000000000000000000000000000000000000000..e32ff65c0eb07c6ecc7aa1260d6a3030cb8069bb Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-08_Vuefuyong.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-08_Vuezujian.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-08_Vuezujian.png" new file mode 100644 index 0000000000000000000000000000000000000000..9904f3582719c329072d748a29aa40fba368d3be Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-08_Vuezujian.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-08_Vuezuzhi.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-08_Vuezuzhi.png" new file mode 100644 index 0000000000000000000000000000000000000000..c41f7feec8bb9dee2fe2215e040e3c79a1de56cf Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-08_Vuezuzhi.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-09_Vuechacao.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-09_Vuechacao.png" new file mode 100644 index 0000000000000000000000000000000000000000..9aeff4d6b854ffaec34d16e17e31cde9fdad3c79 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-09_Vuechacao.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-09_Vuechacao2.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-09_Vuechacao2.png" new file mode 100644 index 0000000000000000000000000000000000000000..cb3f45951f832b81f6d539a1c7da72bfa16625c9 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-09_Vuechacao2.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuedanxuan.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuedanxuan.png" new file mode 100644 index 0000000000000000000000000000000000000000..fadf354b3f882e98090e69ce7f76801f90e9a03f Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuedanxuan.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuelazy.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuelazy.png" new file mode 100644 index 0000000000000000000000000000000000000000..97d2b72c0711511bd71b2fd06306cc87c57fe433 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuelazy.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuelazy2.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuelazy2.png" new file mode 100644 index 0000000000000000000000000000000000000000..d980081a17a7253518e1892b0427611dcd94aa65 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuelazy2.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuenumber.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuenumber.png" new file mode 100644 index 0000000000000000000000000000000000000000..1b3fb1ffd46e4049a6c8e2f31b95879257e212b6 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuenumber.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuetrim.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuetrim.png" new file mode 100644 index 0000000000000000000000000000000000000000..86ba84514f089e8bbb5798b76ff3786fd95fc99a Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuetrim.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuexuanzekuang.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuexuanzekuang.png" new file mode 100644 index 0000000000000000000000000000000000000000..afc562f7f7949035908c39b3d085b907a8c2ba19 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuexuanzekuang.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuexuanzeqi2.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuexuanzeqi2.png" new file mode 100644 index 0000000000000000000000000000000000000000..2a7ebb5bf2fa21d6b88125adf59e788b6fb1d787 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuexuanzeqi2.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuexuanzeqi3.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuexuanzeqi3.png" new file mode 100644 index 0000000000000000000000000000000000000000..036d15cafe7e7d572f25c57c9e939217a4bcf0f5 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuexuanzeqi3.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuezhibangding.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuezhibangding.png" new file mode 100644 index 0000000000000000000000000000000000000000..22c9498e23693140b7cf6909dc5ccbce933f6eb8 Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-10_Vuezhibangding.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-12_174705.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-12_174705.png" new file mode 100644 index 0000000000000000000000000000000000000000..d7c525cc79126b504c7910b70a556e938b25990c Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-12_174705.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-12_Vuehtml.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-12_Vuehtml.png" new file mode 100644 index 0000000000000000000000000000000000000000..d5b0813c99fffcb52e1c9e4314785e64a73f53eb Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-12_Vuehtml.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-12_Vuescript.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-12_Vuescript.png" new file mode 100644 index 0000000000000000000000000000000000000000..923ed648f5499f5703a6bd5bb8ce7acd9de8e44c Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-12_Vuescript.png" differ diff --git "a/\346\236\227\344\274\237\347\216\256/img/2021-06-12_Vuestyle.png" "b/\346\236\227\344\274\237\347\216\256/img/2021-06-12_Vuestyle.png" new file mode 100644 index 0000000000000000000000000000000000000000..ee38d8f6a76f07180701329facccc1dfd78814af Binary files /dev/null and "b/\346\236\227\344\274\237\347\216\256/img/2021-06-12_Vuestyle.png" differ