Utilisation de l'analyse dans le projet frontal Avalon-js tutoriel-php.cn

Cette fois, je vais vous apporter une analyse de l'utilisation des projets front-end avalon. Quelles sont les précautions utilisées dans les projets front-end avalon. Voici des cas réels, jetons un coup d'œil.

1 Petit exemple de boucle de données

Utilisation de lanalyse dans le projet frontal Avalon

nbsp;html>


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

Copier après la connexion

序号	项目名称	开始时间	合同金额	支付金额	支付比例
{{$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 peuvent obtenir des valeurs les unes des autres

Utilisation de lanalyse dans le projet frontal 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>

Copier après la connexion

3 Commande intégrée

$id, le nom de la vm
$watch, utilisée pour ajouter une écoute function
$fire, utilisé pour déclencher la fonction d'écoute
$events, utilisé pour stocker la fonction d'écoute
$model , renvoie un objet JS pur
$element, nouveau en 2.0, lorsque nous utilisons ms-controller, ms-important pour spécifier la portée d'une VM, le nœud d'élément correspondant sera placé ici Attributs
$computed, nouveau dans 2.2.1, utilisé pour définir de manière centralisée les attributs calculés

4. attributs calculés

4.1 obtenir le cas

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>

Copier après la connexion

4.2 définir le cas

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>

Copier après la connexion

4.3 Cas de recherche floue d'attribut calculé

nbsp;html>


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


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

Copier après la connexion

5 Mettre des données vue dans les données d'objet, mais vue est beaucoup plus pratique

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>

Copier après la connexion

6 Méthode d'opération de tableau

pushArray(el), qui nécessite la transmission d'un tableau, puis tous les éléments qu'il contient sont ajoutés à la fin actuelle du tableau.
remove(el), nécessite qu'un élément soit transmis et supprimé par comparaison égale.
removeAt(index), qui nécessite la transmission d'un nombre, supprimera l'élément à la position correspondante.
removeAll(arrayOrFunction), a trois utilisations. S'il s'agit d'une fonction, filtrez les éléments qui obtiennent la vraie valeur après comparaison.
S'il s'agit d'un tableau, combinez-le. tableau avec Tous les éléments égaux du tableau d'origine sont supprimés ; s'il n'y a aucun paramètre, tous sont effacés.
clear(), équivalent à la troisième méthode de removeAll(), efface tous les éléments du tableau. En raison de la nécessité de synchroniser les vues, les éléments ne peuvent pas être effacés via la méthode vm.array.length
= 0.
ensure(el), ajoutez cet élément uniquement s'il n'existe pas dans le tableau.
set(index, el), utilisé pour mettre à jour l'élément à une certaine position d'index, car un tableau d'éléments de tableau simples ne convertira pas ses éléments
toJSON(), utilisé pour obtenir le $model du tableau, 2.2.2 méthode nouvellement ajoutée

6.1 Exemple d'exploitation d'un tableau pushArray (pas d'ajout répété)

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>

Copier après la connexion

6.2 exemple d'opération de tableau Remove() Supprimer

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>

Copier après la connexion

7 si l'affichage et le masquage incluent le masquage de la station

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>

Copier après la connexion

9 pour la boucle d'arr et obj

nbsp;html>


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

Copier après la connexion

{{el}}

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

10 événements

animationend,
flou, changement de focus, saisie,
cliquez, dblclick, , keydown, keypress, keyup,
mousedown, mouseenter, mouseleave, mousemove, mouseout,
survol de la souris, déplacement de la souris, défilement, soumission

Abréviation : click-1="@fn(el)" :click-2="@fn(el)"

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Analyse des cas d'utilisation de la bibliothèque de graphiques légère Chart.js

Chart.js léger Explication détaillée du étapes pour utiliser la bibliothèque d'outils de dessin de graphiques HTML5