• 11.Vue2-事件处理器的用法

    题记

            vue2事件处理器的用法

    v-on

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    7. head>
    8. <body>
    9. <div id="app">
    10.   <button v-on:click="counter += 1">增加 1button>
    11.   <p>这个按钮被点击了 {{ counter }} 次。p>
    12. div>
    13.  
    14. <script>
    15. new Vue({
    16.   el: '#app',
    17.   data: {
    18.     counter: 0
    19.   }
    20. })
    21. script>
    22. body>
    23. html>

    接收方法

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    7. head>
    8. <body>
    9. <div id="app">
    10.    
    11.   <button v-on:click="greet">Greetbutton>
    12. div>
    13.  
    14. <script>
    15. var app = new Vue({
    16.   el: '#app',
    17.   data: {
    18.     name: 'Vue.js'
    19.   },
    20.   // 在 `methods` 对象中定义方法
    21.   methods: {
    22.     greet: function (event) {
    23.       // `this` 在方法里指当前 Vue 实例
    24.       alert('Hello ' + this.name + '!')
    25.       // `event` 是原生 DOM 事件
    26. 	  if (event) {
    27. 		  alert(event.target.tagName)
    28. 	  }
    29.     }
    30.   }
    31. })
    32. // 也可以用 JavaScript 直接调用方法
    33. app.greet() // -> 'Hello Vue.js!'
    34. script>
    35. body>
    36. html>

     内联javascript语句

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    7. head>
    8. <body>
    9. <div id="app">
    10.   <button v-on:click="say('hi')">Say hibutton>
    11.   <button v-on:click="say('what')">Say whatbutton>
    12. div>
    13.  
    14. <script>
    15. new Vue({
    16.   el: '#app',
    17.   methods: {
    18.     say: function (message) {
    19.       alert(message)
    20.     }
    21.   }
    22. })
    23. script>
    24. body>
    25. html>

     事件修饰符










    ...


    ...


    按键修饰符 


     

    别名 




     

    实例 




    Do something
     

    后记 

            觉得有用可以点赞或收藏 ！

  • 相关阅读:
    uni-app:实现等待加载功能
    深度解析shell脚本的命令的原理之rm
    MSDC 4.3 接口规范（23）
    Mac PHP7.4安装
    uniapp自定义组件
    如何把VRTE的应用程序在Ubuntu上跑起来？
    【每日一题Day338】LC2582递枕头 | 模拟+数学
    Java SPI的原理和实践
    排序算法（以从小到大排列为例）
    【JavaWeb】JSP基本语法、指令、九大内置对象、四大作用域
  • 原文地址：https://blog.csdn.net/m0_70819559/article/details/134082834