Vue 2.0 学习笔记（三）

zzzzzzzoe

已于 2022-03-03 19:36:06 修改

阅读量2.9k

点赞数 4

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

于 2021-12-13 18:16:47 首次发布

本文链接：https://blog.csdn.net/weixin_44772326/article/details/121908449

版权

Vue 2.0 学习目录

2. 应用场景：使用watch检测用户名是否可用

一、watch侦听器

1. 什么是watch侦听器

所有的侦听器都必须定义到watch节点下。

侦听器本质是个函数，要监听那个数据，就把它作为方法名，只要它发生了变化就会触发这个函数

注意传参时，新值在前，旧值在后。

2. 应用场景：使用watch检测用户名是否可用

实例：获取用户输入的用户名，使用axios发Ajax去调接口请求服务器，看该用户名是否被占用。

补充：下例是使用jquery中的Ajax发请求，判断 newVal 是否被占用。

watch: {
        // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
        // 新值在前，旧值在后
        username(newVal) {
          //传空值会报错，所以判断为空时返回，不会发请求
          if (newVal === '') return
          // 1. 调用 jQuery 中的 Ajax 发起请求，判断 newVal 是否被占用！！！
          $.get('https://www.escook.cn/api/finduser/' + newVal, function (result) {
            console.log(result)
          })
        }
      }