avalon視頻學習筆記（七）

時間 2019-12-02

標籤 avalon 視頻學習筆記简体版

原文原文鏈接

1、屬性操做

DOM操做之屬性操做：

一、類名操做<div class="active"> ms-class

（1）ms-class

a、ms-class="active" 默認寫法，爲元素添加active樣式

b、ms-class="active:isOk" isOK值爲true，添加active，爲false，刪除active

c、ms-class=「width{{w}}:isOK」類名中能夠使用插值表達式

d、ms-class="red:1+1" 根據計算結果決定添加或刪除red

e、ms-class="aaa bbb ccc" 添加多個樣式，結果是aaa bbb ccc

f、ms-class-1="aaa" ms-class-2="bbb" 添加多個樣式，根據ms-class-後面的數值大小，決定執行順序

g、ms-class-2="bbb" ms-class="aaa" ms-class-1="ccc" 添加多個樣式，結果是aaa ccc bbb

h、ms-class="xxx yyy zzz:true" 添加多個樣式，結果是xxx yyy zzz

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
<head> <meta charset="UTF-8"> <title>avalon-class</title> <script type="text/javascript" src="../avalon.min.js"></script> <script type="text/javascript"> avalon.ready(function () { avalon.define({ $id:"ms-class", }); avalon.scan(); }) </script> <style> .aaa{ color:blue; border:1px solid blue; } </style></head><body ms-controller="ms-class"> <div ms-class="aaa" ms-class-1="bbb" ms-class-2="ccc">它的類名是 aaa bbb ccc</div> <div ms-class-2="aaa" ms-class="bbb" ms-class-1="ccc">它的類名是 bbb ccc aaa</div> <div ms-class="bbb" ms-class-1="aaa" ms-class-2="ccc">它的類名是bbb aaa ccc</div> <div ms-class="xxx yyy zzz">它的類名是xxx yyy zzz</div> <div ms-class="XXX YYY ZZZ:true">它的類名是XXX YYY ZZZ</div></body>

切換類名操做：

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
<head> <meta charset="UTF-8"> <title>avalon-class</title> <script type="text/javascript" src="../avalon.min.js"></script> <script type="text/javascript"> avalon.ready(function () { var model = avalon.define({ $id:"ms-class", toggle: true, click:function (e) { model.toggle = !model.toggle } }); avalon.scan(); }) </script> <style> .test{ width: 100px; height: 100px; border: 1px solid red; color: red; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } .aaa{ color:blue; border:1px solid blue; } </style></head><body ms-controller="ms-class"> <div class="test" ms-class="aaa:toggle" ms-click="click">點我</div> <div ms-class="aaa" ms-class-1="bbb" ms-class-2="ccc">它的類名是 aaa bbb ccc</div> <div ms-class-2="aaa" ms-class="bbb" ms-class-1="ccc">它的類名是 bbb ccc aaa</div> <div ms-class="bbb" ms-class-1="aaa" ms-class-2="ccc">它的類名是bbb aaa ccc</div> <div ms-class="xxx yyy zzz">它的類名是xxx yyy zzz</div> <div ms-class="XXX YYY ZZZ:true">它的類名是XXX YYY ZZZ</div></body>

（2）綁定屬性ms-active，ms-hover

a、ms-active、ms-hover分別是用來模擬：avtice，：hover效果，用法與ms-class同樣

b、ms-active只在點擊的那那一瞬間有效果

c、ms-hover只在掠過期有效果，失去焦點或者離開目標元素就會移除剛纔添加的類名

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
<head> <meta charset="UTF-8"> <title>avalon-activ-hover</title> <script type="text/javascript" src="../avalon.min.js"></script> <script type="text/javascript"> avalon.ready(function () { var model = avalon.define({ $id:"test", color:"red", toggle:true, changeToggle:function () { model.toggle=!model.toggle }, swichColor:function () { model.color = model.color === "red" ? "blue" :"red" } }); avalon.scan(); }) </script> <style> .active{ background: black; color: white; } .ms-class-test{ background: green; width: 300px; height: 100px; border: 1px solid black; } .c-red{ background: red; } .c-blue{ background: blue; } </style></head><body ms-controller="test"> <div ms-active="active">測試：active</div> <div class="ms-class-test" ms-hover="c-{{color}}:toggle"></div> <button ms-click="swichColor">點擊我改變類名</button> <button ms-click="changeToggle">點擊我改變toggle</button></body>

二、表單value屬性操做<input value="active" /> ms-duplex

三、元素固有屬性處理<div id="grid" name="grid"> ms-attr

   
   
   
   
    
    
    
     <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>avalon-attr</title> <script type="text/javascript" src="../avalon.min.js"></script> <script type="text/javascript"> avalon.ready(function(){ avalon.define({ $id:'attr', textModel:"star", t1:true, age:20, r1:true, sex:"男", s1: true, c1: true, path:"http://hotel.qunar.com", id:"a01_chongqing", name:"a01_chongqing", src:"camel.png", title:"avalon is great" }); avalon.scan(); }) </script> </head> <body> <form ms-controller="attr"> <h2>布爾屬性綁定（ms-attr-disabled，ms-attr-readonly）</h2> <label>姓名</label> <input ms-duplex="textModel" ms-attr-disabled="t1"/> <label>年齡</label> <input ms-duplex="age" ms-attr-readonly="r1"/> <label>性別</label> <div> <label><input type="radio" ms-duplex-string="sex" value="男"/>男</label> <label><input type="radio" ms-duplex-string="sex" value="女" />女</label> <br /> <label>工做</label> <select> <option value="IT" ms-attr-selected="s1">IT</option> <option value="銷售">銷售</option> <option value="產品">產品</option> </select> <br /> <label>興趣愛好</label> <label><input type="checkbox" ms-attr-checked="c1" value="option1" />籃球</label> <label><input type="checkbox" ms-attr-checked="c1" value="option2" />足球</label> <label><input type="checkbox" value="option3" />羽毛球</label> <br /> <h2>字符串屬性綁定（ms-attr-id，ms-attr-name，ms-attr-title，ms-src，ms-href，ms-attr-data-url）</h2> <a ms-href="{{path}}">酒店</a> <a ms-attr-id="{{id}}" ms-attr-name="{{name}}" ms-href="{{path}}/city/chongqing_city/">重慶酒店</a> <br /> <img ms-src="{{src}}" ms-attr-title="{{title}}" /> </div> </form>
    
    
    
    </body>

四、元素自定義屬性管理<div data-url="x.html"> ms-hred

五、元素布爾屬性的操做<input readonly="true"> ms-src

來自爲知筆記(Wiz)