avalon フロントエンドプロジェクトでの解析の使用-jsチュートリアル-php.cn

avalon フロントエンドプロジェクトでの解析の使用

php中世界最好的语言

リリース： 2018-05-24 10:52:46

オリジナル

2647 人が閲覧しました

今回は、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)}}%

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 組み込みコマンド

$id、vmの名前
$ watch、リスニング関数の追加に使用されます
$fire、リスニング関数のトリガーに使用されます
$events、リスニング関数の保存に使用されます
$model、純粋な JS オブジェクト
$ を返します要素、2.0 の新機能、ms-controller、ms- important を使用して VM のスコープを指定すると、対応する要素ノードがこの属性に配置されます。
$computed、2.2.1 の新機能、以前は計算属性を一元的に定義する

4 計算属性

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 計算属性のあいまい検索case

nbsp;html>


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


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

ログイン後にコピー

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 操作配列メソッド

pushArray(el) は、配列を渡す必要があり、配列内のすべての要素を現在の配列の末尾に追加します。
remove(el) は、等しい比較を通じて要素を渡し、削除する必要があります。
removeAt(index) は数値を渡す必要があり、対応する位置にある要素を削除します。
removeAll(arrayOrFunction) には 3 つの用途があります。関数の場合は、比較後に真の値を取得する要素をフィルターします。
配列の場合は、元の配列と等しい配列内のすべての要素を削除します。 ; パラメータがない場合はすべてクリアされます。
clear() は、removeAll() の 3 番目のメソッドに相当し、配列のすべての要素をクリアします。ビューを同期する必要があるため、要素は vm.array.length
= 0 のメソッドではクリアできません。
ensure(el)、この要素が配列に存在しない場合にのみ追加します。
set(index, el)、単純な配列要素の配列はその要素を変換しないため、特定のインデックス位置で要素を更新するために使用されます
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 Remove()の配列操作例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のforループ

nbsp;html>


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

ログイン後にコピー

{{el}}

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

10イベント

アニメーション終了、
ブラー、フォーカス変更、入力、
クリック、dblclick、、keydown、keypress、keyup、
マウスダウン、マウスエンター、マウスリーブ、mousemove、mouseout、
mouseover、mouseup、scroll、submit

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

私はあなたを信じていますこの記事の事例を読んでその方法をマスターした方は、さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Chart.js 軽量グラフ作成ライブラリのユースケース分析

Chart.js 軽量 HTML5 グラフ描画ツールライブラリの使用手順の詳細な説明

{{el.community_name}}

以上がavalon フロントエンドプロジェクトでの解析の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。