Code de gestion des événements Vue3

La première pensée, la
référence doit être changée, de la vue 2.5 à 3 ou plus

<!DOCTPYE html>
<html>
    <head>
        <title>ruguog</title>
    </head> 
    
<body>
    <div id="app">
        <input type="button" value="hamimelon!" @click="test"/>
    </div>


<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
    
    
  data() {
    
    
    return {
    
    
      name: 'Vue.js'
    }
  },
  methods: {
    
    
    greet(event) {
    
    
      // `methods` 内部的 `this` 指向当前活动实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM event
      if (event) {
    
    
        alert(event.target.tagName)
      }
    }
  }
}).mount('#event-with-method')
</script>
</body>
</html>

Deuxième réflexion: modification de mount () et modification de celle-ci en application
Troisième réflexion: modification de la salutation sous les méthodes et mise en test, en suivant les instructions de @click.

<!DOCTPYE html>
<html>
    <head>
        <title>ruguog</title>
    </head> 
<body>
    <div id="app">
        <input type="button" value="hamimelon!" @click="test"/>
    </div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
    
    
  data() {
    
    
    return {
    
    
      name: 'Vue.js'
    }
  },
  methods: {
    
    
    test(event) {
    
    
      // `methods` 内部的 `this` 指向当前活动实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM event
      if (event) {
    
    
        alert(event.target.tagName)
      }
    }
  }
}).mount('#app')
</script>
</body>
</html>

Je suppose que tu aimes

Origine blog.csdn.net/weixin_40945354/article/details/115241754
conseillé
Classement