vue--如何实现绑定事件

Posted 2020-11-24 mrsdong

事件处理

---

 

 

• 监听事件

 

 

　　可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 javascript 代码。

　　

<div id="box1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

<script>
    var practice1 = new Vue({
      el: ‘#box1‘,
      data: {
        counter: 0
      }
    })  
</script>

 

• 事件处理方法

---

　　然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。　　

<div id="box2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: ‘#example-2‘,
  data: {
    name: ‘Vue.js‘
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert(‘Hello ‘ + this.name + ‘!‘)
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// 也可以用 JavaScript 直接调用方法
example2.greet() // => ‘Hello Vue.js!‘