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
  • 相关阅读:
    文字列をバイトで切る
    把SmartForm转换成PDF
    相对布局和网格布局
    帧布局和表格布局
    计算器布局
    课堂总结和练习
    Android UI组件
    2层导航
    导航
    课堂总结
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6308722.html
Copyright © 2011-2022 走看看