Using parsing in avalon front-end project

This time I will bring you an analysis of the use of avalon front-end projects. What are the precautions used in avalon front-end projects. The following is a practical case, let's take a look.

1 Small example data cycle

nbsp;html>


  <meta>
  <meta>
  <meta>
  <script></script>


  

                                                                                                                                                                       

序号	项目名称	开始时间	合同金额	支付金额	支付比例
{{$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)}}%

<script> vm = avalon.define({ $id: &#39;test&#39;, data: {} }); //这里是请求服务器 // $.ajax({ // url:&#39;../json/avalon_for.json&#39;, // type:&#39;get&#39;, // dataType:&#39;json&#39;, // 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>

2 VMs can get values ​​from each other

nbsp;html>


    <meta>
    <meta>
    <meta>
    <script></script>
    <title>Document</title>


    <p>{{@a}}</p>
    <p>
        {{@a}}
        <span>{{@b}}</span>
    </p>


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

3 Built-in command

1. $id, vm name

2. $watch, used to add listening function

3. $fire, used to trigger the listening function

4. $events, used to store the listening function

5. $model, returns a pure JS object

6. $element, new in 2.0, when we use ms-controller, ms-important to specify a VM scope, the corresponding element node will be placed on this attribute.

7. $computed, new in 2.2.1, used to centrally define calculated properties

4 Computed properties

4.1 get case

nbsp;html>


    <meta>
    <meta>
    <meta>
    <script></script>
    <title>Document</title>


  <p>{{@fullName}}</p>


<script>
  var vm = avalon.define({
      $id: &#39;test&#39;,
      firstName: &#39;司徒&#39;,
      lastName: &#39;正美&#39;,
      $computed: {
          //fullName依赖于firstName与lastName
          fullName: function(){
              return this.firstName+&#39; &#39;+this.lastName
          },
          //xxx只依赖于firstNaem
          xxx: function(){
              return this.firstName+&#39;!!&#39;
          }
      }
  })
  setTimeout(() => {
    vm.lastName = &#39;西瓜&#39;;
  },3000);
  </script>

4.2 set case

nbsp;html>


    <meta>
    <meta>
    <meta>
    <script></script>
    <title>Document</title>


  <p>{{@firstName}}</p>
  <p>{{@lastName}}</p>


<script>
  var vm = avalon.define({
      $id: &#39;test&#39;,
      firstName: &#39;杀猪&#39;,
      lastName: &#39;牛刀&#39;,
      $computed: {
          //fullName依赖于firstName与lastName
          fullName: {
              get: function(){
                  return this.firstName+&#39; &#39;+this.lastName
              },
              set: function(val){
                  var arr = val.split(&#39; &#39;)
                  this.firstName = arr[0]
                  this.lastName = arr[1]
              }
          }
      }
  })
  setTimeout(() => {
    vm.fullName = "你有 病吧"
  }, 3000);
  </script>

4.3 Calculated attribute fuzzy search case

nbsp;html>


    <meta>
    <meta>
    <meta>
    <script></script>
    <title>Document</title>


  <p>
    {{@test1}}
    </p>

                                                  <script> avalon.component(&#39;ms-autocomplete&#39;, { template: &#39;<p><input type="text" ms-duplex-string="@search" />&#39; + &#39;<ul><li ms-for="($idx,opt) in @aaa">&#39; + &#39;{{opt.community_name}}&#39;, defaults: { search: &#39;&#39;, communities: [], onReady:function(e){ e.vmodel.$watch(&#39;search&#39;, function(v){ avalon.log(&#39;current search word is &#39;+ 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: &#39;This&#39;, }, { community_id: 5, community_name: &#39;isnot&#39;, }, { community_id: 8, community_name: &#39;agood&#39;, }, { community_id: 10, community_name: &#39;example&#39;, }, { community_id: 22, community_name: &#39;for&#39;, }, { community_id: 23, community_name: &#39;such&#39;, }, { community_id: 43, community_name: &#39;test&#39;, }, { community_id: 45, community_name: &#39;thank&#39;, }, { community_id: 47, community_name: &#39;you&#39;, }, { community_id: 50, community_name: &#39;verymuch&#39;, }, { community_id: 51, community_name: &#39;youre&#39;, }, { community_id: 53, community_name: &#39;welcome&#39;, }, { community_id: 54, community_name: &#39;too&#39;, }, { community_id: 55, community_name: &#39;notsogood&#39;, }, { community_id: 56, community_name: &#39;cheerful&#39;, }]; var vm = avalon.define({ $id: &#39;avalon&#39;, test1: &#39;test1&#39;, communities: communities, }); </script>

5 Put data in object data to learn vue, but vue is much more convenient

nbsp;html>


    <meta>
    <meta>
    <meta>
    <script></script>
    <title>Document</title>


  <p>{{@data.firstName}}</p>
  <p>{{@data.lastName}}</p>


<script>
  var vm = avalon.define({
      $id: &#39;test&#39;,
      data:{
        firstName: &#39;杀猪&#39;,
        lastName:&#39;牛刀&#39;,
      },
      methods:{
          
      }
      
  })
  setTimeout(() => {
    vm.data.firstName = &#39;哈哈&#39;
  }, 3000);
  </script>

6 Array operation method

1. pushArray(el) requires an array to be passed in, and then all the elements in it are added to the end of the current array.

2. remove(el), requires an element to be passed in and removed through equal comparison.

3. removeAt(index), which requires passing in a number, will remove the element at the corresponding position.

4. removeAll(arrayOrFunction), has three uses. If it is a function, filter the elements that get the true value after comparison.
   If it is an array, then combine this array with All equal elements of the original array are removed; if there are no parameters, all are cleared.

5. clear(), equivalent to the third method of removeAll(), clears all elements of the array. Due to the need to synchronize the view, elements cannot be cleared through the vm.array.length
   = 0 method.

6. ensure(el), only add this element if it does not exist in the array.

7. set(index, el) is used to update the element at a certain index position, because the array of simple array elements will not convert its elements

8. toJSON(), used to obtain the $model of the array, 2.2.2 Newly added method

6.1 Example of operating array pushArray (no repeated addition)

nbsp;html>


    <meta>
    <meta>
    <meta>
    <script></script>
    <title>Document</title>



<script>
    var vm = avalon.define({
        $id: &#39;xxx&#39;,
        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>

6.2 remove() array operation example delete

nbsp;html>


    <meta>
    <meta>
    <meta>
    <script></script>
    <title>Document</title>


    <p>
        {{el}}<button>点我删除该行</button>
    </p>
    <script>
    avalon.define({
        $id: &#39;test&#39;,
        arr: [1,2,3,4,5,6]
    })
    </script>

7 if display and hiding include station hiding

nbsp;html>


    <meta>
    <meta>
    <meta>
    <script></script>
    <title>Document</title>


  <script>
  var vm = avalon.define({
    $id: "test",
    aaa: "这是被隐藏的内容",
    toggle: false
  })
  </script>
  <p><button>点我</button></p>
  <p>{{@aaa}}</p>
  <p>{{@aaa}}</p>
  

9 for loop of arr and obj

nbsp;html>


    <meta>
    <meta>
    <meta>
    <script></script>
    <title>Document</title>


  

    
• {{el}}
  

  

    
• {{key}}--{{val}}
  

<script> var vm = avalon.define({ $id: "test", data:{ array:[1,2,3,4], obj:{a:1,b:2,c:3} } }) </script>

10 events

• animationend、

• blur、focus change、input、

• click, dblclick, , keydown, keypress, keyup,

• mousedown, mouseenter, mouseleave, mousemove, mouseout,

• mouseover, mouseup, scroll、submit

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

I believe you have read this article You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Chart.js lightweight chart library use case analysis

Chart.js lightweight Detailed explanation of the steps to use the HTML5 chart drawing tool library

{{el.community_name}}

The above is the detailed content of Using parsing in avalon front-end project. For more information, please follow other related articles on the PHP Chinese website!