前端进阶-Vue学习二:Vue事件,双向数据绑定(Vue事件,双向数据

作者:神秘网友 发布时间:2020-08-30 15:15:19

前端进阶-Vue学习二:Vue事件,双向数据绑定(Vue事件,双向数据

前端进阶-Vue学习二:Vue事件,双向数据绑定(Vue事件,双向数据绑定)

[var1]

  1. 指令v-on
  2. 格式
    v-on:eventType = “事件处理程序名称”
    <button v-on:click = 'normalHandler'> 普通事件 </button>
  3. 简写
    @eventType = ‘事件处理程序名称’
    <button @click = 'normalHandler'> 普通事件-简写 </button>
  4. 参数
<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>
  1. 事件修饰符
    • .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>
  1. 按键修饰符
    • 按键修饰符
      案例: 敲击键盘的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>

[var1]

  • 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里的数据也会发生改变
前端进阶-Vue学习二:Vue事件,双向数据绑定(Vue事件,双向数据

  • 案例 (购物车商品数量加减)
<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(视图)重新渲染。

前端进阶-Vue学习二:Vue事件,双向数据绑定(Vue事件,双向数据相关教程

  1. Hive进阶之Hive数据导入
  2. VS Code前端常用插件及快捷键
  3. 【前端监控】数据如何获取及上报?
  4. Java程序员进阶必学技术三大主流框架SSM(SpringSpringMvcMybatis
  5. Java SE进阶(8)集合介绍二+数据结构
  6. 你需要的前端进阶书籍清单,分享下载
  7. 第二十四天H5进阶
  8. JS实现前端本地Excel表格上传到网页显示并实现反向导出(解决乱