avalon子孙元素属性监听

HTML正文:

<body ms-controller="ex">
<div  class="ms-hover" ms-click="change(‘array‘)">
<div ms-repeat="array">{{el}}</div>
</div>
</body>

  

Javascript操作代码:

//对象数组子元素的监听
var vm=avalon.define({
    $id:"ex",
    aaa:{bbb:{ccc:1}},
    array:[1,2],
    change:function(aaa){
        vm[aaa].push(new Date-1);
    }
});

//监听子孙元素只需在该元素的父元素上监听将子元素看作是父元素的一个属性
vm.aaa.bbb.$watch("ccc",function(a,b){
    avalon.log(a,b);
});

setTimeout(function(){
    vm.aaa.bbb.ccc=new Date-0;
}, 2000);

//watch:监听array的属性length的值:数组只能监听到数组长度
vm.array.$watch("length",function(a,b){
    avalon.log("length:"+a+"--"+b);
});

  

原文地址:https://www.cnblogs.com/guohu/p/9276924.html

时间: 2024-08-30 14:47:11

avalon子孙元素属性监听的相关文章

迷你MVVM框架 avalonjs 学习教程15、属性监听与模块通信

avalon的ViewModel对象从其内部EventManager里继承了三个方法,$watch.$unwatch.$fire三个方法,它们就是我们本节的主题. 词如其名,非常直白,一看就知道做什么.我们先从$watch方法说起,它能监听当前的VM第一层的监控属性 与 计算属性,如果某属性是一个对象,想监控其子孙属性,就需要定位到此对象上使用$watch回调了.$watch回调会默认传入先后两个属性值. <!DOCTYPE html> <html> <head> &l

v-once指令、v-cloak指令、条件指令家族、原义指令、循环指令、todolist案例、实例成员-符号、实例成员-计算属性、实例成员-属性监听、监听的案例、局部组件、全局组件、组件交互(父传子、子传父)

v-once指令: v-once:单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <div id="app"> <input type="text" v-model="msg"> <!-- 一旦赋值,只可主动更改 --> <input type="text" v-model="msg" v-once> <p>{{ m

vue 524 (生命周期 计算属性 监听)

每个 Vue 实例在被创建时都要经过一系列的初始化过程--例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会. 依据上表可以确定各个位置的先后触发顺序 //  关于计算属性: vue改变或获取一个内部方法有以下两种种. 1.在vue对象中 以  methods:{}模式定义各类成员方法: 例如(js  vue对象定义内): methods:{ FF1(){return

实例成员:计算属性 监听属性以及vue的项目开发

6)字符串补充 双引号: "前缀" + 变量 + "后缀" 单引号: '前缀' + 变量 + '后缀' 反引号: `前缀$(变量)后缀` ps:在反引号中可以用$()来包裹变量,实现字符串的拼接 7)实例成员:计算属性 监听属性 计算属性: ? 1)计算属性其实就是vue中的方法属性,方法名可以作为属性来使用,属性值就是方法的返回值 ? 2) 在computed中声明的方法属性,不能在data中重复声明,比data中声明的属性要多出些逻辑的的地方 ? 3)方法属性自

ResizeObserver - 元素resize监听API

Motivation 响应式网站/Web应用程序 根据视口大小调整内容展示方式.这通常通过CSS和media查询来完成.当CSS表现不好我们会使用Javascript. 比如document.addEventListener("resize",fun)或者Element的onresize属性.通过监听window.resize事件,Javascript DOM操作与视口大小保持同步. 但你会意识到,这甚至不包括在窗口未被调整大小但元素改变其大小的情况.例如,添加新的子元素,设置元素的d

12.vue属性.监听.组件

1.计算属性 https://cn.vuejs.org/v2/guide/computed.html new Vue({ computed:{//定义 show(){ } } }) ++计算属性1.html:++ <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="vue.js&

使用jQuery动态调整iframe高度,以及jQuery对dom元素的监听

大家可能会遇到子页面内容较多但iframe高度不够的情况.给iframe设置scrolling="no"的话子页面内容显示不全,不设置又会出现滚动条从而影响美观.当我们点击不同的菜单让iframe加载不同的html文件时,iframe的高度就需要做相应的调整. 主题思路:子页面加载完成后根据具体body的高度给iframe设置一个适合的高度 情况1:各个子页面内容与高度比较固定 <script> $(function(){ $("#Frame_Content&qu

vue watch属性监听对象变化。

有时候要监听对象的变化. 我一般用来做一堆input 表单里面条件是否达到,然后按钮的颜色变化. data: { return: { form: { name: '', tel: '', product_value: [], // 产品数组第一个是第一级,第二个是第二级. product_label: '', //产品选择选择对应的文字 xinghao_value: '', // 型号的值 xinghao_label: '', // 型号的名字 guige_value: '', // 规格的值

Vue--computed计算属性监听数据变化----与watch,methods对比

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con