From d54a531302df92652fe73d2f96bc030f6e0d1682 Mon Sep 17 00:00:00 2001
From: zlhong <1774305002@qq.com>
Date: Wed, 2 Jun 2021 17:25:33 +0800
Subject: [PATCH 1/2] tj

---
 ...7\350\241\250\346\270\262\346\237\223).md" | 154 ++++++++++++++++++
 1 file changed, 154 insertions(+)
 create mode 100644 "\345\274\240\346\236\227\347\272\242/2021-06-02(\345\210\227\350\241\250\346\270\262\346\237\223).md"

diff --git "a/\345\274\240\346\236\227\347\272\242/2021-06-02(\345\210\227\350\241\250\346\270\262\346\237\223).md" "b/\345\274\240\346\236\227\347\272\242/2021-06-02(\345\210\227\350\241\250\346\270\262\346\237\223).md"
new file mode 100644
index 0000000..5ab5c1c
--- /dev/null
+++ "b/\345\274\240\346\236\227\347\272\242/2021-06-02(\345\210\227\350\241\250\346\270\262\346\237\223).md"
@@ -0,0 +1,154 @@
+# 列表渲染
+
+```
+<div id="app">
+    //用 v-for 把一个数组对应为一组元素
+        <li v-for="x in items">
+
+
+            //用 v-for 指令基于一个数组来渲染一个列表。
+            <ul>
+                <li v-for="item in listInfo">
+                 {{item.name}}
+                </li>
+            </ul>
+
+
+            //v-for 还支持一个可选的第二个参数，即当前项的索引。
+            <ul>
+                <li v-for="(item,index) in lists">
+                    {{x}}-{{index+1}}-{{item.nickName}}
+                </li>
+            </ul>
+        </li>
+
+
+            //在v-for里使用对象
+        <ul>
+            <li v-for="value in obj">
+                {{value}}
+            </li>
+        </ul>
+
+
+            //提供第二个的参数为 property 名称 (也就是键名)：
+        <ul>
+            <li v-for="(value,name) in obj">
+                {{name}}:{{value}}
+            </li>
+        </ul>
+
+
+            //第三个参数
+        <ul>
+            <li v-for="(value,name,index) in obj">
+                {{index}}:{{name}}:{{value}}
+            </li>
+        </ul>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+            el: '#app',
+            data: {
+                listInfo: [
+                    {
+                        id: 1,
+                        name: 'Alice'
+                    },
+                    {
+                        id: 2,
+                        name: 'Bob'
+                    }
+                ]
+                ,
+                lists: [
+                    {
+                        id: 1,
+                        nickName: '111'
+                    },
+                    {
+                        id: 2,
+                        nickName: '121'
+                    },
+                    {
+                        id: 3,
+                        nickName: '113'
+                    },
+                ],
+                items: [
+                    "1", "2", "3"
+                ],
+                obj: {
+                    title:'Hello',
+                    author:'Jane',
+                    time:'2021-06-02'
+                }
+            }
+        })
+    </script>
+```
+
+## 数组更新检测
+
+Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
+
+push()
+
+pop()
+
+shift()
+
+unshift()
+
+splice()
+
+sort()
+
+reverse()
+
+
+## 在组件上使用 v-for
+```
+<div id="app">
+        <label for="">看看输入什么</label>
+        <input type="text" v-model="newItem"><input type="button" value="添加" @click="add">
+        <ul>
+            <li v-for="(item,index) in lists">
+                {{item.nickName}} <input type="button" @click='remove(index)' value="删除">
+            </li>
+        </ul>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+            el: '#app',
+            data: {
+                newItem: '',
+                lists: [{
+                    id: 1,
+                    nickName: 'Alice'
+                }, {
+                    id: 2,
+                    nickName: 'Bob'
+                }
+                ]
+            },
+            methods: {
+                add: function () {
+                    let obj = {
+                        id: this.lists.length + 1,
+                        nickName: this.newItem
+                    }
+                    this.lists.push(obj)
+                    this.newItem=''
+                },
+                remove:function(index){
+                    this.lists.splice(index,1)
+                }
+                
+            }
+
+        })
+    </script>
+```
-- 
Gitee


From 21473d78fd8e98f2ae1df4c8c25ed6075ee82f9f Mon Sep 17 00:00:00 2001
From: zlhong <17774305002@qq.com>
Date: Fri, 4 Jun 2021 11:34:51 +0800
Subject: [PATCH 2/2] tj

---
 ...3\344\273\266\345\244\204\347\220\206).md" | 271 ++++++++++++++++++
 1 file changed, 271 insertions(+)
 create mode 100644 "\345\274\240\346\236\227\347\272\242/2021-06-04(\344\272\213\344\273\266\345\244\204\347\220\206).md"

