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 ...
随机推荐
- Tornado的异步非阻塞
阻塞和非阻塞Web框架 只有Tornado和Node.js是异步非阻塞的,其他所有的web框架都是阻塞式的. Tornado阻塞和非阻塞两种模式都支持. 阻塞式: 代表:Django.Flask.To ...
- springboot(二十三)Springboot2.X响应式编程
序言 Spring WebFlux是Spring Framework 5.0中引入的新的反应式Web框架与Spring MVC不同,它不需要Servlet API,完全异步和非阻塞,并 通过React ...
- idea JRebe插件激活方法
具体方法请看创始人博客及github
- [译]A NON-TRIVIAL EXAMPLE OF MEDIATR USAGE
原文 来看看我目前的一个项目.这个是一个多租户的财务跟踪系统.有一个组织继承的关系.首先得新建一个组织. 表单如下: 这个表单能让用户输入关于组织的一些信息,包括active directory组,一 ...
- Python下Tesseract Ocr引擎及安装介绍
1.Tesseract介绍 tesseract 是一个google支持的开源ocr项目,其项目地址:https://github.com/tesseract-ocr/tesseract,目前最新的源码 ...
- Mysql宽字节注入（转）
尽管现在呼吁所有的程序都使用unicode编码,所有的网站都使用utf-8编码,来一个统一的国际规范.但仍然有很多,包括国内及国外(特别是非英语国家)的一些cms,仍然使用着自己国家的一套编码,比如g ...
- Spring 快速开始 Profile 和 Bean
和maven profile类似,Spring bean definition profile 有两个组件:声明和激活. [栗子:开发测试环境使用HyperSQL 生产环境使用JNDI上下文根据配置查 ...
- JS算法练习四
JS算法练习 1.将使用空格分隔单词使用驼峰命名连接起来: var str="HELLO world welcome to my hometown"; /*--先输入一个有空格分隔 ...
- [C++]PAT乙级1012.数字分类 (20/20)
/* 1012. 数字分类 (20) 给定一系列正整数,请按要求对数字进行分类,并输出以下5个数字: A1 = 能被5整除的数字中所有偶数的和: A2 = 将被5除后余1的数字按给出顺序进行交错求和, ...
- 「LibreOJ Round #6」花火
转化思维的好题! 链接:here 大致题意: 有$ n$个数字,你每次可以交换相邻两个,还有一次交换任意两个元素的机会,求最少的交换次数使得这些数字升序排序(原数列两两不同) $ solotion:$ ...