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 ...
随机推荐
- vue使用vue-awesome-swiper及一些问题
vue-awesome-swiper是基于swiper的一个轮播图插件,使用非常方便. 首先安装下 npm install vue-awesome-swiper --save 然后在入口文件main. ...
- GreenDao设置数据版本
GreenDao设置数据库版本增加后,会自动删除并创建新数据库,将SCHEMA_VERSION增加即可. 在3.0里可以在config配置里进行设置 apply plugin: 'com.androi ...
- ****** 四十 ******、软设笔记【网络基础】-Internet和Intranet基础
Internet和Intranet基础 一.网络地址及子网掩码 1.IP地址结构及类别 IP地址是由32位二进制数,即4个字节组成的,由网络号和主机号两个字段组成. 网络号的位数决定了可以分配的网络数 ...
- Gossip
http://www.cnblogs.com/xingzc/p/6165084.html 敬请期待...
- python中的optionParser模块
Python 有两个内建的模块用于处理命令行参数:一个是 getopt,<Deep in python>一书中也有提到,只能简单处理 命令行参数:另一个是 optparse,它功能强大,而 ...
- python中#!/usr/bin/env python与#!/usr/bin/python
通常在脚本语言的第一行会看到#!/usr/bin/env python 与 #!/usr/bin/python其中之一,这两句话的目的都是指出你的python文件用什么可执行程序去运行它. #!/us ...
- Linux 文件删除 提示 Operation not permitted
Linux 删除 隐藏文件提示 Operation not permitted ? linux 删除 隐藏文件 提示 Operation not permitted 不允许操作? 使用 ls ...
- lua与C交互 具体
什么样类型的函数可以被Lua调用 typedef int (*lua_CFunction) (lua_State *L); 符合类型的函数怎样处理后才可以被Lua调用 使用lua_register或者 ...
- 第28月第21天 记事本Unicode 游戏编程中的人工智能技术
1. Windows平台,有一个最简单的转化方法,就是使用内置的记事本小程序notepad.exe.打开文件后,点击文件菜单中的另存为命令,会跳出一个对话框,在最底部有一个编码的下拉条. 里面有四个选 ...
- MySql数据库学习笔记(3)
查看默认事务隔离级别 mysql> select @@tx_isolation; mysql> select @@global.tx_isolation; mysql> select ...