zoukankan      html  css  js  c++  java
  • [Vue] Use basic event handling in Vue

    Let's use a range of events and their modifiers to look at the cool ways we can deal with event handlers in Vue.

    <template>
      <div>
        <button @mouseenter="counter += 1">Increment the counter!</button>
        <button @click="increment">Increment using a method!</button>
        <div v-text="counter"></div>
        <form @submit.prevent="logName">
          <input @keyup.ctrl.alt.shift.down="keyHandler" v-model="firstName" placeholder="First name..." />
        </form>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            counter: 0,
            firstName: ''
          }
        },
    
        methods: {
          increment() {
            console.log('counter incremented!')
            this.counter += 1
          },
    
          logName() {
            console.log('firstName:', this.firstName)
          },
    
          keyHandler() {
            this.firstName = 'Evan'
          }
        }
      }
    </script>
    • Using '@' replace 'v-on'
    • @submit.prevent -> preventDefault
    • @submit.stop
    • @submit.once
    • @keyup.ctrl.alt.shift.down --> "ctrl + alt + shift + down" 4 keys click together
  • 相关阅读:
    多线程中注意事项
    多线程实现第三种方式
    线程池《一》
    线程组
    线程间通信注意的问题
    互斥锁
    多个线程通信的问题
    二个线程间的通信
    死锁产生的原理
    线程安全问题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6308722.html
Copyright © 2011-2022 走看看