Vue笔记3--事件处理和表单输入

1、事件处理

1.1 v-on:click / @click

  methods: {
     addCounter(number) {
       this.counter += number;
     }
  },

绑定事件

js代码处理 / 没有传递参数 / 传递参数

	<h2 @click="counter++">{{ counter }}</h2>
    <h2 @click="addCounter">{{ counter }}</h2>
    <h2 @click="addCounter(5)">{{ counter }}</h2>

事件对象

事件e，log打印出来的是鼠标点击事件对象

  methods: {
    addCounter(e) {
      this.counter ++;
      console.log(e)
    }
  }

此时点击第二个h2标签，log才会打印鼠标点击事件对象。参数才接受得到事件e。

    <h2 @click="counter++">{{ counter }}</h2>
    <h2 @click="addCounter">{{ counter }}</h2>
    <h2 @click="addCounter(5)">{{ counter }}</h2>

传递参数+事件对象

使用$event实参表示当前事件对象

    addCounter(number, e) {
      this.counter++;
      console.log(e)
    }

    <h2 @click="addCounter(5,  $event)">{{ counter }}</h2>

多事件处理器

一个事件绑定多个处理函数，用逗号分隔

    <h2 @click="addCounter(5,  $event),addAge()">{{ counter }}</h2>

1.2 事件修饰符

.stop

阻止事件冒泡，事件冒泡指点击子元素就会冒泡到父元素上，父元素点击事件也执行。

    divClick(){
      console.log("父元素展示");
    },
    btnClick(){
      console.log("子元素展示");
    }

    <div @click="divClick">
      <button @click="btnClick">按钮</button>
    </div>

此时控制台会先显示子元素展示再父元素展示，修改

      <button @click.stop="btnClick">按钮</button>

即可阻止事件冒泡，控制台只显示子元素展示。

.prevent

阻止默认行为，比如对于表单的提交按钮他会默认自己提交跳转，如果我想要由我处理过后再提交就使用.prevent

    <form action="">
      <input type="submit" value="提交" @click.prevent="submitClick">
    </form>

也可直接在form中写@submit.prevent阻止重载页面

<form @submit.prevent="onSubmit">

.once

只触发一次回调，比如一个按钮只能点一次。

    <button @click.cone="onceClick">只触发一次once</button>

.

keyCode(键盘编码) | keyAlias(键盘简写)

    <input type="text" @keyup="keyUp">

此时只要在输入框中输入，不管什么键被松开都会就会触发keyUp事件。

.enter，表示按回车才提交

    <input type="text" @keyup.enter="keyUp">

Vue总共提供以下按键别名

• .enter
• .tab
• .delete (捕获“Delete”和“Backspace”两个按键)
• .esc
• .space
• .up
• .down
• .left
• .right

并且修饰符可以连用

<button @click.stop.once="btnClick">按</button>

2、表单输入

v-model基础

输入框和属性的的双向绑定，改变输入框h2内容也改变。

  data() {
    return {
      counter: 0,
      msg: "helloWorld",
    };
  },

    <input type="text" v-model="msg">
    <h2>{{ msg }}</h2>

原理：本质上是语法糖，是v-bind+v-on组合实现，v-bind绑定一个属性，v-on添加一个input事件。

通过log展开e事件看到target.value传回的是输入框内容。

  methods: {
    changeValue(e) {
      console.log(e);
      this.msg = e.target.value;
    }
  },

    <input type="text" :value="msg" @input="changeValue">

v-model表单控件

  data() {
    return {
      counter: 0,
      msg: "helloWorld",
      checked: true,
      fruits: [],
      sex: "男",
      city: "长沙",
      citys: [],
      a:"长沙",
    };
  },

复选框单个勾选框，v-model为布尔值

    <input type="checkbox" v-model="checked">

多个勾选框，v-model绑定一个数组，将value=的数据添加到数组中

    <input type="checkbox" v-model="fruits" value="苹果">苹果
    <input type="checkbox" v-model="fruits" value="梨子">梨子
    <input type="checkbox" v-model="fruits" value="西瓜">西瓜
    <input type="checkbox" v-model="fruits" value="葡萄">葡萄
    <h2>喜欢的水果：{{fruits}}</h2>

单选框，加上value值即可变成单选框不需要像以前设置name=“sex”

    <input type="checkbox" v-model="sex" value="男">男
    <input type="checkbox" v-model="sex" value="女">女

选项框单选

    <select name="" id="" v-model="city">
      <option value="长沙">长沙</option>
      <option value="常德">常德</option>
      <option value="衡阳">衡阳</option>
    </select>
    <h2>{{city}}</h2>

选项框多选，使用multiple属性

    <select name="" id="" v-model="citys" multiple>
      <option value="长沙">长沙</option>
      <option value="常德">常德</option>
      <option value="衡阳">衡阳</option>
    </select>
    <h2>{{ citys }}</h2>

值绑定

v-model 绑定的值通常是静态的字符串 (或者对复选框是布尔值)。但有想要value=的是一个动态的数据。这可以通过使用 v-bind 来实现。

      <option :value=a>{{a}}</option>

修饰符

.lazy 在输入框中随意输入但是数据不会随之改变，只有失去焦点（鼠标点击其他地方），内容确定下来之后，数据再更新msg的值。

    <input type="text" v-model.lazy="msg">

.number自动将用户的输入值转为数值类型，typeof检查类型

    <input type="text" v-model.number="counter">
    <h2>{{typeof counter }}</h2>

.trim自动过滤首尾空格

    <input type="text" v-model.trim="msg" @keydown="downmsag">