diff --git "a/\345\274\240\346\236\227\347\272\242/2021-06-04(\344\272\213\344\273\266\345\244\204\347\220\206).md" "b/\345\274\240\346\236\227\347\272\242/2021-06-04(\344\272\213\344\273\266\345\244\204\347\220\206).md"
new file mode 100644
index 0000000..da40e36
--- /dev/null
+++ "b/\345\274\240\346\236\227\347\272\242/2021-06-04(\344\272\213\344\273\266\345\244\204\347\220\206).md"
@@ -0,0 +1,271 @@
+# 事件处理
+
+## 监听事件
+
+可以用@click=""，v-on:click监听Dom事件
+
+
+## 事件处理方法
+
+接受调用的方法进行事件处理
+
+```
+<div id="app">
+        <input type="button" value="点击下" @click="hello($event)">
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app=new Vue({
+            el:'#app',
+            data:{
+                
+            },
+            methods:{
+                hello:function(event){
+                    console.log(event);
+                    console.log('你点击了下');
+                }
+            }
+        })
+```
+## 内联处理器中的方法
+
+在内联JavaScript语句中调用方法
+
+```
+<div id="app">
+        <input type="button" value="点击下" @click="hello('1111')">
+        <input type="button" value="点这个" @click="hello('222')">
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app=new Vue({
+            el:'#app',
+            data:{
+                
+            },
+            methods:{
+                hello:function(event){
+                    console.log(event);
+                    console.log('你点击了下');
+                }
+            }
+        })
+    </script>
+```
+## 事件修饰符
+
+.stop
+
+.prevent
+
+.capture
+
+.self
+
+.once
+
+.passive
+```
+<!-- 阻止单击事件继续传播 -->
+<a v-on:click.stop="doThis"></a>
+
+<!-- 提交事件不再重载页面 -->
+<form v-on:submit.prevent="onSubmit"></form>
+
+<!-- 修饰符可以串联 -->
+<a v-on:click.stop.prevent="doThat"></a>
+
+<!-- 只有修饰符 -->
+<form v-on:submit.prevent></form>
+
+<!-- 添加事件监听器时使用事件捕获模式 -->
+<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
+<div v-on:click.capture="doThis">...</div>
+
+<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
+<!-- 即事件不是从内部元素触发的 -->
+<div v-on:click.self="doThat">...</div>
+```
+
+```
+<div id="app">
+        <div @click='say'>
+            <input type="button" value="点击下" @click.stop="hello('111')">
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app=new Vue({
+            el:'#app',
+            methods:{
+                hello:function(event){
+                    console.log(event);
+                },
+                say:function(){
+                    console.log(11);
+                }
+            }
+        })
+    </script>
+```
+
+```
+<div id="app">
+        <div @click.once="doThis">
+            <input type="button" value="点击下" @click="hello('1111')">
+            <input type="button" value="点这个" @click="hello('222')">
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app=new Vue({
+            el:'#app',
+            data:{
+                
+            },
+            methods:{
+                hello:function(event){
+                    console.log(event);
+                },
+                doThis:function(){
+                    console.log('阻止');
+                }
+            }
+        })
+    </script>
+```
+## 按键修饰符
+.enter
+
+.tab
+
+.delete (捕获“删除”和“退格”键)
+
+.esc
+
+.space
+
+.up
+
+.down
+
+.left
+
+.right
+
+```
+<div id="app">
+        <div @click.self="doThis">
+            <input type="button" value="点击下" @keyup.enter="hello">
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app=new Vue({
+            el:'#app',
+            data:{
+                selected:[],
+                lists:[{
+
+                }]
+            },
+            methods:{
+                saChange:function(){
+                    console.log(this.selected);
+                },
+                hello:function(event){
+                    console.log(event);
+                },
+                doThis:function(){
+                    console.log('阻止');
+                }
+            }
+        })
+    </script>
+```
+
+## 系统修饰符
+.ctrl
+
+.alt
+
+.shift
+
+.meta
+
+```
+<div id="app">
+        <div @click.self="doThis">
+            <input type="button" value="点击下" @keyup.alt.65="hello">
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app=new Vue({
+            el:'#app',
+            methods:{
+                hello:function(event){
+                    console.log(event);
+                },
+                doThis:function(){
+                    console.log('阻止');
+                }
+            }
+        })
+    </script>
+```
+
+使用alt+a运行
+
+
+```
+<div id="app">
+        <div @click.self="doThis">
+            <input type="button" value="点击下" @click.ctrl="hello">
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app=new Vue({
+            el:'#app',
+            methods:{
+                hello:function(event){
+                    console.log(event);
+                },
+                doThis:function(){
+                    console.log('阻止');
+                }
+            }
+        })
+    </script>
+```
+使用ctrl+鼠标点击 运行
+
+## 鼠标按钮修饰符
+
+.left
+
+.right
+
+.middle
+
+这些修饰符会限制处理函数仅响应特定的鼠标按钮。
+
+.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
+```
+<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
+<button v-on:click.ctrl="onClick">A</button>
+
+<!-- 有且只有 Ctrl 被按下的时候才触发 -->
+<button v-on:click.ctrl.exact="onCtrlClick">A</button>
+
+<!-- 没有任何系统修饰符被按下的时候才触发 -->
+<button v-on:click.exact="onClick">A</button>
+# 使用 v-on 有几个好处：
+```
+扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
+
+因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
+
+当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
\ No newline at end of file
-- 
Gitee