vue表单及修饰符,vue事件，方法

目录

1.表单元素 和 v-model

1.1 text 和 password

1.2 checkbox

1.3 radio

1.4 select

1.5 textarea

2.vue的事件 及 修饰符

1.绑定事件

2.事件传参

3.事件对象

4.修饰符

3.set和$set

3.1 set方法

3.2 $set方法

3.3 splice方法

---

 

1.表单元素 和 v-model

1.1 text 和 password

• <input type="text/password" v-model="数据">

• 这两类input 使用v-model属性 会使input的内容 和 数据进行双向绑定 二者互相影响

1.2 checkbox

• <input type="checkbox" v-model="数据">

  • 当我们不写value的时候 双向数据绑定 绑定的是 复选框的选中方式 如果数据值为true 表示选中 数据值为false 表示不选中

• <input type="checkbox" v-model="数据" value="xxx">
  数据 需要是一个数组

  • 当我们写了value的时候 双向数据绑定 会在input被选中的时候 将input的value 添加到绑定的数组中 也会在 input不选中的时候 将input的value 移除出绑定的数组

1.3 radio

• <input type="checkbox" v-model="数据" value="xxx">

  • 单选按钮实现双向数据绑定 是将 input的value 和 数据进行绑定 二者互相影响

1.4 select

• <select v-model="数据">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
          </select>

  • 双向数据绑定的数据 会控制 value值和数据相同的option被选中 我们选中不同的option 也会对应的将数据的值 改变为选中的option的value

1.5 textarea

• <textarea cols="30" rows="10" v-model="content"></textarea>

  • 双向数据绑定的数据 会作为textarea的内容显示 数据变化 textarea的内容也变化 textarea的内容变化 数据也变化

2.vue的事件 及 修饰符

1.绑定事件

• <input @事件名="函数名">
  //这里说道的函数名 是在 js中methods 中编写的函数的函数名 用来作为事件的处理函数使用

2.事件传参

• 在事件中 有时我们可能需要进行一些参数的传递 写法如下

• <input @事件名="函数名(实参1，实参2，...)">

• let vm = new Vue({
      el:"xx",
      data:{
          
      },
      methods:{
          函数名(形参1，形参2，...){
              
          }
      }
  })

3.事件对象

• 在事件中 我们也可以获取事件的事件对象来使用

• 获取事件对象的方式

  • 1.直接获取

    • <input @事件名="函数名">

    • let vm = new Vue({
          el:"xx",
          data:{
              
          },
          methods:{
              函数名(e){
                  形参e 默认就会接受到 事件对象
              }
          }
      })

    • 注意：如果没有其他参数 我们可以直接给methods中的事件处理函数 设置一个形参 形参默认就会接收到 事件对象

  • 2.多个参数获取事件对象

    • //当存在多个实参的时候 我们需要手动传递事件对象——$event
      <input @事件名="函数名($event,实参1，实参2，...)">

    • let vm = new Vue({
          el:"xx",
          data:{
              
          },
          methods:{
              函数名(e,形参1,形参2,...){
                  形参e 默认就会接受到 事件对象
              }
          }
      })

4.修饰符

• 在vue中 修饰符主要是用来处理事件相关问题的（阻止默认行为、阻止冒泡、设置捕获、....）

• 修饰符的统一语法

  • <input @事件名.修饰符="函数名($event,实参1，实参2，...)">

4.1阻止默认行为修饰符

• 原生js中阻止默认行为

  • addEventListener：事件对象.preventDefault()

  • attachEvent：事件对象.returnValue = false

  • on：在事件处理函数最后 return false

• vue中阻止默认行为 使用修饰符——prevent

  • <input @事件名.prevent="函数名($event,实参1，实参2，...)">

4.2阻止冒泡的修饰符

• 原生js中阻止冒泡

  • 标准：事件对象.stopPropagation()

  • ie低版本：事件对象.cancelBubble = true

• vue中阻止冒泡 使用修饰符——stop

  • <input @事件名.stop="函数名($event,实参1，实参2，...)">

4.3 设置事件捕获的修饰符

• 原生js中设置捕获

  • 标准：元素.addEventListener("事件名",处理函数,true)

  • ie低版本：没有捕获阶段

• vue中设置事件捕获阶段 使用修饰符——capture

  • <input @事件名.capture="函数名($event,实参1，实参2，...)">

  • 注意：设置捕获的修饰符的时候 需要将所有捕获路径中的父级元素 都设置上 capture修饰符

4.4 设置事件只执行一次的修饰符

• 在vue中设置事件只执行一次 使用修饰符——once

  • <input @事件名.once="函数名($event,实参1，实参2，...)">

4.5 设置事件只有添加事件的元素才能执行的修饰符

• 在vue中 我们可以通过设置修饰符——self 来控制事件只有添加事件的元素才能触发

  • <input @事件名.self="函数名($event,实参1，实参2，...)">

4.6 键盘类事件修饰符

• 键盘类事件专属修饰符 —— 即 使用键盘值做修饰符

  • <input @keydown/keyup/keypress.键盘值="函数名($event,实参1，实参2，...)">

  • 表示 只有用户按了指定键盘值的键 才能触发事件

4.7 表单元素修饰符

• 这类修饰符是专门给表单元素的双向数据绑定使用的

  • 修饰符语法

    • <input v-model.修饰符="数据">

  • 这类修饰符 主要是对数据进行一些相应的处理

• number

  • 语法

    • <input v-model.number="数据">

    • 当表单元素中 输入内容 并同步到数据中的时候 会自动将内容转换为 数字

• lazy

  • 语法

    • <input v-model.lazy="数据">

    • 当表单元素中 输入内容时 不会立刻同步到数据中去 而是在表单元素失去焦点的时候 再进行同步

• trim

  • 语法

    • <input v-model.trim="数据">

    • 当表单元素中 输入内容 并同步到数据中的时候 会自动将内容左右两端的空格去除掉

3.set和$set

• 当我们想要向 data对象中 一些数组或对象类型数据中 添加新的数组项/属性的时候 我们不能直接添加 而需要通过set/$set方法来添加

3.1 set方法

• set方法是Vue构造函数的方法

  • 用法：

    • Vue.set(指定的数据,索引/属性名,数组项/属性值)

3.2 $set方法

• $set方法 是 vue实例对象的方法

• 用法

  • vue实例.$set(指定的数据,索引/属性名,数组项/属性值)

3.3 splice方法

• 这个方法是数组对象的方法 因此 在对data中的数组类型数据 进行操作的时候 我们可以用这个方法

• 用法

  • 数组.splice(起始索引，要删除的位数) 从起始索引开始 向后删除指定位数的数组项
    ​
    数组.splice(起始索引，要删除的位数，用来替换的数组项1，数组项2，...) 
        从起始索引开始 删除指定位数的数组项 之后 在空隙中 插入后续用来替换的数组项
        
    数组.splice(起始索引，0，用来替换的数组项1，数组项2，...)    
        在起始索引前面  插入  用来替换的所有数组项