一、输入框相关事件

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

Logo

前往低代码交流专区

更多推荐