Avalon 프런트엔드 프로젝트에서 구문 분석 사용

php中世界最好的语言
풀어 주다: 2018-05-24 10:52:46
원래의
2613명이 탐색했습니다.

이번에는 Avalon 프론트엔드 프로젝트 사용에 대한 분석을 가져오겠습니다. Avalon 프론트엔드 프로젝트에서 사용되는 주의 사항은 무엇인가요?

1 작은 예제 데이터 루프

Avalon 프런트엔드 프로젝트에서 구문 분석 사용

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 vm은 서로 값을 얻을 수 있습니다

Avalon 프런트엔드 프로젝트에서 구문 분석 사용

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 내장 명령

  1. $id, vm name

  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 케이스

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 케이스

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 계산된 속성 퍼지 검색 케이스

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 데이터 학습 vue를 객체 데이터에 넣었는데 vue가 훨씬 편리합니다

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 연산 배열 방법

  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(), 배열의 $를 가져오는 데 사용됩니다. 모델, 2.2.2 새로 추가된 메소드

6.1 연산 배열 예시 pushArray(반복 추가 없음)

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 제거() 배열 연산 예시 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 디스플레이 숨김에 스테이션 숨기기가 포함된 경우

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 arr 및 obj's for loop

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개 이벤트

  • animationend,

  • blur, 포커스 변경, 입력,

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

  • mousedown、 mouseenter, mouseleave , mousemove, mouseout,

  • mouseover, mouseup, 스크롤, submit

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

나는 당신을 믿습니다 이 기사의 사례를 읽은 후 방법을 익혔습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Chart.js 경량 차트 라이브러리 사용 사례 분석

Chart.js 경량 HTML5 차트 그리기 도구 라이브러리 사용 단계에 대한 자세한 설명

                
                        
  • {{el.community_name}}
  •                 
            
                            

위 내용은 Avalon 프런트엔드 프로젝트에서 구문 분석 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