Vue学习Day002

内联处理器的操作

• 除了直接绑定到一个方法，也可以在内联JavaScript语句中调用方法

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

• 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

• 此时打印出event对象可以看到原生对象属性"{"isTrusted":true}"

"{"isTrusted":true}" 为true表明当前事件是由用户行为触发(比如说真实的鼠标点击触发一个click事件), 为false表明事件由一个脚本生成的(使用事件构造方法,比如event.initEvent)

“event.preventDefault()”阻止默认的原生事件