【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结

文章目录

  • P14事件处理
  • P13事件修饰符
  • p16键盘事件
  • p17事件总结

前言:仅做笔记使用。不是制作精良的博客。

时间:2022/11/14

P14事件处理

需求,点这个按钮就提示

【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结_第1张图片

错误的写法:

(错误原因:只能在Vue实例中找)

【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结_第2张图片

正确写法:

(解释:在配置项methods下写函数,不需要写function,直接写方法名。如果写了function会有红色波浪线)

【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结_第3张图片

代码:

<body>
  <div id="root">
    <h1>学校名字:{{name}}</h1>
    <button v-on:click="showInfo">点我提示信息</button>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip=false

    let data={
      name:'尚硅谷',
      address:'就这样'
    }

    const vm=new Vue({
      el:'#root',
      data,
      methods:{
        showInfo()
        {
          alert('卧草')
        }
      }
    })
  </script>
</body>

验证函数里面的this

(这个this就是vm)

【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结_第4张图片

注意:函数写成=>

this就是window,而不是vue

简写形式:

v-on:click

@click

<button v-on:click="showInfo">点我提示信息1</button>
<button @click="showInfo">点我提示信息2</button>

再来个需求:

(点击 点我提示信息2 传进去一个参数)

【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结_第5张图片

给个代码:

<body>
  <div id="root">
    <h1>学校名字:{{name}}</h1>
    <button v-on:click="showInfo1">点我提示信息1</button>
    <button @click="showInfo2(66)">点我提示信息2</button>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip=false

    let data={
      name:'尚硅谷',
      address:'就这样'
    }

    const vm=new Vue({
      el:'#root',
      data,
      methods:{
        showInfo1()
        {
          alert('我草1')//此处的this就是vm
        },
        showInfo2(number)
        {
          alert('我曹2'+'传一个数字'+number)//此处的this就是vm
        }
      }
    })
  </script>
</body>

代码解释:

1.showInfo2 括号加不加都行

2.有个bug,不能用event.target.innerText (也就是点我提示信息2的文本)

3.不能一传参就把event搞丢了

解决:

1.写$event,这样传进函数里面就是event

<button @click="showInfo2(66,$event)">点我提示信息2</button>

        showInfo2(number,event)
        {
          alert('我曹2'+'传一个数字'+number)//此处的this就是vm
        }

showInfo1,showInfo2在vm中,但不做数据代理。

总结:

【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结_第6张图片

P13事件修饰符

需求:

(点击按钮跳转网页,a标签)【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结_第7张图片

不想让它跳转就写个:

//阻止默认行为   
showInfo(e)
        {
          e.preventDefault()
          alert('我草1')//此处的this就是vm
        }

但是Vue可以这样

<a href="https://www.bilibili.com"  @click.prevent="showInfo">点我提示信息</a>

prevent就是事件修饰符

用了click事件,但是prevent修饰click事件

总结:

【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结_第8张图片

阻止事件冒泡:

alert弹了两次,写完@click.stop之后,只谈一次

【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结_第9张图片

事件触发一次:

image-20221114221028023

第一次点击:

【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结_第10张图片

多次点击:(不灵了)

【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结_第11张图片

捕获模式:

【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结_第12张图片

点击div2(结果2,1)

【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结_第13张图片

捕获与冒泡阶段:

捕获:从外到内

冒泡:从内到外

【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结_第14张图片

加上就是1,2

5.self

【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结_第15张图片

6.passive

本来应该是这个函数跑完再滚动滚动条

image-20221114222745790

【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结_第16张图片

加passsive,就可以滚动滚动条了。

p16键盘事件

【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结_第17张图片

 <input type="text" placeholder="回车提示" @keyup.delete="showInfo">

按下删除键才会执行。

p17事件总结

能连着写

image-20221114225112892

你可能感兴趣的:(#,Vue,javascript,vue.js,前端)