Vue

Posted 2021-03-19 mrsdong

[toc]

事件处理

基础用法

v-on 指令绑定事件后，就会监听相应的事件，并在触发时运行一些 javascript 代码。

　　

<div id="box1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>已点击 {{ counter }} 次</p>
</div>
<script>
    var practice1 = new Vue({
      el: ‘#box1‘,
      data: {
        counter: 0
      }
    })  
</script>

展示效果

注意 ：@click是 v-on:click 的简写形式， @ 即表示 v-on:。

事件处理方法

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

<div id="box2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button @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!‘