• Vue--事件处理


    可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

    例子

     1   <head>
     2     <title>Vue监听事件</title>
     3     <script src="vue.js"></script>
     4   </head>
     5   <body>
     6    <div id="app">
     7       <button v-on:click="counter+=1">add 1</button>
     8       <p>你一共点击了 {{counter}} 次</p>
     9    </div>
    10    <script>
    11      new Vue({
    12        el:"#app",
    13        data:{
    14          counter:0
    15        }
    16      })
    17    </script>
    18   </body>
    19 </html>

    浏览器打开如下:

    每点击一次按扭数字就会加1

    事件处理方法:

    但这种情况不适合逻辑很复杂的时候,当逻辑很复杂时我们用v-on接收一个需要调用的方法名称

    如下:

     1 <html>
     2   <head>
     3     <title>Vue事件处理方法</title>
     4     <script src="vue.js"></script>
     5   </head>
     6   <body>
     7    <div id="app">
     8      <button v-on:click="greet">greet</button>
     9    </div>
    10    <script>
    11      new Vue({
    12        el:"#app",
    13        data:{
    14          name:"Vue.js"
    15        },
    16        methods:{
    17          greet:function(){
    18             alert("Hello " + this.name + "!");
    19          }
    20        }
    21      })
    22    </script>
    23   </body>
    24 </html>

    浏览器打开显示:

    内联处理器中的方法

    除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法:

     1 <html>
     2 <head>
     3 <title>Vue内联处理器的方法</title>
     4 <script src="vue.js"></script>
     5 </head>
     6 <body>
     7 <div id="app">
     8 <button v-on:click="greet('小明')">say 小明</button>
     9 <button v-on:click="greet('小红')">say 小红</button>
    10 </div>
    11 <script>
    12 new Vue({
    13 el:"#app",
    14 methods:{
    15 greet:function(name){
    16 alert("Hello" + name);
    17 }
    18 }
    19 })
    20 </script>
    21 </body>
    22 </html>

    事件修饰符:

    我们来看一个例子

    1 <div id="app">
    2   <form action="form.php" method="POST">
    3      <label>用户名</label>
    4      <input type="text" placeholder="请输入用户名" v-model="name"><br><br>
    5      <label>密 码 </label>
    6      <input type="password" placeholder="请输入密码" v-model="password"><br><br>
    7      <input type="submit" value="提交" @click="submit">
    8   </form>
    9 </div>
     1 new Vue({
     2   el:"#app",
     3   data:{
     4     name:"",
     5     password:""
     6   },
     7   methods:{
     8      submit:function() {
     9         if (this.name === "" || this.password === "") {
    10            
    11            alert("必填项不得为空!");
    12         
    13         } 
    14      
    15       
    16      }
    17   }
    18 })

    我们希望在提交表单之前做下校验,检测输入框是否输入了值,如果没输入提醒用户输入,页面不进行跳转,我们遇到一个问题现在是提醒了但它还是回跳转,这是因为点击submit会自动提交form

    我们可以用JavaScript去阻止它

     1 new Vue({
     2   el:"#app",
     3   data:{
     4     name:"",
     5     password:""
     6   },
     7   methods:{
     8      submit:function(event) {
     9         if (this.name === "" || this.password === "") {
    10            event.preventDefault(); // 阻止默认事件
    11            alert("必填项不得为空!");
    12         
    13         } 
    14      
    15       
    16      }
    17   }
    18 })

    这样我们就解决了这个问题。

    尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

    为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

    • .stop
    • .prevent
    • .capture
    • .self
    • .once

     1 <input type="submit" value="提交" @click.prevent="submit"> 

    js也不去处理 DOM 事件细节。很轻松的就可以解决问题。

     使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

    还有一个重要的事件对象的例子:

     1 <html>
     2   <head>
     3     <title>Vue事件对象</title>
     4     <script src="vue.js"></script>
     5     <style type="text/css">
     6     </style>
     7   </head>
     8   <body>
     9    <div id="example"> 
    10      <button @click="doSomething($event)">按扭</button>
    11    </div>
    12    <script>
    13      new Vue({
    14        el:"#example",
    15        methods:{
    16           doSomething(event){
    17              alert(event.target.tagName);
    18           }
    19        }
    20      })
    21 
    22    </script>
    23   </body>
    24 </html>

    $event就是指向的原生js对象

    顺便也解决了以下的问题

     1 <html>
     2   <head>
     3     <title>Vue事件对象</title>
     4     <script src="vue.js"></script>
     5     <style type="text/css">
     6     </style>
     7   </head>
     8   <body>
     9    <div id="example"> 
    10      <button @click="doSomething(msg,$event)">按扭</button>
    11    </div>
    12    <script>
    13      new Vue({
    14        el:"#example",
    15        data:{
    16           msg:"Hello"
    17        },
    18        methods:{
    19           doSomething(msg,event){
    20              alert(this.msg + " " +  event.target.tagName);
    21           }
    22        }
    23      })
    24    </script>
    25   </body>
    26 </html>
  • 相关阅读:
    矩阵树定理
    随机乱搞算法
    数学
    BZOJ——3412: [Usaco2009 Dec]Music Notes乐谱
    BZOJ—— 3402: [Usaco2009 Open]Hide and Seek 捉迷藏
    洛谷—— P2884 [USACO07MAR]每月的费用Monthly Expense
    洛谷—— P2417 课程
    洛谷—— P1577 切绳子
    COGS 2598. 美丽的感觉
    10.23 模拟赛
  • 原文地址:https://www.cnblogs.com/qjuly/p/8617244.html
Copyright © 2020-2023  润新知