啥叫内联语句？特殊变量$event，传入方法

hamimelon2020

于 2021-07-29 16:02:35 发布

阅读量286

点赞数

分类专栏： JavaScript vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_40945354/article/details/119213515

版权

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

JavaScript

628 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<div id ="messageHome">
  <button @click="warn('Form cannot be submitted yet.',$event)">Submit</button>
</div>
</html>

<script src="https://unpkg.com/vue@next"></script>
<script>
 const app = Vue.createApp({
   methods:{
    warn(message, event) {
      if (event) {
        event.preventDefault()
      }
      alert(message)
    }
   }
 })
  app.mount('#messageHome')
</script>

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

preventDefault() 方法到底是一个什么方法。

<div id="event-with-method">
  <!-- `greet` 是在下面定义的方法名 -->
  <button @click="greet">Greet</button>
</div>
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')

hamimelon2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
啥叫内联语句？特殊变量$event，传入方法

<!DOCTYPE html><div id ="messageHome"> <button @click="warn('Form cannot be submitted yet.',$event)">Submit</button></div></html><script src="https://unpkg.com/vue@next"></script><script> const
复制链接

扫一扫