From a4a8a68c3b3a8ae0da0bd31c922686e799f472e3 Mon Sep 17 00:00:00 2001 From: YH <2543387770@qq.com> Date: Wed, 2 Jun 2021 17:31:28 +0800 Subject: [PATCH 1/2] =?UTF-8?q?Vue=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...27\350\241\250\346\270\262\346\237\223.md" | 140 ++++++++++++++++++ .../img/6.2-1.png" | Bin 0 -> 3276 bytes 2 files changed, 140 insertions(+) create mode 100644 "\351\273\204\345\256\207\347\205\214/6.2 Vue\345\210\227\350\241\250\346\270\262\346\237\223.md" create mode 100644 "\351\273\204\345\256\207\347\205\214/img/6.2-1.png" diff --git "a/\351\273\204\345\256\207\347\205\214/6.2 Vue\345\210\227\350\241\250\346\270\262\346\237\223.md" "b/\351\273\204\345\256\207\347\205\214/6.2 Vue\345\210\227\350\241\250\346\270\262\346\237\223.md" new file mode 100644 index 0000000..1da6f0d --- /dev/null +++ "b/\351\273\204\345\256\207\347\205\214/6.2 Vue\345\210\227\350\241\250\346\270\262\346\237\223.md" @@ -0,0 +1,140 @@ +# 列表渲染 + +## v-for把数组渲染一组元素 +v-for 还支持一个可选的第二个参数，即当前项的索引。 +``` + +
+ +
+``` +``` +// 后端代码 +let app = new Vue({ + el:"#app", + data:{ + todoItem:"", + lists:[ + { + id:1, + todo:"洗脸" + }, + { + id:2, + todo:"吃饭" + }, + { + id:3, + todo:"睡觉" + } + ] + }, +}) +``` + +## 在 v-for 里使用对象 +第二个的参数(key)为 property 名称 (也就是键名)。 +``` + +
+ +
+``` +``` +// 后端代码 +let app = new Vue({ + el:"#app", + data:{ + objs:{ + title:"静夜思", + author:"李白" + } + } +}) +``` + +## 数组更新 +### 变更方法 +1. push() 向数组的末尾添加一个或多个元素，并返回新的长度。 +2. pop() 用于删除并返回数组的最后一个元素。 +3. shift() 用于把数组的第一个元素从其中删除，并返回第一个元素的值。 +4. unshift() 向数组的开头添加一个或更多元素，并返回新的长度。 +5. splice() 向/从 数组中 添加/删除 项目，然后返回被删除的项目。 +6. sort() 用于对数组的元素进行排序。 +7. reverse() 用于颠倒数组中元素的顺序。 + +### 替换方法 +1. filter() 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 +2. concat() 用于连接两个或多个数组。 +3. slice() 可从已有的数组中返回选定的元素。 +4. split() 用于把一个字符串分割成字符串数组。 + +## 演示 + +![图片](./img/6.2-1.png) + +``` + +
+ + + +

{{todoItem}}

+ +
+``` + +``` +// 后端代码 +let app = new Vue({ + el:"#app", + data:{ + lists:[ + { + id:1, + todo:"洗脸" + }, + { + id:2, + todo:"吃饭" + }, + { + id:3, + todo:"睡觉" + }, + { + id:4, + todo:"刷牙" + }, + { + id:5, + todo:"吃土" + }, + ] + }, + methods:{ + addbtn:function(){ + objs={ + id:this.lists.length+1, + todo:this.todoItem + } + this.lists.push(objs); + this.todoItem=null; + }, + remove:function(index){ + console.log(index); + this.lists.splice(index,1) + }, + } +}) +``` \ No newline at end of file diff --git "a/\351\273\204\345\256\207\347\205\214/img/6.2-1.png" "b/\351\273\204\345\256\207\347\205\214/img/6.2-1.png" new file mode 100644 index 0000000000000000000000000000000000000000..bffe6b11cfa720f1fa2da8ed4f7e453abb0101e5 GIT binary patch literal 3276 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 Date: Fri, 4 Jun 2021 11:36:13 +0800 Subject: [PATCH 2/2] =?UTF-8?q?Vue=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...13\344\273\266\345\244\204\347\220\206.md" | 128 ++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 "\351\273\204\345\256\207\347\205\214/6.4 Vue\344\272\213\344\273\266\345\244\204\347\220\206.md" diff --git "a/\351\273\204\345\256\207\347\205\214/6.4 Vue\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\351\273\204\345\256\207\347\205\214/6.4 Vue\344\272\213\344\273\266\345\244\204\347\220\206.md" new file mode 100644 index 0000000..30d683f --- /dev/null +++ "b/\351\273\204\345\256\207\347\205\214/6.4 Vue\344\272\213\344\273\266\345\244\204\347\220\206.md" @@ -0,0 +1,128 @@ +# 事件处理 + +## 事件处理方法 + +可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码，@ 是v-on的缩写，我们可以在使用过程中吧 v-on 绑定一个方法进行使用。 + +``` + +
+ +

生命值：{{count}}

+ +
+``` +``` +// 后端代码 +let app = new Vue({ + el: "#app", + data: { + count: 0, + hurt: 3 + }, + methods: { + reduce: function (id, event) { + this.count -= id; + console.log(id); + // `event` 是原生 DOM 事件 + console.log(event); + } + } +}) +``` + +## 事件修饰符 + +我们可以通过事件修饰符去处理 DOM 事件细节。 + +常用修饰符指令： ++ .stop 阻止事件继续传播 ++ .prevent 阻止标签默认行为 ++ .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 ++ .self 只当在 event.target 是当前元素自身时触发处理函数 ++ .once 事件将只会触发一次 ++ .passive 告诉浏览器你不想阻止事件的默认行为 + +``` + + + + +
+ + + + + +
+ + + +
...
+ + + +
...
+``` + +## 按键修饰符 +在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： + +``` + + +``` + +### 按键码 + +常用的按键码别名： + ++ .enter 回车键 ++ .tab Tab键 ++ .delete Delete键 ++ .esc ESC键 ++ .pace 空格键 ++ .up 向上键 ++ .down 向下键 ++ .left 向左键 ++ .right 向右键 + + +### 系统修饰键 + +修饰键在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。 + +``` + + +``` + +常用的系统修饰键别名： + ++ .ctrl ++ .alt ++ .shift ++ .meta + +### .exact 修饰符 + +.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。 + +``` + + + + + + + + +``` + +### 鼠标按钮修饰符 + ++ .left 鼠标左键 ++ .right 鼠标右键 ++ .middle 鼠标中键 + +这些修饰符会限制处理函数仅响应特定的鼠标按钮。 \ No newline at end of file -- Gitee