06-v-on的基本使用

阿新 • • 發佈：2020-12-27

技術標籤：vue vue

v-on可以繫結很多時間監聽，如：click（點選時間）,keyup（鍵盤彈起事件）等

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title> 

</head>
<body>
  <script src="../js/vue.js"></script>
  <div id="app">
    <h2>{{counter}}</h2>
    <!-- 第一種寫法：直接在指令中使用 -->
    <!-- <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button> --> 


    <!-- 第二種寫法：使用methods屬性 -->
    <!-- <button v-on:click="increment">+</button>
    <button v-on:click="subcrement">-</button> -->

    <!-- 第三種寫法：語法糖 -->
    <button @click="increment">+</button>
    <button @click 
="subcrement">-</button>
  </div>

  <script>
  const app=new Vue({
    el: '#app',
    data: {
      counter:0
    },
    methods:{
      increment(){
        this.counter++;
      },
      subcrement(){
        this.counter--;
      }
    }
  })
  </script>
</body>
</html>

06-v-on的基本使用

技術標籤：vuevue v-on可以繫結很多時間監聽，如：click（點選時間）,keyup（鍵盤彈起事件）等

06.v-on指令基礎

06.v-on的修飾符

06.v-on引數問題

詳解vue中v-on事件監聽指令的基本用法

一、本節說明我們在開發過程中經常需要監聽使用者的輸入，比如：使用者的點選事件、拖拽事件、鍵盤事件等等。這就需要用到我們下面要學習的內容v-on指令。

VUE基本指令v-html、v-text、v-cloak、v-once、v-pro、v-on

技術標籤：VUEvue 1、v-html、v-text、{{}} 上面三種都是渲染文字的方法，使用場景的區別

vue學習---事件的基本使用(v-on / @xxx)

事件的基本使用： 1.使用v-on:xxx 或 @xxx 繫結事件，其中xxx是事件名； 2.事件的回撥需要配置在methods物件中，最終會在vm上；

關於vue3預設把所有onSomething當作v-on事件繫結的思考

最近在重新看vue3的rfcs，發現一個細節，原話如下： props that start with on are handled as v-on bindings,with everything after on being converted to all-lowercase as the event name (more on this below)