致敬司徒！avalon例子学习

头像
曦沙飞舞
    阅读 12 分钟
    1

    1 小例子数据循环

    clipboard.png

    <!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" content="ie=edge">
  <script src="https://cdn.bootcss.com/avalon.js/2.0s/avalon.js"></script>
</head>
<body>
  <table class="table table-striped table-hover pro-lists">
    <thead>
      <tr>
        <th>序号</th>
        <th>项目名称</th>
        <th>开始时间</th>
        <th>合同金额</th>
        <th>支付金额</th>
        <th>支付比例</th>
      </tr>
    </thead>
    <tbody ms-controller="test">
      <tr ms-for="($index,el) in @data">
        <td>{{$index}}</td>
        <td>{{el.pro_name}}</td>
        <td>{{el.crt_time}}</td>
        <td>{{el.contract_money|number(2)}}</td>
        <td>{{el.pay_money|number(2)}}</td>
        <td ms-if="el.pay_money==0">
          0
        </td>
        <td ms-if="el.pay_money!=0">
          {{el.pay_money / el.contract_money *100|number(2)}}%
        </td>
      </tr>
    </tbody>
  </table>
</body>
<script type="text/javascript">
  vm = avalon.define({
    $id: 'test',
    data: {}
  });
  //这里是请求服务器
  //     $.ajax({
  //         url:'../json/avalon_for.json',
  //         type:'get',
  //         dataType:'json',
  //         success: function (ajax) {
  //             vm.data=ajax.data;
  // //            console.log(vm.data)
  //         }
  //     });
  vm.data = [{
      "pro_name": "沙湖，南湖水环境提升规划方案",
      "crt_time": "2017-10-27",
      "contract_money": "20000",
      "pay_money": "0"

    },
    {
      "pro_name": "保利升官渡项目新建地下车库通道方案论",
      "crt_time": "2017-10-27",
      "contract_money": "6000",
      "pay_money": "555"
    },
    {
      "pro_name": "邬家巷（鹦鹉大道-南城巷）道路排水修建规划",
      "crt_time": "2017-10-28",
      "contract_money": "7777",
      "pay_money": "3333"
    }
  ]
</script>

</html>

    2 vm之间可以互相拿值

    clipboard.png

    <!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" content="ie=edge">
    <script src="https://cdn.bootcss.com/avalon.js/2.0s/avalon.js"></script>
    <title>Document</title>
</head>
<body>
    <div ms-controller="wrap">{{@a}}</div>
    <div ms-controller="wrap2">
        {{@a}}
        <span>{{@b}}</span>
    </div>

</body>
</html>
<script type="text/javascript">
    var vm = avalon.define({
        $id: 'wrap',
        a: '123'
    });
    var def = avalon.define({
        $id: "wrap2",
        a: "大家好",
        b: vm.a   //获取第一个Model里的属性值
    });
</script>

    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案例

    <!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" content="ie=edge">
    <script src="https://unpkg.com/avalon2@2.2.8/dist/avalon.js"></script>
    <title>Document</title>
</head>
<body :controller="test">
  <div>{{@fullName}}</div>
</body>
</html>
<script>
  var vm = avalon.define({
      $id: 'test',
      firstName: '司徒',
      lastName: '正美',
      $computed: {
          //fullName依赖于firstName与lastName
          fullName: function(){
              return this.firstName+' '+this.lastName
          },
          //xxx只依赖于firstNaem
          xxx: function(){
              return this.firstName+'!!'
          }
      }
  })
  setTimeout(() => {
    vm.lastName = '西瓜';
  },3000);
  </script>

    4.2 set案例

    <!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" content="ie=edge">
    <script src="https://unpkg.com/avalon2@2.2.8/dist/avalon.js"></script>
    <title>Document</title>
</head>
<body :controller="test">
  <div>{{@firstName}}</div>
  <div>{{@lastName}}</div>
</body>
</html>
<script>
  var vm = avalon.define({
      $id: 'test',
      firstName: '杀猪',
      lastName: '牛刀',
      $computed: {
          //fullName依赖于firstName与lastName
          fullName: {
              get: function(){
                  return this.firstName+' '+this.lastName
              },
              set: function(val){
                  var arr = val.split(' ')
                  this.firstName = arr[0]
                  this.lastName = arr[1]
              }
          }
      }
  })
  setTimeout(() => {
    vm.fullName = "你有 病吧"
  }, 3000);
  </script>

    4.3 计算属性模糊搜索案例

    <!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" content="ie=edge">
    <script src="https://unpkg.com/avalon2@2.2.8/dist/avalon.js"></script>
    <title>Document</title>
</head>
<body>
  <div ms-controller="avalon">
    {{@test1}}
    <table>
        <tr>
            <td>
                <ul>
                    <li ms-for="el in @communities">{{el.community_name}}</li>
                </ul>
            </td>
             <td>
               <wbr ms-widget="{is:'ms-autocomplete', $id: 'aaa', name: 'community_id', communities :@communities}" />
            </td>
        </tr>
    </div>
