masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > avalon前端项目中使用解析

avalon前端项目中使用解析

php中世界最好的语言
Lepaskan： 2018-05-24 10:52:46
asal
2652 orang telah melayarinya

这次给大家带来avalon前端项目中使用解析，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>
Salin selepas log masuk

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>
    <p ms-controller="wrap">{{@a}}</p>
    <p ms-controller="wrap2">
        {{@a}}
        <span>{{@b}}</span>
    </p>
</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>
Salin selepas log masuk

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">
  <p>{{@fullName}}</p>
</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>
Salin selepas log masuk

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">
  <p>{{@firstName}}</p>
  <p>{{@lastName}}</p>
</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>
Salin selepas log masuk

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>
  <p 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:&#39;ms-autocomplete&#39;, $id: &#39;aaa&#39;, name: &#39;community_id&#39;, communities :@communities}" />
            </td>
        </tr>
    </p>
</p>
<script>
    avalon.component('ms-autocomplete', {
        template: '<p><input type="text" ms-duplex-string="@search" />' +
            '<ul><li ms-for="($idx,opt) in @aaa">' +
            '{{opt.community_name}}</li></ul></p>',
        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>
Salin selepas log masuk

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">
  <p>{{@data.firstName}}</p>
  <p>{{@data.lastName}}</p>
</body>
</html>
<script>
  var vm = avalon.define({
      $id: 'test',
      data:{
        firstName: '杀猪',
        lastName:'牛刀',
      },
      methods:{
          
      }
      
  })
  setTimeout(() => {
    vm.data.firstName = '哈哈'
  }, 3000);
  </script>
Salin selepas log masuk

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>
Salin selepas log masuk

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">
    <p ms-for="el in @arr">
        {{el}}<button type="button" ms-click="@arr.remove(el)">点我删除该行</button>
    </p>
    <script>
    avalon.define({
        $id: 'test',
        arr: [1,2,3,4,5,6]
    })
    </script>
</body>
</html>
Salin selepas log masuk

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=&#39;@toggle = !@toggle&#39;>点我</span></button></p>
  <p :if="@toggle">{{@aaa}}</p>
  <p :visible="@toggle">{{@aaa}}</p>
  </body>
</html>
Salin selepas log masuk

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>
Salin selepas log masuk

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)"

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Chart.js轻量级图表库使用案例解析

Chart.js 轻量级HTML5图表绘制工具库使用步骤详解

Atas ialah kandungan terperinci avalon前端项目中使用解析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
guna menghuraikan
sumber：php.cn
Artikel sebelumnya：React结合TypeScript和Mobx步骤详解 Artikel seterusnya：ajax异步加载图片实例分析
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2281
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2416
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
2030
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1917
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1990
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan