【智一面】Vue.js事件与表单处理

672 07-28

web前端工程师（js）

事件处理

事件处理主要使用v-on指令

v-on指令

用于进行元素的事件绑定

<div id="app">
  <!-- content为data选项中变量 -->
  <p>{{content}}</p>
  <button v-on:click="content='新内容'">按钮</button>
  <!-- 简写方式 -->
  <button @click="content='新内容2'">按钮2</button>
  <!-- 事件程序代码较多时，可在methods中设置函数，并设置为事件处理程序 -->
  <button @click="fn">按钮3</button>
  <!-- 在视图中可以通过 $event 访问事件对象，$event是固定写法，不能随便更改 -->
  <button @click="fn2(100, $event)">按钮4</button>
</div>
<!-- CDN引入最新稳定版  -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      content: '默认内容',
    },
    methods: {
      fn (event) {
        // 设置事件处理函数后，还可从参数中获取事件对象 
        console.log(event)
        this.content = '新内容3'
      },
      fn2 (value, event) {
        this.content = '新内容4'
        console.log(event)
        console.log(value)
      }
    }
  })
</script>
复制代码

表单输入绑定

表单输入绑定主要使用v-model指令

v-model指令

用于给<input>、<textarea>、<select>元素设置双向数据绑定。

输入框绑定

<div id="app">
  <p>输入内容是：{{content}}</p>
  <!-- 输入框绑定 -->
  <input type="text" v-model="content">
  <textarea v-model="content"></textarea>
</div>
复制代码

单选按钮绑定

  <!-- 单选按钮绑定 -->
  <p>radio 的内容为：{{ value }}</p>
  <input type="radio" id="one" value="1" v-model="value">
  <label for="one">选项1</label>
  <input type="radio" id="two" value="2" v-model="value">
  <label for="two">选项2</label>
复制代码

多选框绑定

  <!-- 单个复选框绑定 -->
  <p>单个复选框的值：{{ cbValue }}</p>
  <input 
    type="checkbox" 
    value="选项内容" 
    id="cb" 
    v-model="cbValue">
  <label for="cb">选项内容</label>
  <!-- 多个复选框绑定，cbValues为data选项中数组类型的变量 -->
  <p>多个复选框的值：{{ cbValues }}</p>
  <input 
    type="checkbox"
    id="cb1"
    value="选项1"
    v-model="cbValues"
    >
  <label for="cb1">选项1</label>
  <input 
    type="checkbox"
    id="cb2"
    value="选项2"
    v-model="cbValues"
    >
  <label for="cb2">选项2</label>
  <input 
    type="checkbox"
    id="cb3"
    value="选项3"
    v-model="cbValues"
    >
  <label for="cb3">选项3</label>
复制代码

选择框绑定

  <!-- 单选选择框 -->
  <p>单选选择框的内容: {{ sValue }}</p>
  <select v-model="sValue">
    <option value="">请选择</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
  </select>
  
  <!-- 多选选择框，sValues为数组变量，用户感受不如复选框 -->
  <p>多选选择框的内容：{{ sValues }}</p>
  <select v-model="sValues" multiple>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
  </select>
复制代码

修饰符

修饰符是以点为开头的指令后缀，用来给当前指令设置特殊操作。

主要分为以下几类：

事件修饰符
按键修饰符
系统修饰符
鼠标修饰符
v-model修饰符

事件修饰符

事件修饰符：.prevent修饰符、.stop修饰符、.once修饰符。

.prevent修饰符

用于阻止默认事件行为，相当于event.preventDefault()。

<!-- fn是methods中的函数，如下设置，点击不再默认跳转，而是执行fn -->
<a @click.prevent="fn" href="https://cn.vuejs.org/">Vue官网链接</a>
复制代码

.stop修饰符

用于阻止事件传播（冒泡），相当于event.stopPropagation()。

<div @click="fn1">
  <!-- 阻止了点击事件向上传递给div，这样a点击的时候就不会触发fn1了 -->
  <a @click.prevent.stop="fn2" href="https://cn.vuejs.org/">Vue官网链接</a>
</div>
复制代码

.once修饰符

设置事件只会触发一次。

<button @click.once="fn">按钮</button>
复制代码

按键修饰符

将按键码作为修饰符使用起到标识按键的作用。

<!-- 任意键按下弹起执行fn函数 -->
<input type="text" @keyup="fn">

<!-- 数字按键码，49代表数字1键，不是数字键4和9 -->
<input type="text" @keyup.49="fn">

<!-- 字母按键码，a代表a键 -->
<input type="text" @keyup.a="fn">

<!-- 功能键按键码，为了兼容性，首选内置别名，esc代表Esc按键 -->
<input type="text" @keyup.esc="fn">

<!-- 多键触发，代表单独的a,b,c键均可触发 -->
<input type="text" @keyup.a.b.c="fn">
复制代码

系统修饰符

系统修饰符指常用的四个系统按键修饰符：.ctrl修饰符、.alt修饰符、.shift修饰符，和.meta修饰符。它们的特点是需要和其他按键组合使用，单独按键不会触发。

<!-- 多键触发，代表单独的ctrl,q键均可触发 -->
<input type="text" @keyup.17.q="fn">

<!-- 组合按键，代表ctrl键和小写q键同时按下才会触发 -->
<input type="text" @keyup.ctrl.q="fn">
复制代码

`.exact` 修饰符

允许你控制由精确的系统修饰符组合触发的事件。这是vue2.5.0 新增的修饰符

<!-- 点击时即使 Alt 或 Shift 被一同按下时也会触发点击事件 -->
<button @click.ctrl="onClick">A</button>

<!-- 点击时有且只有 Ctrl 被按下的时候才触发点击事件 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 点击时没有任何系统修饰符被按下的时候才触发点击事件 -->
<button @click.exact="onClick">A</button>
复制代码

鼠标按键修饰符

用于设置点击事件由哪个鼠标按键来触发。

<!-- 鼠标左键 -->
<button @click.left="fn">按钮1</button>
<!-- 简写 -->
<button @click="fn">按钮1</button>

<!-- 鼠标右键 -->
<button @click.right="fn">按钮2</button>

<!-- 鼠标中键 -->
<button @click.middle="fn">按钮3</button>
复制代码

v-model修饰符

主要包含三个修饰符：.trim修饰符、.lazy修饰符、.number修饰符。

<!-- .trim修饰符用于自动过滤用户输入内容首尾两端的空格 -->
<input type="text" v-model.trim="inputValue">
<p>{{ inputValue }}</p>
    
<!-- .lazy修饰符用于将v-model的触发方式由input触发改为change事件触发  -->
<input type="text" v-model.lazy="inputValue">
<p>{{ inputValue }}</p>

<!-- .number修饰符用于自动将用户的输入值转为数值类型，无法转换则保留为字符串 -->
<input type="text" v-model.number="inputValue">
<p>{{ inputValue }}

标签： Web