part4 - 模块1 - 03 - Vue事件与表单处理

大大大石头
345 阅读4分钟

笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、和经验

Vue事件与表单处理

事件处理 - v-on

用于元素的事件绑定

书写方法：v-on:事件名=" 事件处理程序 " 可简写为 @事件名=" 事件处理程序 "

当事件程序代码较多时，可以把代码封装成函数放在methods中

<body>
  <div id="app">
    <!-- 绑定数据 -->
    <p>{{content}}</p>
    <!-- 使用三种方法书写click事件 -->
    <!-- 标准v-on方法 -->
    <button v-on:click="content='新的内容1'">点我</button>
    <!-- @方法简写 -->
    <button @click="content='新的内容2'">点我</button>
    <!-- 使用函数 -->
    <button @click="fn">点我</button>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 数据
        content: '默认内容'
      },
      methods: {
        // 函数
        fn() {
          this.content = '新的内容3'
        }
      }
    })
  </script>
</body>

操作事件对象

设置事件程序后，methods中的函数可以接收一个时间对象参数

methods: {
  // 函数可以接受一个参数，这个参数就是事件对象
  fn(event) {
    console.log(event)
    this.content = '新的内容3'
  }
}

如果我们想在视图（HTML）中传递参数，那就需要把事件对象写为event（固定写法），例如‘@click="fn(传参,event（固定写法），例如`@click="fn( 传参, event )"`，这时当vue看到$event就会知道这是事件对象

// 我们想在事件处理函数中传入参数，还想要使用事件对象，就要把事件对象写成$event
<button @click="fn2(200,$event)">点我</button>

//下面的函数
fn2(x, event) {
    console.log(x)
    console.log(event)
}

表单输入绑定 - v-model

以下绑定操作都遵循双向绑定

用于给input、textarea（文本域）、select元素设置双向数据绑定

body>
  <div id="app">
    <!-- 双向数据绑定 v-model,一方数据修改value都会更改 -->
    <input type="text" v-model="value">
    <textarea v-model="value" cols="30" rows="10"></textarea>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 双向数据绑定数据
        value: '123'
      },
      methods: {}
    })
  </script>
</body>

输入框绑定

单行输入框input和多行输入框textarea

<body>
  <div id="app">
    <!-- 输入框绑定-->
    <p>input输入框的内容为：{{value1}}</p>
    <input type="text" v-model="value1">
    <p>textarea输入框的内容为：{{value2}}</p>
    <textarea v-model="value2"></textarea>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 双向数据绑定数据
        value1: '',
        value2: ''
      },
      methods: {}
    })
  </script>
</body>

单选按钮绑定

<body>
  <div id="app">
    <!-- 单选按钮绑定 -->
    <p>数据为：{{value}}</p>
    <!-- 书写一对单选框 -->
    <!-- radio表示单选按钮，id用于和后面的label中绑定，value为值，双向绑定数据 -->
    <input type="radio" id="one" value="1" v-model="value">
    <!-- label绑定单选按钮，for绑定指定id的元素 -->
    <label for="one">选项1</label>
    <input type="radio" id="tow" value="2" v-model="value">
    <label for="tow">选项2</label>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 数据
        value: ''
      },
      methods: {}
    })
  </script>
</body>

当我们点击两个单选按钮的时候数据就会发生改变，也可以通过修改数据更改视图的选择

复选框框绑定

复选框分为单个复选框（常用于勾选用户协议）和多个复选框两种情况

<body>
  <div id="app">
    <!-- 复选框绑定 -->
    <!-- 情形1:只有一个复选框（例如：常用语用户勾选阅读条款） -->
    <p>只有一个复选框，数据内容为：{{value1}}</p>
    <input type="checkbox" id="onlyOne" value="只有一个复选框内容" v-model="value1">
    <label for="onlyOne">选我</label>

    <!-- 情形2:有多个复选框 -->
    <p>多个复选框，数据内容为：{{value2}}</p>
    <input type="checkbox" id="one" value="内容1" v-model="value2">
    <label for="one">选我</label>
    <input type="checkbox" id="tow" value="内容2" v-model="value2">
    <label for="tow">选我</label>
    <input type="checkbox" id="three" value="内容3" v-model="value2">
    <label for="three">选我</label>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // value1单个选项数据
        value1: '',
        // value多个选项数据为数组
        value2: []
      },
      methods: {}
    })
  </script>
</body>

注意事项：

  • 单个复选框数据为空字符串即可，多个复选框就需要设置为数组
  • 当只有一个复选框的情况下，无论value是什么，选中和取消值都是布尔值，但是当前的value也需要设置
  • 多个复选框则会把选中的复选框的value值添加到data数据的数组中

选择框绑定

分为单选绑定和多选绑定两种情况，书写也不同

<body>
  <div id="app">
    <!-- 选择框绑定 -->
    <!-- 情形1:单选绑定 -->
    <!-- p标签绑定数据 -->
    <p>单选绑定，数据为：{{value1}}</p>
    <!-- selcet绑定value1 -->
    <select v-model="value1">
      <!-- 第一个设置为空，不写数据，用于提示用户 -->
      <option value="">请选择</option>
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </select>

    <!-- 情形2:多选绑定 -->
    <p>多选绑定，数据为：{{value2}}</p>
    <!-- 设置multiple表示允许多选 -->
    <select v-model="value2" multiple>
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </select>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // value1单选
        value1: '',
        // value多选数据为数组
        value2: []
      },
      methods: {}
    })
  </script>
