Two examples are provided to illustrate the structure of aveon.

Avron is a mini mvvm framework that is compatible with IE6. If you only want to be compatible with ie10 and standard browsers, use avron. Modern. js. And the size is relatively small. The following two examples describe aveon.

Example 1

The effect is as follows. You can click the Add button to add a blue square, and the numbers on the square are also increased. You can click on the square to delete the corresponding square, click Delete to remove the last square.

In the head section, import aveon and set the square style.

?

12345678910

<title>TODO supply a title</title>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <script src="avalon.js"></script>        <style>            *{ list-style:none; margin: 0;padding: 0; boder:0;}            .color_cs{ background: #ff9999; width: 400px; height: 400px;}        </style>

Code in Body

?

1234567891011

<div  ms-controller="square" style="  background:#99ccff;">            <ul style=" width: 1500px; display: inline-block; ">                <li ms-repeat="model"><div style=" width: 200px; height: 200px; background: #66ffcc; margin: 10px 0 0 10px;float: left; display: block;" ms-click="remove($remove)"ms-mouseover="color_cs:color_change" >{{el}}</div></li>            </ul>          <div>               <input type="button" ms-click="add" value="add" />               <input type="button" ms-click="dd" value="delete" />            </div>                   </div>

MS-controlles sets the scope, which is to set the avron effect implementation scope. In avron, there are two attributes bound to the scope, namely, MS-controller and MS-important.
MS-repeat loop binding, which is used to loop arrays in the example
{El} displays the array content
MS-click: Click to implement the event
$ Remove: Click to delete the specified Element event, which is equivalent to directly importing the remove () method.
You can click here for details, not only the binding attribute of click events, but also other attributes.

?

12345678910111213141516171819

var i = 3;            avalon.define("square",function(vm){                                 vm.model = ["1 "," 2"," 3"];  // The default array contains three numbers.                                 vm.add =  function (){       // Add events                    vm.model.push(vm.model[i] = [i+1]);  // Import push (); Method                    i++;                                    }                vm.remove = function(rm){   // Click the specified square to delete it.                   rm();                                    };                vm.dd = function(){       // Click Delete event                    vm.model.pop();         // Import POP (); Method                    i--;                }             });

Example 2

?

1234	<div style="background: #d1fcfb;" ms-controller="change">            <ul style=" width: 1500px;display: inline-block;"><li ms-repeat="model" ms-click="bb(el)"ms-visible="!aa || el == aa" ><div class="bb" >{{el}}</div></li></ul>        </div>

MS-visible can be used to display and hide elements. MS-if can also achieve the same effect. However, MS-if is used to delete elements that do not meet the requirements, MS-visible is only hidden.

?

12345678910

avalon.define("change",function(vm){                vm.model = ["1","2","3","4","5","6"];  // Six squares are displayed by default.                vm.aa = ‘‘;  // AA initialization status, displaying all squares                vm.bb = function(el){                   if(vm.aa)                      vm.aa = ‘‘;                   else                       vm.aa = el;  // Otherwise, the specified square is displayed.                                      }

Two examples are provided to illustrate the structure of aveon.