經過兩個例子講解avalon的部分結構

時間 2019-11-12

標籤經過兩個例子講解 avalon 部分結構简体版

原文原文鏈接

avalon是一個迷你的mvvm框架，兼容IE6，若是你只打算兼容IE10與標準瀏覽器，那麼下avalon.modern.js。而且體積比較小，下面就舉兩個例子介紹avalon。html

例子1

效果以下，點擊add按鈕可實現藍色方塊的添加，而且方塊上面的數字也有所增長，在方塊上點擊即可實現該對應的方塊刪除，點擊delete按鈕最末端的方塊消失。數組

在head 部分導入avalon，並設定方塊樣式。瀏覽器

 
       <head> 
      
       <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> 
      
       </head>

body中代碼ruby

 
       <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 設置做用域，就是設置avalon效果實現範圍, 在avalon中，有兩個綁定做用域的屬性，分別是ms-controller, ms-important
ms-repeat 循環綁定,在例子中用於循環數組
{{el}} 顯示數組內容
ms-click 爲單擊實現事件
$remove 爲點擊刪除該指定元素事件，等於直接導入remove()方法
不但有點擊事件的綁定屬性，還有其餘的屬性,詳情可點擊這裏框架

 
       var  
       i = 3; 
      
       avalon.define( 
       "square" 
       , 
       function 
       (vm){ 
      
       vm.model = [ 
       "1 " 
       , 
       " 2" 
       , 
       " 3" 
       ];   
       //默認數組裏有三個數 
      
       vm.add =   
       function  
       (){        
       //增長事件 
      
       vm.model.push(vm.model[i] = [i+1]);   
       //導入push();方法 
      
       i++; 
      
       } 
      
       vm.remove =  
       function 
       (rm){    
       // 點擊指定方塊刪除 
      
       rm(); 
      
       }; 
      
       vm.dd =  
       function 
       (){        
       //點擊刪除事件 
      
       vm.model.pop();          
       //導入pop();方法 
      
       i--; 
      
       } 
      
       });

例子2

 
       <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 用判斷來顯示和隱藏，ms-if也能夠作出一樣的效果，可是ms-if的做用是把不知足的元素刪除，而ms-visible只是隱藏而已。mvvm

 
       avalon.define( 
       "change" 
       , 
       function 
       (vm){ 
      
       vm.model = [ 
       "1" 
       , 
       "2" 
       , 
       "3" 
       , 
       "4" 
       , 
       "5" 
       , 
       "6" 
       ];   
       //默認顯示六個方塊 
      
       vm.aa =  
       '' 
       ;   
       //aa初始化狀態，顯示所有方塊 
      
       vm.bb =  
       function 
       (el){ 
      
       if 
       (vm.aa) 
      
       vm.aa =  
       '' 
       ; 
      
       else 
      
       vm.aa = el;   
       //不然顯示指定方塊 
      
       }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。