致敬司徒!avalon例子学习

1 小例子数据循环

clipboard.png




  
  
  
  


  
序号 项目名称 开始时间 合同金额 支付金额 支付比例
{{$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之间可以互相拿值

clipboard.png




    
    
    
    
    Document


    
{{@a}}
{{@a}} {{@b}}

3 内置指令

  1. $id, vm的名字
  2. $watch, 用于添加监听函数
  3. $fire, 用于触发监听函数
  4. $events, 用于储存监听函数
  5. $model, 返回一个纯净的JS对象
  6. $element, 2.0新增, 当我们用ms-controller,ms-important指定一个VM的作用域,对应元素节点会放到这个属性上.
  7. $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 操作数组方法

  1. pushArray(el), 要求传入一数组,然后将它里面的元素全部添加到当前数组的末端。
  2. remove(el), 要求传入一元素,通过全等于比较进行移除。
  3. removeAt(index), 要求传入一数字,会移除对应位置的元素。
  4. removeAll(arrayOrFunction), 有三种用法,如果是一个函数,则过滤比较后得到真值的元素,
    如果是一数组,则将此数组中与原数组相等于的元素全部移除;如果没有任何参数,则全部清空。
  5. clear(),相当于removeAll()的第三种方法,清空数组的所有元素。由于需要同步视图的缘故,不能通过vm.array.length
    = 0的方法来清空元素。
  6. ensure(el),只有当数组不存在此元素时,才添加此元素。
  7. set(index, el),用于更新某一索引位置中的元素,因为简单数组元素的数组,是不会转换它的元素
  8. 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)"

你可能感兴趣的:(javascript,avalon)

  • {{el.community_name}}