08Vue入门教程Vue事件处理

　　1。前言
　　本小节我们介绍Vue中如何进行事件处理。在章节2。2中我们已经介绍了指令von，本章节我们将详细介绍在von的一些用法。包括如何传递参数、如何使用事件修饰符等。其中，事件修饰符是本章节的难点。事件修饰符很多，同学们不需要一下子都记住，只要学会如何使用它，在开发过程中如果有所遗忘，可以通过翻看文档来使用。2。慕课解释
　　可以用von指令监听DOM事件，并在触发时运行一些JavaScript代码。官方定义
　　使用von指令监听DOM事件，并在触发时运行一些JavaScript代码。3。基本使用3。1监听点击事件，并在触发时运行一些JavaScript代码
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbody商品数量｛｛count｝｝buttonvon：clickcountcount1加一个buttonbodyhtml
　　运行案例可查看在线运行效果
　　代码解释：在html第3行，我们使用von指令给button元素绑定来一个click事件，并在点击的时候执行count1的操作。3。2通过methods实现事件函数绑定
　　在上面的例子中，我们把事件处理函数直接写在模板中，然而许多事件处理的逻辑都很复杂，所以直接把JS代码写在von指令中有时并不可行，von指令可以接收一个定义的方法来调用。示例如下：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbody商品数量｛｛count｝｝buttonvon：clickadd加一个buttonbodyhtml
　　运行案例可查看在线运行效果
　　代码解释：在html第3行，我们使用von指令给button元素绑定来一个click事件，并在点击的时候执行add方法。在JS代码第911行，我们定义了方法add；触发该方法时给count1。3。3给事件传递参数
　　有时候我们需要在事件触发的时候传递一些参数，
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbody商品数量｛｛count｝｝buttonvon：clicksetCount（10）设置为10个buttonbuttonvon：clicksetCount（0）设置为0个buttonbodyhtml
　　运行案例可查看在线运行效果
　　代码解释：在html第3行，我们使用von指令给button元素绑定了一个click事件，并在点击的时候执行add方法。在JS代码第911行，我们定义了方法add；触发该方法时给count1。3。4获取原生DOM事件
　　有时我们需要在内联语句处理器中访问原始的DOM事件。可以用特殊变量event把它传入方法：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbody商品数量｛｛count｝｝buttonvon：clicksetCount（10，event）设置为10个buttonbuttonvon：clicksetCount（0，event）设置为0个buttonbodyhtml
　　运行案例可查看在线运行效果
　　代码解释：在上述JS代码第912行，我们定义了事件函数setCount。在按钮点击事件中，我们将event对象传递给函数，因此，在函数setCount中可以访问到原生事件对象。4。事件修饰符
　　在事件处理程序中调用event。preventDefault（）或event。stopPropagation（）是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。为了解决这个问题，Vue。js为von提供了事件修饰符。实现方法就是在事件名称后面以后缀的形式添加指定的修饰符。
　　知识扩展：event。preventDefault（）用来取消事件的默认动作。event。stopPropagation（）用来阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。
　　Vue提供了以下事件修饰符：。stop：阻止单击事件继续传播；。prevent：只有修饰符，提交事件不再重载页面；。capture：添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在自身处理，然后交由内部元素进行处理；。self：只有在event。target是当前元素自身时触发处理函数，即事件不是从内部元素触发的；。once：点击事件将只触发一次；。passive：滚动事件会立即触发，不会等待其他串联事件。即prevent会失效。！阻止单击事件继续传播！提交事件不再重载页面！修饰符可以串联！添加事件监听器时使用事件捕获模式！即内部元素触发的事件先在此处理，然后才交由内部元素进行处理。。。！只当在event。target是当前元素自身时触发处理函数！即事件不是从内部元素触发的。。。！点击事件将只会触发一次
　　接下来，我们用一个完整的示例来看下这些修饰符的使用方法。
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadstyle。container｛height：400px；overflowx：auto；flex：1；｝。containerp｛height：20px；｝stylebody！stop案例buttonclick。stopclickTargetA点我stop案例buttonbuttonclickclickTargetA点我无stop修饰button！submit。prevent案例！capture案例buttonclick。stopclickTargetA点我capture案例button！self案例buttonclickclickTargetA点我self案例button！once案例buttonclick。onceclickTargetA点我once案例buttonbodyhtml
　　运行案例可查看在线运行效果
　　代码解释：代码第47行，stop案例中，当我们给按钮click事件添加。stop修饰符之后，点击按钮，事件不会向上传递。代码第1016行，submit。prevent案例中，当给submit事件添加。prevent修饰符之后，提交事件不再重载页面。代码第1921行，capture案例中，我们给父容器添加了capture事件，当点击按钮的时候，会先触发capture中的事件函数，然后再触发按钮绑定的点击事件。代码第2426行，self案例中，我们给父容器的点击事件添加了。self的修饰符，所以只有点击父容器的时候才会触发该方法，当点击按钮的时候并不会触发父容器绑定的事件。代码第2931行，once案例中，我们给按钮的点击事件添加了。once的修饰符，所以只有首次点击按钮的时候会触发事件函数，再次点击之后将不会触发事件函数。5。按键修饰符
　　在监听键盘事件时，我们经常需要检查详细的按键。Vue允许为von在监听键盘事件时添加按键修饰符：！只有在key是Enter时调用login（）inputvon：keyup。enterlogin！也可以使用keyCodeinputvon：keyup。13login
　　为了在必要的情况下支持旧浏览器，Vue提供了绝大多数常用的按键码的别名：。enter：回车键；。tab：TAB键；。delete：删除和退格键；。esc：只有在event。终止键；。space：删除键；。up：上方向键：。down：下方向键：。left：左方向键：。right：右方向键：6。系统修饰键
　　可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。。ctrl：。alt：。shift：。meta：
　　注意：在Mac系统键盘上，meta对应command键（）。在Windows系统键盘meta对应Windows徽标键（）。在Sun操作系统键盘上，meta对应实心宝石键（）。在其他特定键盘上，尤其在MIT和Lisp机器的键盘、以及其后继产品，比如Knight键盘、spacecadet键盘，meta被标记为META。在Symbolics键盘上，meta被标记为META或者Meta。
　　例如：！AltCinputkeyup。alt。67clear！CtrlClickDosomething
　　Vue提供了。exact修饰符，实现单独的系统按键的事件。
　　例如：！即使Alt或Shift被一同按下时也会触发buttonclick。ctrlonClickAbutton！有且只有Ctrl被按下的时候才触发buttonclick。ctrl。exactonCtrlClickAbutton！没有任何系统修饰符被按下的时候才触发buttonclick。exactonClickAbutton7。小结
　　本节，我们带大家学习了事件处理。主要知识点有以下几点：如何定义事件函数，如何给事件函数传递参数；通过特殊参数event获取原生DOM事件；事件修饰符的使用；按键修饰符的使用；系统修饰键的使用。