vue快速入门（二十四）输入停顿再进行响应

注释很详细，直接上代码

新增内容

使用侦听器监视数据变化情况
使用clearTimeout与定时器实现停顿一段时间再操作内容

源码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 挂载点 -->
  <div id="root">
    输入内容：
    <input type="text" v-model="msg">
  </div>
  
    <!-- 导入vue的js代码：不会下载的看专栏第一篇 -->
    <script src="./lib/vue2.js"></script>

    <script>
      const app = new Vue({// Vue实例
        el: '#root',// 挂载点
        data: {// 数据
          msg: ''
        },
        methods: {// 方法
          
        },
        computed:{// 计算属性
          
        },
        watch:{// 侦听器
         msg(){//这样就能实现只有当输入框的内容在1s内不再改变时才进行延时器里面的输出
           clearTimeout(this.timer)// 清除之前的定时器
           this.timer = setTimeout(() => {// 重新设置定时器
             console.log(this.msg)
           }, 1000);
         }
        }
      })
    </script>
</body>

</html>