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 ...
随机推荐
- python实现双向链表
双向链表 一种更复杂的链表是“双向链表”或“双面链表”.每个节点有两个链接:一个指向前一个节点,当此节点为第一个节点时,指向空值:而另一个指向下一个节点,当此节点为最后一个节点时,指向空值. 实现 c ...
- system.net.webexception远程服务器返回了错误: NotFound。
Not Found类的错误主要是由于网络服务访问出错.所以需要分析是由哪个网络服务访问失败而导致的. DataAccessSilverlight.PowerDataServiceReference.G ...
- thinkcmf 相关
后台登录,暂停关掉登录验证码: /Volumes/macHD2/myCode/wwwroot/app/admin/controller/PublicController.php $captcha = ...
- 【八】虚拟机工具 01 jps命令详解
JPS 名称: jps - Java Virtual Machine Process Status Tool 命令用法: jps [options] [hostid] options:命令选项,用来对 ...
- GCC编译器原理（三）------编译原理三：编译过程（3）---编译之汇编以及静态链接【2】
4.1.2 符号解析与重定位 (1)重定位 在完成空间和地址的分配步骤之后,链接器就进入了符号解析和重定位的步骤,这是静态链接的核心部分. 先看看 a.o 的反汇编文件: objdump -d a.o ...
- poj2559/hdu1506 单调栈经典题
我实在是太菜了啊啊啊啊啊 到现在连个单调栈都不会啊啊啊 写个经典题 #include<cstdio> #include<algorithm> #include<cstri ...
- solr与tomcat集成
1.准备tomcat8.solr6.solr-home 注意,如果用tomcat7或者之前的版本,因为jar包版本缘故,会出现java.lang.NoSuchMethodError 错误 解压tomc ...
- SQL手工注入入门级笔记(更新中)
一.字符型注入 针对如下php代码进行注入: $sql="select user_name from users where name='$_GET['name']'"; 正常访问 ...
- Leetcode#832. Flipping an Image（翻转图像）
题目描述 给定一个二进制矩阵 A,我们想先水平翻转图像,然后反转图像并返回结果. 水平翻转图片就是将图片的每一行都进行翻转,即逆序.例如,水平翻转 [1, 1, 0] 的结果是 [0, 1, 1]. ...
- maven的pom.xml文件的标签详解
该博文引至:https://www.cnblogs.com/hafiz/p/5360195.html <project xmlns="http://maven.apache.org/P ...