Vue（二）Vue中输入框的相关事件整理

小张快跑。

已于 2022-01-18 23:01:55 修改

阅读量7k

点赞数 2

分类专栏：前端框架——Vue 文章标签： vue.js javascript 前端

于 2022-01-17 22:35:19 首次发布

本文链接：https://blog.csdn.net/io_123io_123/article/details/122548376

版权

前端框架——Vue 专栏收录该内容

12 篇文章 12 订阅

订阅专栏

一、输入框相关事件

- focus：获得焦点 @focus

        输入框聚集焦点时触发
        就是当焦点转移到input 框上边的时候触发；

- blur：失去焦点 @blur

        输入框失去焦点时触发
        输入框在输入完成、移到其他地方时进行验证时，需要用到该事件，用此事件进行绑定验证方法即可。

- change：变更 @change

        输入框里面内容发生改变且失去焦点时触发

- input：实时变化 @input

        输入框里面内容发生改变（且不用失去焦点）时触发
        跟随输入框输入内容实时变更数据
        适用于实时查询，每输入一个字符都会触发该事件

- keyup：按键抬起 @keyup

        事件是在pc上需要点击回车键触发，而在手机上则是需要点击输入键盘上的确定键才可触发。

二、事件参数

2.1 上述这些与输入框相关的事件，都带有事件参数 event（简写成 e）

2.2 在使用输入框事件触发函数时要注意：（了解即可）

方法如果不写 () ,则默认参数是事件参数，

如果写了 ()，则默认的事件参数消失

关键词：Vue中提供了 $event 关键词，代表了事件参数

2.3 事件修饰符

在Vue中，作者很贴心地提供了事件修饰符，例如 @事件名.修饰符

eg：@keyup.13 或者 @keyup.enter（效果就是过滤出keyCode==13的回车按钮）

三、双向数据绑定（重点）

3.1 什么是双向数据绑定

双向数据绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是vue的精髓之处了。

双向数据绑定适合所有与用户交互的表单元素。

注意前提：双向数据绑定是 输入框 这种表单元素，才具有的特定属性。

如果希望在表单元素中自动获得页面中用户主动做的修改时，都要用双向绑定v-model。

 <表单元素 v-model="变量">

方向一：数据绑定到元素的属性上

方向二：DOM元素的属性变更时，更新绑定的数据

3.2 双向数据绑定的原理（面试高频）

双向数据绑定的目的是为了当输入框的值发生变化时，页面中数据的值随之而发生变化。而输入框中，值得变化是通过 input 事件来监听的；输入框的值是存储在事件参数 e.target.value中的。那么要实现双向数据绑定，就很简单了：

<body>
    <div id="app">
        <input type="text" :value='kw' @input='doInput'>
        <div>kw:{{kw}}</div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    kw: '喜羊羊'
                }
            },
            methods: {
                // 实时监听输入框的变化
                doInput(e) {
                    console.log(e);
                    // 输入框的值存储在e.target.value中
                    console.log(e.target.value);
                    this.kw = e.target.value
                }
            },
        })
    </script>
</body>

3.3 双向数据绑定的实现

由于双向数据绑定在开发过程中，十分常用，但是代码又非常复杂。

所以作者提供了 v-model 指令，可以快速实现双向数据绑定的效果。

<input type="text" v-model='kw'>

v-model的值是页面元素的属性名（通过这一行代码就能实现复杂的双向数据绑定，可见作者也是非常贴心了）

在Vue中，统一了表单元素所有的属性，都能够通过 v-model 对表单元素的属性进行设置。

3.4 勾选框的双向数据绑定

通过一个工作中常见的案例来说明在勾选框中是如何使用v-model进行双向数据绑定的

<body>
    <div id="app">
        <label for="">
      <b>{{agree?'同意':'不同意'}}</b>
      <input type="checkbox" v-model='agree'>
      <span>我已阅读并同意用户注册协议</span>
    </label>
        <br>
        <!-- 同意为true->按钮可用->不可用就是false -->
        <button :disabled='!agree'>提交注册</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                agree: true
            }
        })
    </script>
</body>

