vue快速入门(二十三)侦听器的简单写法与完整写法

注释很详细,直接上代码

上一篇

新增内容

  1. 侦听器简单写法侦听对象或属性
  2. 侦听器完整写法侦听对象(可选深度侦听)
    源码
html 复制代码
<!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">
   <div>
    第一个被侦听的数据对象:
    <input type="text" v-model="value1">
  </div>
  <div>第二个被侦听的数据对象(以下为监听对象的三个属性):</div>
  <div>姓名:
    <input type="text" v-model="value2.name">
  </div>
  <div>年龄:
    <input type="text" v-model="value2.age">
  </div>
  <div>性别:
    <input type="text" v-model="value2.sex">
  </div>
</div>
  
    <!-- 导入vue的js代码:不会下载的看专栏第一篇 -->
    <script src="./lib/vue2.js"></script>

    <script>
      const app = new Vue({// Vue实例
        el: '#root',// 挂载点
        data: {// 数据
         value1:'',
         value2:{
          name:'',
          age:'',
          sex:''
         }
        },
        methods: {// 方法
          
        },
        computed:{// 计算属性
          
        },
        watch:{// 侦听器
          // 简单写法,侦听某个数据
          //如果是侦听对象的某个属性,可以写成'value2.name'(单引号是必须的)
          value1(newValue,oldValue){
            console.log(newValue)
          },
          // 完整写法,可以侦听对象
          value2:{
            handler(newValue,oldValue){
              console.log(newValue)//打印的是对象
            },
            deep:true,// 是否深度侦听,启用以后当对象的属性改变时,也会触发侦听器
            immediate:true// 是否立即执行侦听器,启用以后,页面刷新会立即执行侦听器
          }
        }
      })
    </script>
</body>

</html>

效果演示

相关推荐
码蜂窝编程官方14 分钟前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游
gqkmiss14 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃19 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰24 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye30 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm32 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子