Vue的事件事件的修饰符按键的修饰符双向数据绑定

最新推荐文章于 2021-12-02 14:25:45 发布

雾里种花

最新推荐文章于 2021-12-02 14:25:45 发布

阅读量186

点赞数

文章标签： Vue的事件事件的修饰符按键的修饰符双向数据绑定

本文链接：https://blog.csdn.net/ThisOnly/article/details/90580663

版权

Vue的事件

1.指令：v-on
2.格式：v-on:eventType = “事件处理程序名称”
3.简写：@eventType = ‘事件处理程序名称’

如果我的参数中需要事件对象
解决：在方法调用的时候，使用一个叫做 $event的作为实际参数

<body>
  <div id="app">
    <h3> 普通事件 </h3>
    <button v-on:click = 'normalHandler'> 普通事件 </button>
    <button @click = 'normalHandler'> 普通事件-简写 </button>
    <hr>
    <h3> 事件对象 </h3>
    <button @click = "eventHandler"> 事件对象 </button>
    <hr>
    <h3> 事件传参 </h3>
    <button @click = "arguHandler( 10,20 )"> 事件传参 </button>
    <button @click = "arguHandler( a,b )"> 事件传参 </button>
    <button @click = "argu_event_handler( a,b,$event )"> 事件传参 - 事件对象 </button>
  </div>
</body>
<script>
new Vue({
    el: '#app',
    data: {
      a: 10,
      b: 20
    },
    methods: {
      normalHandler () {
        alert('普通事件')
      },
      eventHandler ( e ) {
        console.log( e )
      },
      arguHandler ( a, b ) {
        alert( a + b )
      },
      argu_event_handler ( a,b,e) {
        console.log( e )
        console.log( a + b )
      }
    }
  })
</script>

事件的修饰符

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

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

举例： 事件冒泡案例

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

解决： 事件修饰符

<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>

按键修饰符

案例：敲击键盘的enter键，将用户输入的数据拿到手？

事件的书写
先写方法，然后在绑定DOM元素身上
// box.onclick = function(){}

原因：我们发现当我们需要书写很多下面类似代码的时候，发现代码在重复，我们希望代码能复用或是简写
解决：它将这部分代码封装在自己的 Vue.js中，然后我们来调用这个功能，我们通过按键修饰符来使用

自定义按键修饰符键盘码

Vue.config.keyCodes.p = 80

<body>
  <div id="app">
    <input type="text" @keyup = "get_user_input">
    <h3> 按键修饰符 </h3>
    <input type="text" @keyup.enter = "get_user_shuru">
    <input type="text" @keyup.13 = "get_user_shuru">
    <input type="text" @keyup.s = "get_user_shuru">
  </div>        
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"</script>
<script>
new Vue({
    el: '#app',
    methods: {
      get_user_input ( e ) {
        const keyCode = e.keyCode
        const target = e.target 
        if( keyCode === 13 ){
            console.log( target.value )
        }
      },
      get_user_shuru ( e  ) { // 用户输入获取value的方法
        console.log( e.target.value )
      }
    }
  })
</script>

双向数据绑定

这边的话还得再把双向数据绑定再来讲一讲

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属性

格式：

<body>
  <div id="app">
    <input type="text" v-model.trim = "msg">
    <input type="text" v-model.number = "num">
    <h3> {{ msg }} </h3>
    <h3> {{num}} </h3>

    <hr>
    <h3> 购物车加减 </h3>
    <div>
      <button @click = "decrement"> - </button>
      <input type="text" v-model = 'number'>
      <button @click = "increment"> + </button>
    </div>
  </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
      msg: '  hello 1902   ',
      num: 0.898098908,
      number: 1
    },
    methods: {
      increment () { //加
        this.number ++ 
      },
      decrement () { // 减
        this.number --
      }
    }
  })
</script>

使用单项数据绑定实现双向数据绑定？

单项数据绑定： v-bind
VM -> V
V -> VM ?
分析：键盘一输入内容就要获取input的值，然后修改vm数据

<body>
  <div id="app">
    <input type="text" :value = "msg" @input = "getValue">
    <h3> {{ msg }} </h3>  
  </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>

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

v-model修饰符

<body>
  <div id="app">
    <input type="text" v-model.trim = "msg" @blur = "clear_trim">
    <h3> {{ msg }} </h3>  
  </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"</script>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: ' 请输入 '
    },
    methods: {
      clear_trim (  ) {
        this.msg = this.msg.trim()
      }
    }
  })
</script>