Using parsing in avalon front-end project-JS Tutorial-php.cn

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

Using parsing in avalon front-end project

nbsp;html>


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

Copy after login

序号	项目名称	开始时间	合同金额	支付金额	支付比例
{{$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 VMs can get values from each other

Using parsing in avalon front-end project

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>

Copy after login

3 Built-in command

$id, vm name
$watch, used to add listening function
$fire, used to trigger the listening function
$events, used to store the listening function
$model, returns a pure JS object
$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.
$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>

Copy after login

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>

Copy after login

4.3 Calculated attribute fuzzy search case

nbsp;html>


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


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

Copy after login

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>

Copy after login

6 Array operation method

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.
remove(el), requires an element to be passed in and removed through equal comparison.
removeAt(index), which requires passing in a number, will remove the element at the corresponding position.
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.
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.
ensure(el), only add this element if it does not exist in the array.
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
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>

Copy after login

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>

Copy after login

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>

Copy after login

9 for loop of arr and obj

nbsp;html>


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

Copy after login

{{el}}

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

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!