资讯专栏INFORMATION COLUMN

致敬司徒!avalon例子学习

calx / 3397人阅读

摘要:要求传入一元素,通过全等于比较进行移除。,相当于的第三种方法,清空数组的所有元素。由于需要同步视图的缘故,不能通过的方法来清空元素。,只有当数组不存在此元素时,才添加此元素。

1 小例子数据循环




  
  
  
  


  
序号 项目名称 开始时间 合同金额 支付金额 支付比例
{{$index}} {{el.pro_name}} {{el.crt_time}} {{el.contract_money|number(2)}} {{el.pay_money|number(2)}} 0 {{el.pay_money / el.contract_money *100|number(2)}}%
2 vm之间可以互相拿值




    
    
    
    
    Document


    
{{@a}}
{{@a}} {{@b}}
3 内置指令

$id, vm的名字

$watch, 用于添加监听函数

$fire, 用于触发监听函数

$events, 用于储存监听函数

$model, 返回一个纯净的JS对象

$element, 2.0新增, 当我们用ms-controller,ms-important指定一个VM的作用域,对应元素节点会放到这个属性上.

$computed, 2.2.1新增,用来集中定义计算属性

4 计算属性 4.1 get案例



    
    
    
    
    Document


  
{{@fullName}}
4.2 set案例



    
    
    
    
    Document


  
{{@firstName}}
{{@lastName}}
4.3 计算属性模糊搜索案例



    
    
    
    
    Document


  
{{@test1}} 5 对象data里放数据学vue,不过vue方便得多



    
    
    
    
    Document


  
{{@data.firstName}}
{{@data.lastName}}
6 操作数组方法

pushArray(el), 要求传入一数组,然后将它里面的元素全部添加到当前数组的末端。

remove(el), 要求传入一元素,通过全等于比较进行移除。

removeAt(index), 要求传入一数字,会移除对应位置的元素。

removeAll(arrayOrFunction), 有三种用法,如果是一个函数,则过滤比较后得到真值的元素,
如果是一数组,则将此数组中与原数组相等于的元素全部移除;如果没有任何参数,则全部清空。

clear(),相当于removeAll()的第三种方法,清空数组的所有元素。由于需要同步视图的缘故,不能通过vm.array.length
= 0的方法来清空元素。

ensure(el),只有当数组不存在此元素时,才添加此元素。

set(index, el),用于更新某一索引位置中的元素,因为简单数组元素的数组,是不会转换它的元素

toJSON(), 用于取得数组的$model, 2.2.2新添加的方法

6.1操作数组例子pushArray(不重复添加)




    
    
    
    
    Document








6.2 remove()数组操作例子删




    
    
    
    
    Document


    
{{el}}
7 if显示隐藏包括站位隐藏




    
    
    
    
    Document


  
  

{{@aaa}}
{{@aaa}}
9 arr和obj的for循环




    
    
    
    
    Document


  
  • {{el}}
  • {{key}}--{{val}}
10 事件

animationend、

blur、focus change、input、

click 、 dblclick、 、 keydown、 keypress、keyup、

mousedown、 mouseenter、 mouseleave、 mousemove、 mouseout、

mouseover、 mouseup、 scroll、 submit

简写 :click-1="@fn(el)" :click-2="@fn(el)"

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95222.html

相关文章

  • avalon 单页面程序 (种子工程)之一 用requirejs引入avalon

    摘要:现在微软终于痛定思痛决定放弃了不支持的安全更新,对我们前端来说,真的是重大利好啊言归正传,这篇文章的目的就是把怎么用构建一个单页面程序介绍以下,是对自己的一个总结,也喜欢对大家有一定的借鉴作用,写的不好不对的地方希望大家多评论评论谢谢。 这篇文章是写在公司项目结束之后的,因为我个人不太会把没有实践过的东西写出来,实践是检验真理的唯一标准么,用的怎么样,好不好用,在成熟实践过的项目上能体...

    solocoder 评论0 收藏0
  • JavaScript异步编程原理

    摘要:一异步编程原理显然,上面这种方式和银行取号等待有些类似,只不过银行取号我们并不知道上一个人需要多久才会完成。下面来探讨下中的异步编程原理。 众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着。在事件队列中加一个延时,这样的问题便可以得到缓解...

    lidashuang 评论0 收藏0
  • 《从零构建前后分离的web项目》:前端了解过关了吗?

    摘要:前端基础架构和硬核介绍技术栈的选择首先我们构建前端架构需要对前端生态圈有一切了解,并且最好带有一定的技术前瞻性,好的技术架构可能日后会方便的扩展,减少重构的次数,即使重构也不需要大动干戈,我通常选型技术栈会参考以下三点一提出自身业务的需求是 # 前端基础架构和硬核介绍 showImg(https://segmentfault.com/img/remote/146000001626972...

    lbool 评论0 收藏0
  • 《从零构建前后分离的web项目》:前端了解过关了吗?

    摘要:前端基础架构和硬核介绍技术栈的选择首先我们构建前端架构需要对前端生态圈有一切了解,并且最好带有一定的技术前瞻性,好的技术架构可能日后会方便的扩展,减少重构的次数,即使重构也不需要大动干戈,我通常选型技术栈会参考以下三点一提出自身业务的需求是 # 前端基础架构和硬核介绍 showImg(https://segmentfault.com/img/remote/146000001626972...

    cgspine 评论0 收藏0
  • 《从零构建前后分离的web项目》:前端了解过关了吗?前端基础架构和硬核介绍

    摘要:前端准备前端了解过关了吗前端基础架构和硬核介绍技术栈的选择首先我们构建前端架构需要对前端生态圈有一切了解,并且最好带有一定的技术前瞻性,好的技术架构可能日后会方便的扩展,减少重构的次数,即使重构也不需要大动干戈,我通常选型技术栈会参考以下三 # 前端准备 :前端了解过关了吗?前端基础架构和硬核介绍 showImg(https://segmentfault.com/img/remote/...

    SwordFly 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<
  • {{el.community_name}}