vue中的事件处理

最新推荐文章于 2024-03-31 21:19:53 发布

艺术就是派大星220

最新推荐文章于 2024-03-31 21:19:53 发布

阅读量155

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Rossbort/article/details/120302712

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

vue可以用v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码（或者指定一个封装函数），通过v-on指令修饰click点击事件,可简写用@代替

v-on:实现点击事件处理

<div id="app">
  <!-- `greet` 是在下面定义的方法名 greet方法也可以传递实参--> 
  <button v-on:click="greet($event)">Greet</button>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  // 在 methods 对象中定义方法，methods里面的方法最终都会挂载在实例上，this都指向当前实例
  methods: {
    greet: function (event) {
      // this在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // event是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

vue也为v-on提供了事件修饰符，方便我们处理

事件修饰符        
@click.prevent='函数名' 就是阻止了默认行为   （preventDefault）
@click.stop = '函数名'  就是阻止冒泡         (stopPropergation)
@click.once = '函数名'  后边的函数只会执行一次
@click.self = '函数名'  只有点击元素本身才会触发这个函数
@click.capture = '函数名' 控制函数在捕获阶段执行  ele.addEventListener('click',cb,{capture:false})
@click.passive = '函数名' 先执行默认 后执行函数  ele.addEventListener('click',cb,{capture:false,passive:true})//passive:true 优先执行默认

v-on:实现按键事件处理

按键修饰符
@keydown.enter
@keydown.tab
@keydown.delete(捕获“删除”和“退格”键)
@keydown.esc
@keydown.space

<body>
    <div id="app">
        <h1>{{name}}</h1>
        <input type="text" v-model='name' @keydown.enter='fn'>
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            name:"小明"
        },
        methods: {
          fn(e){
            // if(e.keyCode == 13){  13是按键enter
              console.log(this.name)
            // }
          }
        },
    });
</script>

艺术就是派大星220

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中的事件处理

vue可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码（或者指定一个封装函数）v-on:实现点击事件处理<div id="app">  <button v-on:click="greet($event)">Greet</button></div>var vm = new Vue({ el: '#ap.
复制链接

扫一扫