</body>

注意事项

  • 同复选框一样，单选数据为空字符串即可，多选就需要设置为数组
  • 单选数据会把选择的option的value绑定给数据
  • 多选数据会添加进数组

总结

  • input输入框：绑定字符串值
  • textarea输入框：绑定字符串值
  • radio单选按钮：绑定字符串值
  • checkbox复选框：单个绑定布尔值，多个绑定数组
  • selrct选择框：单选绑定字符串，多选绑定数组

修饰符

以点为开头的指令后缀，用于给当前指令设置特殊操作，依赖于指令

事件修饰符

官方文档：cn.vuejs.org/v2/guide/ev…

直接写在事件后面即可，例如@click.修饰符

  • prevent修饰符
    • 用于阻止默认的事件行为，相当于event.prevenDefault()
  • stop修饰符
    • 阻止事件传播，相当于event.stopPropagation()
  • once修饰符
    • 用于设置事件只能触发一次
<body>
  <div id="app">
    <!-- 事件修饰符 -->
    
    <!-- prevent阻止默认事件，这里可以阻止a标签的自动跳转操作，也可以直接写为 @click.prevent-->
    <a href="http://www.baidu.com" @click.prevent="fn">跳转</a>

    <!-- stop阻止事件传播 -->
    <div @click="console.log('我是父亲')" style="width: 100px;height: 100px;background: pink;">
      <!-- 添加stop修饰符阻止事件冒泡 -->
      <button @click.stop="console.log('我是儿子')">按钮</button>
    </div>

    <!-- once设置事件只能执行一次 -->
    <button @click.once="console.log('你应该只能看见我一次')">once修饰符</button>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        fn() {
          console.log('点击a标签了')
        }
      }
    })
  </script>
</body>

注意事项

  • 如果我们只是想阻止默认行为，那么直接写prevent即可，后边不写事件处理程序。例如@click.prevent可以放在a标签上阻止默认跳转
  • 修饰符允许连写，例如@click.prevent.stop="事件程序"

按键修饰符

官方文档：cn.vuejs.org/v2/guide/ev…

按键码：将按键的按键码作为修饰符使用以标示按键操作方式

常规按键修饰符

<body>
  <div id="app">
    <!-- 按键（码）修饰符 -->

    <!-- 设置只有当抬起按键码为65的按键（a）的时候才会触发事件 -->
    <input type="text" @keyUp.65="fn">
    
    <!-- 如果是字母按键，可以直接使用字母当修饰符 -->
    <input type="text" @keyUp.a="fn">
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        fn() {
          console.log('抬起按键a了')
        }
      }
    })
  </script>
</body>

特殊按键

键盘中类似esc、enter、delete、空格、上下左右等功能按键，为了更好的兼容性，首选内置别名

<body>
  <div id="app">
    <!-- 特殊按键（码）修饰符,建议直接写别名即可，具体可以参考官方文档-按键修饰符 -->
    <input type="text" @keyUp.esc="fn">
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        fn() {
          console.log('抬起按键了')
        }
      }
    })
  </script>
</body>

注意：按键修饰符可以连写，例如 @keyUp.a.b.c="fn"按下a/b/c都可以触发事件

系统修饰符

处理系统按键的修饰操作，系统按键指的是ctrl、alt、shift等，这些按键单独点击一般无效，必须搭配其他按键使用

官方文档：cn.vuejs.org/v2/guide/ev…

系统修饰符可以单独使用也可以组合使用

<body>
  <div id="app">
    <!-- 系统修饰符，这里组合使用.ctrl.q -->
    <input type="text" v-model="value" @keyUp.ctrl.q="fn">
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        value: ''
      },
      methods: {
        fn() {
          this.value = ''
          console.log('我清空了输出框内容')
        }
      }
    })
  </script>
</body>

鼠标按键修饰符

设置点击事件由鼠标的哪个按键触发完成

常用修饰符：left左键（默认）、right右键、middle中键

<body>
  <div id="app">
    <!-- 鼠标按键修饰符，默认不写表示左键触发，可以通过添加修饰符更改出发按钮 -->
    <button @click.right="fn">点右键触发我</button>
    <button @click.middle="fn">点中间键触发我</button>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        value: ''
      },
      methods: {
        fn() {
          console.log('点击了')
        }
      }
    })
  </script>
</body>

v-model修饰符

trim修饰符

自动过滤去掉用户输入的首尾两端的空格，一般用于输入框

lazy（懒）修饰符

用于将v-model触发方式由立即更改为失去焦点的时候才触发，这样能节省资源，避免不必要的频繁修改数据

number修饰符

自动将用户输入的值转换为数值类型，如果无法被parseFloat()转换，则返回原始内容，很适合需要用户输入数字的内容，就不需要我们在进行手动转换数字了

avatar
文章
阅读
粉丝