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 }}