Vue -- 数据监听
<!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">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{name}}
{{hobby}}
{{xuge_obj}} <button @click="my_click">点击改变数据</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
name: "旭哥",
hobby: ["唱歌", "跳舞", "请客吃饭"],
xuge_obj: {
obj1: "王铁锤",
obj2: "李刚蛋"
}
},
methods: {
my_click: function () {
// this.name = "病变"
// this.hobby.push("烫头")
// this.hobby[0] = "狼嚎"
// console.log(this.hobby)
// 用下面这种方法改变数据里的值
// app.$set(this.hobby, 0, "狼嚎")
this.xuge_obj.obj1 = "小粉嫩"
}
},
watch: {
name: {
handler: function (val, oldVal) {
console.log(val)
console.log(oldVal)
}
},
// push改变数据的长度的时候 可以监听到数据改变 新旧值是是一样的
// 不能监听到数据里值的改变 深度监听也不可以 除非用$set
hobby: {
handler: function (val, oldVal) {
console.log(val)
console.log(oldVal)
},
// deep: true
},
xuge_obj: {
handler: function (val, oldVal) {
console.log(val)
console.log(oldVal)
},
deep: true
}
}
})
</script>
</body>
</html>
- push:
改变数据的长度的时候 可以监听到数据改变, 新旧值是一样的
不能监听到数据里面值的改变, 深度监听也不可以
- $set:
改变数据的长度的时候, 可以监听到数据改变,新旧值是不同的,可以监听到数据里的值的变化
- watch:
该属性是在绑定 id= app的时候的实例化的Vue中的参数, 该参数对应的值是一个对象,该对象中
包含的是需要被监听的 data 中存在且被定义了的对象,该对象中包含的参数有: handler,deep;
-handler: 对应函数,该函数,是对被监听属性的新旧值进行操作;
-参数解释:
-val : 新值
-oldval: 旧值
- deep:是否开启深度监听
Vue -- 数据监听的更多相关文章
- vue 数据监听原理
Vue.prototype.listenDatas = function(){ for(var attr in this.$data){ this.listenData(this,attr,this. ...
- Vue获取dom和数据监听
Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...
- vue中的数据监听以及数据交互
现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...
- Vue之数据监听存在的问题
Vue之数据监听 当数据监听的是列表时,数据发生改变,不会被监听到. // 用$set修改数组中的数组能够被监听 // app.$set(this.hobby, 0, "爱你哦") ...
- Blazor和Vue对比学习（基础1.8）：Blazor中实现计算属性和数据监听
1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...
- 谈谈数据监听observable的实现
一.概述 数据监听实现上就是当数据变化时会通知我们的监听器去更新所有的订阅处理,如: var vm = new Observer({a:{b:{x:1,y:2}}}); vm.watch('a.b.x ...
- 设计模式(5): vue 不监听绑定的变量
概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...
- Vue3 为何使用 Proxy 实现数据监听
博客地址:https://ainyi.com/93 vue3 响应式数据放弃了 Object.defineProperty,而使用Proxy来代替它 我们知道,在 vue2 中,实现数据监听是使用Ob ...
- 9.Vue.js 监听属性
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...
随机推荐
- Scrapy基础02
一.start_requests def start_requests(self): cls = self.__class__ if method_is_overridden(cls, Spider, ...
- CRM项目之RBAC权限组件-day26
写在前面 上课第26天,打卡: 世间安得双全法 不负如来不负卿 s17day26 CRM项目 项目概要:XX公司CRM - 权限管理,公共组件,app ***** - 熟悉增删改查,Low *** - ...
- MFC项目中：报错：“fatal error LNK1561: 必须定义入口点”解决方法
编译的时候,报错:“fatal error LNK1561: 必须定义入口点” 解决方案1: 右键->属性->链接器->高级->入口点,设置成:WinMainCRTStartu ...
- [C++]Linux之读取计算机网络数据[/proc/net/dev]
#include<stdlib.h> #include<stdio.h> #define BUFFER_SIZE 256 int main(){ FILE *stream; c ...
- [C++]线性链表之顺序表<一>
顺序表中数据元素的存储地址是其序号的线性函数,只要确定了存储顺序表的起始地址(即 基地址),计算任意一个元素的存储地址的时间是相等的,具有这一特点的存储结构称为[随机存储]. 使用的基本数据结构:数组 ...
- 第20月第18天 小码哥swift
1. 9月12日第一次更新 第二篇玩转[斗鱼直播APP]系列之界面分析 第三篇玩转[斗鱼直播APP]系列之项目部署 第四篇玩转[斗鱼直播APP]系列之获取APP图片资源 第五篇玩转[斗鱼直播APP]系 ...
- 《第一行代码-李兴华》-10.3 System类
10.3 System类 视频地址:System类 /** * * 统计某项操作执行时间 * */ long start = System.currentTimeMillis();//返回以毫秒为单位 ...
- 03-13_static关键字
static主要作用 常见定义结构:public static void main(): static关键字可以用于定义属性及方法: static定义属性 在一个类之中,主要的组成就是属性和方法(分为 ...
- vue通俗易懂的子组件向父组件传值
不多BB直接上图: 如上图:为子组件绑定点击事件 如上图:send方法触发父组件绑定的事件 如上图:为父组件绑定触发事件@myEvent="aa" aa方法接受子组件传过来的值
- zabbix系列 ~ 自动监控多实例功能
一 场景 监控mongo的多实例端口二 目标 定制一套模板,根据不同的端口进行批量监控项的生成三 步骤 1 编写py脚本实现端口josin化输出,以便zabbix_server能进行识别 ...