Vue学习(二十一)——侦听器

目录

      • 一、侦听器的基本用法
      • 二、侦听器的应用场景

一、侦听器的基本用法

数据变化时执行异步或开销较大的操作。
Vue学习(二十一)——侦听器_第1张图片
下面这个例子我们就可以使用侦听器来完成,很简单,就是名和姓的输入框的值发生改变的时候,全名也会发生变化。
Vue学习(二十一)——侦听器_第2张图片
代码如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
<div id="app">
    <div>
        <span>名:span>
        <span>
        <input type="text" v-model='firstName'>
      span>
    div>
    <div>
        <span>姓:span>
        <span>
        <input type="text" v-model='lastName'>
      span>
    div>
    <div>{{fullName}}div>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
    /*
      侦听器
    */
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Jim',
            lastName: 'Green',
            fullName: 'Jim Green'
        },
        watch:{
            // 此处的val就是firstName的最新值
            firstName: function (val) {
               this.fullName = val + "  " + this.lastName;
            },
            lastName: function (val) {
               this.fullName = this.firstName+ "  " +  val;
            }

        }
    });
script>
body>
html>

需要注意的点是:

  • watch 中的属性一定是data 中 已经存在的数据;
  • watch 中的属性不能自定义,要和监听的属性名称一致;

二、侦听器的应用场景

上面的这个例子如果我们使用computed计算属性来做的话会更简单,如下 :

      computed: {
        fullName: function(){
          return this.firstName + ' ' + this.lastName;
        }
      }

侦听器处理一些特有的场景,如异步的操作,会更加简洁高效。如下面这个例子:

案例:验证用户名是否可用
Vue学习(二十一)——侦听器_第3张图片
需求分析:

① 通过v-model实现数据绑定;
② 需要提供提示信息;
③ 需要侦听器监听输入信息的变化;
④ 需要修改触发的事件;

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
    <div>
        <span>用户名:</span>
        <span>
        <input type="text" v-model.lazy='uname'>
      </span>
        <span>{{tip}}</span>
    </div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    /*
      侦听器
      1、采用侦听器监听用户名的变化
      2、调用后台接口进行验证
      3、根据验证的结果调整提示信息
    */
    var vm = new Vue({
        el: '#app',
        data: {
            uname: '',
            tip: ''
        },
        methods: {
            checkName:function (uname) {
            // 调用接口,可以使用定时任务的方式来模拟接口调用
                var that = this;
                setTimeout(function () {
                    // 模拟接口调用
                    if (uname == "admin") {
                        that.tip ="用户名已经存在,请更换"
                    } else {
                        that.tip ="用户名可以使用"
                    }
                    
                },2000)

            }

        },
        watch: {
          uname:function (val) {
              // 调用后台接口验证用户名的合法性,为了代码更加简洁,我们可以单独封装一个方法
              this.checkName(val);
              // 正在验证
              this.tip ="正在验证...";
          }
        }
    });

</script>
</body>
</html>

效果如下:
在这里插入图片描述
在这里插入图片描述

你可能感兴趣的:(Vue学习)