前端进阶-Vue学习二：Vue事件，双向数据绑定（Vue事件，双向数据绑定）

最新推荐文章于 2023-03-15 15:22:34 发布

原创最新推荐文章于 2023-03-15 15:22:34 发布 · 375 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #Vue事件 #Vue双向事件绑定 #Vue学习

wtf 同时被 3 个专栏收录

5 篇文章

订阅专栏

前端

5 篇文章

订阅专栏

Vue

2 篇文章

订阅专栏

本文主要介绍了Vue事件和双向数据绑定。Vue事件通过v - on指令绑定，有多种修饰符，如.stop、.prevent等，还可对键盘事件修饰。双向数据绑定使用v - model，改变数据或视图，另一方会相应改变，其原理是通过数据劫持和发布订阅实现数据驱动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue事件

指令v-on
格式
v-on:eventType = “事件处理程序名称”
<button v-on:click = 'normalHandler'> 普通事件 </button>
简写
@eventType = ‘事件处理程序名称’
<button @click = 'normalHandler'> 普通事件-简写 </button>
参数

<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>
  /* 
    1. 如果参数中需要事件对象  在方法调用的时候，使用一个叫做 $event的作为实际参数
   */
  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>

事件修饰符
- .stop 阻止单击事件继续传播取消冒泡
- .prevent 提交事件不再重载页面
- .capture 添加事件监听器时使用事件捕获模式即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
- .self 只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的
- .once 点击事件将只会触发一次
- .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成，这其中包含 event.preventDefault() 的情况，.passive 修饰符尤其能够提升移动端的性能。

  <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>
      <form>
          <input type="submit" @click.prevent='pre($event)'> 
          //prevent修饰符可以取消submit的提交默认事件 提交事件不再重载页面   
      </form>
  </div>
</body>
<script>
  /* 
    事件的修饰符
      	格式： v-on:click.xxx = 'handler'
      	xxx指的是修饰符的名称
	    问题： 修饰符使用有什么好处？ 
	    举例： 事件冒泡案例
	    分析： 发现 e.stopPropagation() 在每一个方法中都要使用，这个时候发现代码很冗余
	    解决： 事件修饰符
  */
  new Vue({
    el: '#app',
    methods: {
      bigHandler (e) {
        // e.stopPropagation()
        console.log('big')
      },
      middleHandler (e) {
        // e.stopPropagation()
        console.log('middle')
      },
      smallHandler (e) {
        // e.stopPropagation()
        console.log( 'small' )
      },
      pre(e) {
        console.log('111')
        // e.preventDefault()
      },
    }
  })
</script>

按键修饰符
- 按键修饰符
  案例：敲击键盘的enter键，将用户输入的数据拿到手？
  自定义按键修饰符键盘码
  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>
  	  /* 
  	    按键修饰符
  	    案例： 敲击键盘的enter键，获取输入的数据
  	    自定义按键修饰符键盘码
  	    Vue.config.keyCodes.p = 80
  	   */
  	  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>

双向数据绑定

v-model

<body>
  <div id="app">
    <input type="text" :value = "msg" @input = "getValue">
    <h3> {{ msg }} </h3>  
  </div>
</body>
<script>
  /* 
    业务： 使用单项数据绑定实现双向数据绑定？
      1. 单项数据绑定：  v-bind
      2. VM -》 V
      3. V  -> VM ?
        分析： 键盘一输入内容就要获取input的值，然后修改vm数据
  */
  new Vue({
    el: '#app',
    data: {
      msg: '请输入'
    },
    methods: {
      getValue ( e ) {
        var val = e.target.value 
        this.msg = val
      }
    }
  })
</script>

改变数据视图会跟着改变，改变视图中input的值，msg里的数据也会发生改变
双向数据改变

案例（购物车商品数量加减）

<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>
  /* 
    vue中通过 v-model 来进行双向数据绑定
    v-model只用于表单元素
    v-model默认绑定 value属性
    格式： 
      <input type = 'text'  v-model = "msg"/>
    购物车数量增减
  */
  new Vue({
    el: '#app',
    data: {
      msg: '  hello vue.js  ',
      num: 0.898098908,
      number: 1
    },
    methods: {
      increment () { //加
        this.number ++ 
      },
      decrement () { // 减
        this.number --
      }
    }
  })
</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(视图)重新渲染。