vue入门：（事件处理）

基本应用
修饰符
为什么要在HTML中使用事件监听
Demo

一、基本应用

1.通过v-on指令绑定事件，例如： <button v-on:click="">提交</button> ；

在vue官方教程上第一个示例是直接在表达式中写入一个可执行计算代码：

<button v-on:click="conter += 1">add 1</button>

//conter是一个data数据，触发点击事件后可以直接将计算的最新结果渲染到页面

2.通过methods实现事件函数绑定，例如：

 <div id="example">

 <button v-on:click="greet">Greet</button>

 </div>

 <script>

 var vm = new Vue({

     el:"#example",

     data:{

         name:"vuejs"

     },

     methods:{

         greet(event){

             alert("hello!" + event.target.tagName + "的" + this.name + "事件click");

         }

     }

 });

 </script>

2.给事件函数传递参数：这是后就需要使用变量$event实现传入事件源对象了。

 <button v-on:click="greet('vuejs',$event)">Greet</button>

 greet(message,event){

     alert("hello!" + event.target.tagName + "的" + message + "事件click");

 }

二、修饰符

事件修饰符
按键修饰符与按键码
系统修饰符
exact修饰符
鼠标按钮修饰符

修饰符可以理解为处理相关事件的特殊情况，实现方法就是在事件名称后面以后缀的形式添加指定的修饰符。

1.事件修饰符：https://cn.vuejs.org/v2/guide/events.html#事件修饰符

.stop：阻止单击事件继续传播；

.prevent：只有修饰符，提交事件不再重载页面，修饰符可串联；

.capture：添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在自身处理，然后交由内部元素进行处理；

.self：只有在event.target是当前元素自身时出发处理函数，即事件不是从内部元素触发的；

.once：点击事件将只触发一次；

.passice：滚动事件会立即触发，不会等待其他串联事件。即prevent会失效。

2.按键修饰符与按键码

.enter:只有在‘key’是‘Enter’时调用事件处理函数 <input v-on:keyup.enter="submit"> ；

.kebab-case:可以将keyboardEvent.key暴露的任意有效按键名转换为kebab-case来作为修饰符，意思是通过串联符‘-’来表示键盘上的驼峰命名按键事件，实现$event.tey指定键盘上驼峰命名按钮事件，例如： <input v-on:keyup.page-down="onPageDown"> ；

按键别名：

.enter:回车键；

.tab:TAB键；

.delete:删除和退格键；

.esc:终止键；

.space:删除键；

方向键：.up、.down、left、.right；

还可以通过Vue全局上的config.keyCodes对象自定义按键修饰符别名：例如 Vue.config.keyCodes.f1 = 112 ；

3.系统修饰键

.ctrl、.alt、.shift、.meta;前面三个键都能对应的上，meta是“窗口键”，在window上是window图标的那个键，其它系统大家对号入座。

通过系统修饰键组合按键指令：例如：

 <!-- Alt + C -->

 <input @keyup.alt.67="clear">

 <!-- Ctrl + Click -->

 <div @click.ctrl="doSomething">Do something</div>

这时候就会有新的问题产生，如果需要单独的系统按键的事件怎么办呢？Vue提供了.exact修饰符：

 .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

 <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->

 <button @click.ctrl="onClick">A</button>

 <!-- 有且只有 Ctrl 被按下的时候才触发 -->

 <button @click.ctrl.exact="onCtrlClick">A</button>

 <!-- 没有任何系统修饰符被按下的时候才触发 -->

 <button @click.exact="onClick">A</button>

4.鼠标按钮修饰符2.2.0版本

.left、.right、.middle

三、为什么要在HTML中使用事件监听

我们通常在描述vue时都会说它是一个数据驱动的框架，而这种事件监听的方式违背了这个说法，但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

四、demo

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     <style>

         *{

             list-style:lower-alpha;

         }

     </style>

 </head>

 <body>

     <div id="app">

         <input type="text" v-model.trim="taskText" v-on:change="addTask">

         <button v-on:click="accomplishTaskList">提交</button>

         <span>{{prompt}}</span>

         <ul>

             <li v-for="(item, key) in newTask" v-bind:key="item">

                 <span>{{item}}</span>

                 <button v-on:click="accomplishTask(key)">X</button>

             </li>

         </ul>

         <h3>已完成任务</h3>

         <ul>

             <li v-for="item in taskList">{{item}}</li>

         </ul>

     </div>

     <script>

         var vm = new Vue({

             el:"#app",

             data:{

                 taskText:"",

                 newTask:[],

                 taskList:[],

                 prompt:""

             },

             methods:{

                 addTask(){

                     if(this.taskText == ""){

                         this.prompt = "输入不能为空";

                         return;

                     }else if(this.newTask.includes(this.taskText) || this.taskList.includes(this.taskText)){

                         this.prompt = "不能重复输入任务";

                     }else{

                         this.newTask.unshift(this.taskText);

                         // this.newTask.unshift(this.taskText);

                         this.taskText = "";

                     }

                 },

                 accomplishTask(index){

                    const val = this.newTask.splice(index,1);

                    this.taskList.push(...val);

                 },

                 accomplishTaskList(){

                     const valList = this.newTask.splice(0);

                     this.taskList.push(...valList);

                 }

             }

         });

     </script>

 </body>

 </html>