</div>
<script>
    avalon.component('ms-autocomplete', {
        template: '<div><input type="text" ms-duplex-string="@search" />' +
            '<ul><li ms-for="($idx,opt) in @aaa">' +
            '{{opt.community_name}}</li></ul></div>',
        defaults: {
            search: '',
            communities: [],
            onReady:function(e){
                e.vmodel.$watch('search', function(v){
                    avalon.log('current search word is '+ v)
                })
            },
            $computed: {
                aaa: {
                    get: function() {
                        var ret = [];
                        for (var i = 0; i < this.communities.length; i++) {
                            if ((this.communities[i].community_name.indexOf(this.search) > -1)) {
                                ret[ret.length] = this.communities[i];
                                if(ret.length === 5){
                                    break
                                }
                            }
                        }
                        return ret;
                    }
                }
            }

        }
    });
    communities = [{
        community_id: 3,
        community_name: 'This',
    }, {
        community_id: 5,
        community_name: 'isnot',
    }, {
        community_id: 8,
        community_name: 'agood',
    }, {
        community_id: 10,
        community_name: 'example',
    }, {
        community_id: 22,
        community_name: 'for',
    }, {
        community_id: 23,
        community_name: 'such',
    }, {
        community_id: 43,
        community_name: 'test',
    }, {
        community_id: 45,
        community_name: 'thank',
    }, {
        community_id: 47,
        community_name: 'you',
    }, {
        community_id: 50,
        community_name: 'verymuch',
    }, {
        community_id: 51,
        community_name: 'youre',
    }, {
        community_id: 53,
        community_name: 'welcome',
    }, {
        community_id: 54,
        community_name: 'too',
    }, {
        community_id: 55,
        community_name: 'notsogood',
    }, {
        community_id: 56,
        community_name: 'cheerful',
    }];
    var vm = avalon.define({
        $id: 'avalon',
        test1: 'test1',
        communities: communities,
    });
</script>
</body>
</html>

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

    <!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" content="ie=edge">
    <script src="https://unpkg.com/avalon2@2.2.8/dist/avalon.js"></script>
    <title>Document</title>
</head>
<body :controller="test">
  <div>{{@data.firstName}}</div>
  <div>{{@data.lastName}}</div>
</body>
</html>
<script>
  var vm = avalon.define({
      $id: 'test',
      data:{
        firstName: '杀猪',
        lastName:'牛刀',
      },
      methods:{
          
      }
      
  })
  setTimeout(() => {
    vm.data.firstName = '哈哈'
  }, 3000);
  </script>

    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（不重复添加）

    <!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" content="ie=edge">
    <script src="https://unpkg.com/avalon2@2.2.8/dist/avalon.js"></script>
    <title>Document</title>
</head>

<body :controller="test">

</body>
<script>
    var vm = avalon.define({
        $id: 'xxx',
        array: [1, 2, 3]
    })
    vm.array.push(4, 5, 6)
    vm.array.pushArray([4, 5, 6]) //这个比push方法好用
    vm.array.clear()
    vm.array.ensure(3) //[3]
    vm.array.ensure(3) //[3]
    console.log(vm.array);
    vm.array.ensure(4) //[3,4]
    console.log(vm.array);
</script>

</html>

    6.2 remove()数组操作例子删

    <!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" content="ie=edge">
    <script src="https://unpkg.com/avalon2@2.2.8/dist/avalon.js"></script>
    <title>Document</title>
</head>
<body ms-controller="test">
    <div ms-for="el in @arr">
        {{el}}<button type="button" ms-click="@arr.remove(el)">点我删除该行</button>
    </div>
    <script>
    avalon.define({
        $id: 'test',
        arr: [1,2,3,4,5,6]
    })
    </script>
</body>

</html>

    7 if显示隐藏包括站位隐藏

    <!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" content="ie=edge">
    <script src="https://unpkg.com/avalon2@2.2.8/dist/avalon.js"></script>
    <title>Document</title>
</head>
<body :controller="test">
  <script>
  var vm = avalon.define({
    $id: "test",
    aaa: "这是被隐藏的内容",
    toggle: false
  })
  </script>
  <p><button type="button" :click='@toggle = !@toggle'>点我</span></button></p>
  <div :if="@toggle">{{@aaa}}</div>
  <div :visible="@toggle">{{@aaa}}</div>
  </body>
</html>

    9 arr和obj的for循环

    <!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" content="ie=edge">
    <script src="https://unpkg.com/avalon2@2.2.8/dist/avalon.js"></script>
    <title>Document</title>
</head>
<body :controller="test">
  <ul>
    <li :for="el in @data.array">{{el}}</li>
  </ul>

  <ul>
    <li :for="(key,val) in @data.obj">{{key}}--{{val}}</li>
  </ul>
</body>
</html>
<script>
  var vm = avalon.define({
    $id: "test",
    data:{
      array:[1,2,3,4],
      obj:{a:1,b:2,c:3}
    }
  })
  </script>

    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)"
    javascriptavalon
    曦沙飞舞
    673 声望15 粉丝

    爱前端，爱生活

    « 上一篇
    关于vue-cli打包或者上线后文件各种路径或者找不到的问题解决方案
    下一篇 »
    typescript学习笔记

    引用和评论

    推荐阅读
    头像
    1 PHP

    曦沙飞舞阅读 1.3k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新