Vue基础事件

最新推荐文章于 2023-05-05 14:19:26 发布

Noble Wang

最新推荐文章于 2023-05-05 14:19:26 发布

阅读量223

点赞数 1

分类专栏： 02-Vue.js 文章标签：事件

本文链接：https://blog.csdn.net/qq_35801979/article/details/90489649

版权

02-Vue.js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

事件

指令v-on
格式
v-on:eventType = “事件处理程序名称”
简写
@eventType = ‘事件处理程序名称’
参数
如果参数中需要事件对象，在方法调用的时候，使用一个叫做 $event的作为实际参数

事件修饰符

修饰符
事件的修饰符
格式： v-on:click.xxx = ‘handler’
xxx指的是修饰符的名称

问题：修饰符使用有什么好处？

举例：事件冒泡案例

分析：发现 e.stopPropagation() 在每一个方法中都要使用，这个时候发现代码很冗余

解决：事件修饰符

总结：用事件修饰符可以解决代码冗余。
代码：

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <style>
      .big{
        width: 300px;height: 300px;
        background: red;
      }
      .middle{
        width: 200px;height: 200px;
        background: purple;
      }
      .small{
        width: 100px;height: 100px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div id="app">
        <div class="big" @click.stop = "bigHandler">
          <div class="middle" @click.stop = "middleHandler">
            <div class="small" @click.stop = "smallHandler"></div>
          </div>
        </div>
        <hr>
        <div class="big" @click.self = "bigHandler">
          <div class="middle" @click.self = "middleHandler">
            <div class="small" @click.self = "smallHandler"></div>
          </div>
        </div>
    </div>
  </body>
  <script>
    new Vue({
      el: '#app',
      methods: {
        bigHandler (e) {
          // e.stopPropagation()
          alert('big')
        },
        middleHandler (e) {
          // e.stopPropagation()
          alert('middle')
        },
        smallHandler (e) {
          // e.stopPropagation()
          alert( 'small' )
        }
      }
    })
  </script>
  </html>

按键修饰符
当我们想要敲下某一个按键的同时出发某个事件，就有了按键事件，但是在每一个事件的出发过程中都加入键盘事件，就导致了代码冗余并且会造成冲突，
```
  get_user_input ( e ) {
   const keyCode = e.keyCode
   const target = e.target 
   if( keyCode === 13 ){
       console.log( target.value )
   }
 },
```
于是vue就将这部分代码封装在自己的 Vue.js中，然后我们来调用这个功能，我们通过按键修饰符来使用，这个功能实现了复用,按键修饰符支持建码，字母等
```
    <input type="text" @keyup.13 = "get_user_shuru">
    <input type="text" @keyup.enter = "get_user_shuru">
    <input type="text" @keyup.s = "get_user_shuru">
```
自定义按键修饰符键盘码

Vue.config.keyCodes.p = 80

表单双向数据绑定

双向数据绑定：
VM改变，V响应
V改变， VM也会响应

双向数据绑定原理/数据驱动/深入响应式原理：

  vue是通过数据劫持和事件的发布订阅来进行数据驱动的，当我们在data选项中定义数据后，vue会通过observer（观察者）
  监听data选项，将data选项中的所有key通过es5的Object.definedPropty进行getter和setter设置，当
  数据绑定在DOM上是，就会触发getter,给DOM设置初始值，当我们在V(视图中)输入内容时，就会触发setter
  ,就可以获得最新的值，通过watch（监听）通知Vue进行V(视图)重新渲染

vue中通过 v-model 来进行双向数据绑定

v-model只用于表单元素

v-model默认绑定 value属性

格式：

    <input type = 'text'  v-model = "msg"/>

举例：购物车的加减

        <div id="app">
            <div>
              <button @click = "decrement"> - </button>
              <input type="text" v-model = 'number'>
              <button @click = "increment"> + </button>
            </div>
        </div>

        <script>
          new Vue({
            el: '#app',
            data: {
              msg: '  hello 1902   ',
              num: 0.898098908,
              number: 1
            },
            methods: {
              increment () { //加
                this.number ++ 
              },
              decrement () { // 减
                this.number --
              }
            }
          })
        </script>

单向实现双向数据绑定

利用事件触发，input在不断触发的同时，不断在new vue中的msg赋值，因此导致h3的内容在input的vlue值改变的同时也在不断的改变

  <div id="app">
    <input type="text" :value = "msg" @input = "getValue">
    <h3> {{ msg }} </h3>  
  </div>



    new Vue({
      el: '#app',
      data: {
        msg: '请输入'
      },
      methods: {
        getValue ( e ) {
          var val = e.target.value 
          this.msg = val

Noble Wang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础事件

事件指令v-on格式v-on:eventType = “事件处理程序名称”简写@eventType = ‘事件处理程序名称’参数如果参数中需要事件对象，在方法调用的时候，使用一个叫做 $event的作为实际参数事件修饰符修饰符事件的修饰符格式： v-on:click.xxx = ‘handler’xxx指的是修饰符的名称问题：修饰符使用有什么好处...
复制链接

扫一扫