致敬司徒！avalon例子學習

時間  2019-12-04
標籤 致敬 司徒 avalon 例子 學習 简体版
原文   原文鏈接

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)"
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程