avalon前端專案中使用解析-js教程-PHP中文網

首頁

web前端

js教程

avalon前端專案中使用解析

php中世界最好的语言

May 24, 2018 am 10:52 AM

使用解析

這次帶給大家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物件
$element, 2.0新增, 當我們用ms-controller,ms-important指定一個VM的作用域,對應元素節點會放到這個屬性上.
$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>

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), 有三種用法，如果是函數，則過濾比較後得到真值的元素，
如果是一數組，則將此數組中與原始數組相等於的元素全部移除；如果沒有任何參數，則全部清空。
clear()，相當於removeAll()的第三種方法，清空陣列的所有元素。由於需要同步視圖的緣故，無法透過vm.array.length
= 0的方法來清空元素。
ensure(el)，只有當陣列不存在此元素時，才會新增此元素。
set(index, el)，用來更新某一索引位置中的元素，因為簡單數組元素的數組，就是不會轉換它的元素
toJSON()，用來取得陣列的$model, 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()陣列操作範例刪除

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顯示隱藏包含站位隱藏

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 事件

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圖表繪製工具庫使用步驟詳解

{{el.community_name}}

以上是avalon前端專案中使用解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python解析XML中的特殊字符和转义序列Aug 08, 2023 pm 12:46 PM

Python解析XML中的特殊字符和转义序列XML（eXtensibleMarkupLanguage）是一种常用的数据交换格式，用于在不同系统之间传输和存储数据。在处理XML文件时，经常会遇到包含特殊字符和转义序列的情况，这可能会导致解析错误或者误解数据。因此，在使用Python解析XML文件时，我们需要了解如何处理这些特殊字符和转义序列。一、特殊字符和

Python编程解析百度地图API文档中的坐标转换功能Aug 01, 2023 am 08:57 AM

Python编程解析百度地图API文档中的坐标转换功能导读：随着互联网的快速发展，地图定位功能已经成为现代人生活中不可或缺的一部分。而百度地图作为国内最受欢迎的地图服务之一，提供了一系列的API供开发者使用。本文将通过Python编程，解析百度地图API文档中的坐标转换功能，并给出相应的代码示例。一、引言在开发中，我们有时会涉及到坐标的转换问题。百度地图AP

PHP8.0中的XML解析库May 14, 2023 am 08:19 AM

随着PHP8.0的发布，许多新特性都被引入和更新了，其中包括XML解析库。PHP8.0中的XML解析库提供了更快的解析速度和更好的可读性，这对于PHP开发者来说是一个重要的提升。在本文中，我们将探讨PHP8.0中的XML解析库的新特性以及如何使用它。什么是XML解析库？XML解析库是一种软件库，用于解析和处理XML文档。XML是一种用于将数据存储为结构化文档

使用Python解析SOAP消息Aug 08, 2023 am 09:27 AM

使用Python解析SOAP消息SOAP（SimpleObjectAccessProtocol）是一种基于XML的远程过程调用（RPC）协议，用于在网络上不同的应用程序之间进行通信。Python提供了许多库和工具来处理SOAP消息，其中最常用的是suds库。suds是Python的一个SOAP客户端库，可以用于解析和生成SOAP消息。它提供了一种简单而

使用Python解析带有命名空间的XML文档Aug 09, 2023 pm 04:25 PM

使用Python解析带有命名空间的XML文档XML是一种常用的数据交换格式，能够适应各种应用场景。在处理XML文档时，有时会遇到带有命名空间（namespace）的情况。命名空间可以防止不同XML文档中元素名的冲突，提高了XML的灵活性和可扩展性。本文将介绍如何使用Python解析带有命名空间的XML文档，并给出相应的代码示例。首先，我们需要导入xml.et

PHP 爬虫实战之获取网页源码和内容解析Jun 13, 2023 am 10:46 AM

PHP爬虫是一种自动化获取网页信息的程序，它可以获取网页代码、抓取数据并存储到本地或数据库中。使用爬虫可以快速获取大量的数据，为后续的数据分析和处理提供巨大的帮助。本文将介绍如何使用PHP实现一个简单的爬虫，以获取网页源码和内容解析。一、获取网页源码在开始之前，我们应该先了解一下HTTP协议和HTML的基本结构。HTTP是HyperText

PHP中的单点登录（SSO）鉴权方法解析Aug 08, 2023 am 09:21 AM

PHP中的单点登录（SSO）鉴权方法解析引言：随着互联网的发展，用户通常要同时访问多个网站进行各种操作。为了提高用户体验，单点登录（SingleSign-On，简称SSO）应运而生。本文将探讨PHP中的SSO鉴权方法，并提供相应的代码示例。一、什么是单点登录（SSO）？单点登录（SSO）是一种集中化认证的方法，在多个应用系统中，用户只需要登录一次，就能访问

PHP中的HTTP Basic鉴权方法解析及应用Aug 06, 2023 am 08:16 AM

PHP中的HTTPBasic鉴权方法解析及应用HTTPBasic鉴权是一种简单但常用的身份验证方法，它通过在HTTP请求头中添加用户名和密码的Base64编码字符串进行身份验证。本文将介绍HTTPBasic鉴权的原理和使用方法，并提供PHP代码示例供读者参考。一、HTTPBasic鉴权原理HTTPBasic鉴权的原理非常简单，当客户端发送一个请求时

See all articles