3.5 多选框的双向数据绑定

多选框在使用时要注意两点：

1）因为是多选框，所以，数据的类型得是数组，并且vue会自动检测数据类型

2）使用多选框必须加 value属性 它的值是后面的内容

<body>
    <div id="app">
        <div>草原上都有哪些羊 {{yang}}</div>
        <label for="">
          <!-- vue会自动检测数据类型，yang 是数组，就自动多选 -->
          <input type="checkbox" value="喜羊羊" v-model='yang'>
          <span>喜羊羊</span>
        </label>
        <label for=""> 
          <input type="checkbox" value="美羊羊" v-model='yang'> 
          <span>美羊羊</span>
        </label>
        <label for="">
          <input type="checkbox" value="懒羊羊" v-model='yang'>
          <span>懒羊羊</span>
        </label>
        <label for="">
          <input type="checkbox" value="沸羊羊" v-model='yang'>
          <span>沸羊羊</span>
        </label>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                yang: []
            }
        })
    </script>
</body>

3.6 下拉选框的双向数据绑定

下拉选框在双向数据绑定时注意事项：

1）v-model 要绑定到 select 标签上

2）同样要写value属性，value的值就是标签内容

<body>
    <div id="app">
        <div>灰太狼的座驾是{{car}}</div>
        <select v-model='car'>
          <option value="奔驰">奔驰</option>
          <option value="宝马">宝马</option>
          <option value="兰博基尼">兰博基尼</option>
          <option value="QQ">QQ</option>
          <option value="奥迪">奥迪</option>
        </select>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                car: '奥迪'
            }
        })
    </script>
</body>

3.7 单选框的双向数据绑定

<body>
    <div id="app">
        <div>喜羊羊的性别是：{{gender}}</div>
        <label for="">
    <input type="radio" name="sex" value="男" v-model='gender'><span>女</span>
  </label>
        <label for="">
    <input type="radio" name="sex" value="女" v-model='gender'><span>男</span>
  </label>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                gender: 0
            }
        })
    </script>
</body>

总结：

双向数据绑定适合于表单元素，通过操作这些表单元素，他的值也会同步更新，使用的是 v-model

四、动态样式相关

vue实现了数据的响应式，那么在vue中，元素的css样式又是怎样实现这种响应式的呢？下面介绍几种操作css属性的方法。

4.1 内联样式

内联样式就是给元素添加动态style属性，通过事件函数的触发，改变style属性的值，从而动态实现css样式的变化

在使用内联样式时要注意：

1）添加动态style的方式是：给元素添加 :style='{属性名:值}'

注意： “ : ” 千万不能忘记；引号里面是一个对象

2）在css中使用中划线 “-” 的属性名，要改成小驼峰或者用字符串包裹

3）如果有固定不变的css属性，就写在不带:的style里；而变化的css属性写在带:的style里。运行时，两个style是合并发挥作用的。不会发生覆盖。

<body>
    <div id="app">
        <button @click='width+=20'>变大</button>
        <button @click='borderRadius+=10'>变圆</button>
        <button @click='width-=20'>变小</button>
        <div id="box" :style='{width:width+"px",borderRadius:borderRadius+"px"}'></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            //凡是页面上要变动的，都存储在 data 中
            data: {
                width: 100,
                borderRadius: 0
            }
        })
    </script>
</body>

4.2 class语法（这个比较常用）

在使用 class语法 时要注意：

1）class语法顾名思义，就是通过动态改变元素的属性名，从而给元素添加不同的样式。

2）动态class语法： :class="{类名: true/false}"

值为 true，就是生效，值是 false，就是无效。

3）如果有固定不变的class，应该放在不带:的class中，而变化的class则放在带:的class中，最终编译时，不带:的class会和带:的class合并为一个class共同起作用。

<body>
    <div id="app">
        <label for="">
          <input type="checkbox" v-model='agree'>
          <span>我已阅读并同意用户注册协议</span>
        </label>
        <br>

        <div class="btn" :class="{enable:agree,disable:!agree}">提交注册</div>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                agree: true
            }
        })
    </script>
</body>