监听器案例

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script src="./../lib/vue.js"></script>

  <script src="./../lib/jquery-3.6.0.min.js"></script>

  <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.6.0/dayjs.min.js"></script>

</head>

<body>

<!--

    1.什么是watch侦听器

        watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

        语法格式如下:

 -->

<div id="app">

    <input type="text" v-model="username">

    <br>

    <input type="password" v-model="form.password">

</div>

<script>

const VIEW_MODEL1 = new Vue({

  el: '#app',

  data: {

    username: '爱大叔大婶',

    form: {

        password: '12131243'

    }

  },

  watch: {

    /**

     * 监听的函数名就是变量名

     * newValue, 新的val值

     * oldValue 旧的值变化

     *

     * 问题1：

     *  如果组件刚加载进入就存在默认值，则监听器是不会触发的

     *  里面的校验接口也就不会触发，要想组件进入时就要对默认值校验

     */

    // 写法一

    // username(newValue, oldValue) {

    //     console.log(newValue)

    //     // 输入项清空则不发请求

    //     if (!newValue) return

    //     // 发起请求，检查用户名是否占用

    //     $.get(`https://www.escook.cn/api/finduser/${newValue}`, function(result) {

    //         console.log(result)

    //     })

    // }

    // 写法二，改换成对象形式

    username: {

        immediate: true, // 要求组件加载时立刻触发监听器（也就是刚进入组件，手动触发一次）

        handler(newValue, oldValue) { // 监听函数

            console.log(newValue)

            // 输入项清空则不发请求

            if (!newValue) return

            // 发起请求，检查用户名是否占用

            $.get(`https://www.escook.cn/api/finduser/${newValue}`, function(result) {

                console.log(result)

            })

        }

    },

    /**

     * deep属性，用来监听属性内的属性变化

     */

    // 写法一

    // form: {

    //     deep: true, // 开启深度监听

    //     handler(newValue, oldValue) {

    //         // 通过属性访问变化的值

    //         console.log(newValue.password)

    //     }

    // }

    // 写法二

    // 通过点属性的方式写法繁琐，简化写法

    'form.password'(newValue, oldValue) {

        console.log(newValue)

    }

  }

})

</script>

</body>

</html>

　　

【Vue2】 Watch 监听器的更多相关文章

  1. Vue2.0 【第一季】第5节 v-on：绑定事件监听器

    目录 Vue2.0 [第一季] 第5节 v-on:绑定事件监听器 第五节 v-on:绑定事件监听器 一.使用绑定事件监听器,编写一个加分减分的程序. Vue2.0 [第一季] 第5节 v-on:绑定事 ...

  2. 【Vue2.x源码系列07】监听器watch原理

    上一章 Vue2计算属性原理,我们介绍了计算属性是如何实现的?计算属性缓存原理?以及洋葱模型是如何应用的? 本章目标 监听器是如何实现的? 监听器选项 - immediate.deep 内部实现 初始 ...

  3. Vue2.0源码阅读笔记--双向绑定实现原理

    上一篇 文章 了解了Vue.js的生命周期.这篇分析Observe Data过程,了解Vue.js的双向数据绑定实现原理. 一.实现双向绑定的做法 前端MVVM最令人激动的就是双向绑定机制了,实现双向 ...

  4. 前端MVC Vue2学习总结（一）——MVC与vue2概要、模板、数据绑定与综合示例

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.Vue是框架而jQuery则是库. 1.2.AMD与CM ...

  5. 前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  6. 前端MVC Vue2学习总结（三）——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  7. 前端MVC Vue2学习总结（四）——条件渲染、列表渲染、事件处理器

    一.条件渲染 1.1.v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1&g ...

  8. 前端MVC Vue2学习总结（五）——表单输入绑定、组件

    一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...

  9. vue2.0之render函数

    虽然vue推荐用template来创建你的html,但是在某些时候你也会用到render函数. 虚拟DOM Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪.请近距离看一下这行代码 ...

  10. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

随机推荐

  1. Python结合文件名称将多个文件复制到不同路径下

      本文介绍基于Python语言,针对一个文件夹下的大量栅格遥感影像文件,基于其各自的文件名,分别创建指定名称的新文件夹,并将对应的栅格遥感影像文件复制到不同的新文件夹下的方法.   首先,我们来看一 ...

  2. 前端传参中文需要utf-8转一下给后端

    const Msg = this.form.Msg.replace( (/%(u[0-9A-F]{4})|(%[0-9A-F]{2})/gm, $0 => { return escape($0) ...

  3. 算法金 | AI 基石，无处不在的朴素贝叶斯算法

    大侠幸会,在下全网同名「算法金」 0 基础转 AI 上岸,多个算法赛 Top 「日更万日,让更多人享受智能乐趣」 历史上,许多杰出人才在他们有生之年默默无闻, 却在逝世后被人们广泛追忆和崇拜. 18世 ...

  4. INFINI Labs 产品更新 | Agent 全新重构，优化指标采集，支持集中配置管理，支持动态下发等功能

    INFINI Labs 产品又更新啦~ 本次更新主要有 Agent.Console.Loadgen 等产品,其中 Agent 进行全新重构升级,新版限制了 CPU 资源消耗,优化了内存,相比旧版内存使 ...

  5. 解密Prompt系列31. LLM Agent之从经验中不断学习的智能体

    Agent智能体的工作流可以简单分成两种:一种是固定的静态工作流,一种是智能体自主决策的动态工作流. 静态流程的Agent举几个例子,例如新闻热点追踪推送Agent,每日新论文摘要总结Agent,它们 ...

  6. vite+vue3+ts+elementPlus前端框架搭建 [二] pinia状态管理

    前面已经完成了基本框架搭建,下一步针对各个模块的封装以及实验 本章主要是针对pinia的状态模块实现 1. 创建Store 在src文件夹下创建一个store的文件夹,并在该文件夹下创建index.t ...

  7. re.search()用法详解

    re.search() 是 Python 的正则表达式库 re 中的一个方法,用于在字符串中搜索与正则表达式模式匹配的第一个位置,并返回一个匹配对象.如果没有找到匹配项,则返回 None. 以下是 r ...

  8. 高通Andriod开机流程与镜像说明

    # 高通Andriod开机流程与镜像说明 Android镜像说明 Android设备刷机时都需要ROM包,ROM包下面有很多的.img和其他的相关镜像文件,其中这里面包含了Android很多的分区,A ...

  9. SpringBoot能同时处理多少请求

    SpringBoot默认的内嵌容器是Tomcat,也就是我们的程序实际上是运行在Tomcat里的.所以与其说SpringBoot可以处理多少请求,到不如说Tomcat可以处理多少请求. 关于Tomca ...

  10. Spring声明事务和分布式事务处理技术

    Spring声明事务的两种方式 方式一.传统的编程式事务管理: 需要手动编写代码在业务层注入事务管理模板(一般不用) 方式二.基于 AOP 技术实现的声明式事务管理: Spring 声明式事务管理在底 ...