avalon 筆記---Mr.wing

時間  2019-11-13
標籤 avalon 筆記 mr.wing wing 简体版
原文   原文鏈接

Avalon筆記
步驟一：
引用js文件<script src="js/avalon.js"></script>
步驟二：
<script>
var vm = avalon.define({
$id: "wing",//用於綁定avalon的做用域
各類數據及方法...
});
avalon.scan();//可不加，avalon有本身的DOMReady模塊，會自動掃描全文
</script>
步驟三：
<body>
<div ms-controller="wing">
。。。
</div>
</body>php

雙向綁定
把vm裏的數據綁定到某元素的value中，例如<input>,須要用ms-duplex=」**」標籤。
把vm裏的數據綁定到普通文本中，例如<p>、<i>、<b>、<a>，就用{{**}}
僅顯示不修改：
ms-text:會直接將內容輸出不加處理
ms-html:會將內容的html標籤轉化後再顯示。
ms-value:有點像value。
P.S. ms-value能夠這樣寫哦： ms-value="000{{text+'ddd'}}uuu"
ms-repeat: 用於循環輸入某數據的值。
Js:
var vm = avalon.define({
$id: "wing",
name:"",
password:"123",
content:"<b>123</b>",
text:"13"
});css

Html:
<div ms-controller="wing" class="ms-controller">
<input ms-duplex="name">//文本框的雙向綁定
<p>Hello,{{name}}!</p>//普通文本的雙向綁定
<p ms-text="content"></p>//
<p ms-html="content"></p>
<input ms-value="text">
<textarea ms-value="000{{text+'ddd'}}uuu"></textarea>
</div>html

調用別的avalon數據
在上面的基礎上多添加一個avalon做用域
Js：
var aa=avalon.define({
$id:"123",
iId:"1414",
iPassword:vm.password//獲取第一個model的password的值
});
Html：
<div ms-controller=」wing」>...</div>
<div ms-controller="123">
<i>{{iId}}_______{{iPassword}}</i>
</div>java

ms-controller會向上查找父元素的屬性
var vm = avalon.define({
$id: "a",
name: "wing",
hobby: "喝奶茶"
});
var vv = avalon.define({
$id: "b",
name: "gg"
});
var vn = avalon.define({
$id: "c",
name: "fff",
hobby: "祝願天下的情侶都是失散多年的兄妹"
});apache


<div ms-controller="a">
<h1>{{name}} 喜歡 {{hobby}}</h1>
<div ms-controller="b">
<h3>{{name}} 喜歡 {{hobby}}</h3>//b沒有hobby這個屬性，因此它會調用a的hobby
<div>
<div>
ms-important不會向上查找
<div ms-controller="a">
<h1>{{name}} 喜歡 {{hobby}}</h1>
<div ms-important="b">
<h3>{{name}} 喜歡 {{hobby}}</h3>//結果：gg 喜歡{{hobby}}
<div>
<div>
ms-skip任何綁定屬性的指令都會失效
<div ms-skip="c"><!--ms-skip任何綁定屬性的指令都會失效-->
<h6>{{name}} 喜歡 {{color}}</h6> <!--結果：{{name}} 喜歡 {{color}}-->
</div>數組

跟表單有關的標籤及常見用法瀏覽器

複選框Checkbox：
1.獲取複選框的值：
在avalon中定義一個空數據存放複選框中被選中的值
var vm=avalon.define({
$id:"test",
T1:true,
hobbies:[]//《--------------------------說的就是你
});
經過ms-duplex綁定，
<div ms-controller="test">
<input type="checkbox" value="milktea" ms-duplex="hobbies">奶茶
<input type="checkbox" value="TVseries" ms-duplex="hobbies">煲劇
<input type="checkbox" value="reading" ms-duplex="hobbies">看書
<div ms-if="hobbies.size()>0">hobbies:{{hobbies}}</div>
<button onclick="alert(vm.hobbies)">點我！！</button>
</div>
當選中選項的時候，hobbies中會push選中的value。
點擊按鈕能夠彈出hobbies的值，p.s必定要寫成vm.hobbies哦緩存

2.默認選中複選框的值：ms-attr-checked
<div ms-controller="test">
<input type="checkbox" value="milktea" ms-attr-checked="T1">奶茶
<input type="checkbox" value="TVseries" ms-attr-checked="T1">煲劇
<input type="checkbox" value="reading">看書
</div>app

P.s ms-attr-checked與ms-duplex不兼容dom

單選框radio
在avalon中定義單選框的默認選中選項。Gender爲性別的默認選項，onlinePayment爲在線支付的默認選項。
var vm = avalon.define({
$id: "test",
gender: "female",
onlinePayment: false
});
經過ms-duplex-string和ms-duplex-boolean標籤綁定。
根據value的值與ms-duplex-text（boolean）的值，若是相同則選中。
P.s二者的區別是：ms-duplex-boolean只能存放Boolean類型。
ms-duplex-number還有一個這個哦
<div ms-controller="test">
<input type="radio" ms-duplex-text="gender" name="sex" value="male">男
<input type="radio" ms-duplex-text="gender" name="sex" value="female">女
<p>{{gender}}</p>
是否在線支付？
<input type="radio" name="op" value="true" ms-duplex-boolean="onlinePayment">是
<input type="radio" name="op" value="false" ms-duplex-boolean="onlinePayment">否
<p>{{onlinePayment}}</p>
</div>

下拉列表
ms-attr-select存放boolean類型的值，若爲true則默認選中
var a=avalon.define({
$id:"test",
t1:true,
});
默認選中「搬磚」
<select >
<option value="IT">IT</option>
<option value="搬磚" ms-attr-selected="t1">搬磚</option>
<option value="打雜">打雜</option>
</select>
默認選中並獲取選中的值
方法（1）Avalon
i:"333"
Html
<select ms-duplex="i">
<option>111</option>
<option>222</option>
<option>333</option>
</select>
{{i}}<!-- 默認選中「333」 修改選項可獲取其餘的值-->
（2）Avalon
i:"b"
Html
<select ms-duplex="i">
<option value="a">111</option>
<option value="b">222</option>
<option value="c">333</option>
</select>
{{i}}
Boolean值的
f:false

<select ms-duplex-boolean="f">
<option>false</option>
<option>true</option>
</select>
{{f}}

selectList: [{value: "ENABLE", text: "正式運營"},
{value: "INACTIVE", text: "準備運營"}],


<select ms-duplex="addBranchStore.status" class="form-control">
<option ms-repeat="addBranchStore.selectList" ms-attr-value="el.value">{{el.text}}
</option>
</select>


ms-attr-disabled：效果跟disable相似disabled 屬性規定應該禁用 input 元素。
被禁用的 input 元素既不可用，也不可點擊。
ms-attr-readonly：只讀
avalog
t1:true
Html
<input type="text" ms-duplex="text1" ms-attr-disabled="t1" >
<input type="text" ms-duplex="age" ms-attr-readonly="t2">
數組


輸出數組
var data = avalon.define({
$id: "array",
wing: "wing",
array: ["1", "2", "3", "4", "5"],
array2: [[1, 2], [3, 4], [5, 6, 7]],
array3: [{name: 111}, {name: 222}, {name: 3}]
});
Html
<h1>{{array}}</h1>
<ol>
<li ms-repeat="array">
{{el}},{{$index}},{{$first}},{{$last}}</li>
</ol>
<table width="50%" border="1">
<tr ms-repeat-item="array2">
<td ms-repeat="item">{{$outer.$index}} .{{$index}} .{{el}}</td>
<!-- 輸出二維數組-->
</tr>
</table>
<ul>
<li ms-repeat="array3">{{$index}}--------{{el.name}}</li>
</ul>

效果：

 


$outer 的用法：
例如：
Data:{ "code": "CEO_DEP", "name": "總經理辦公室", "type": "Department", "parentGroupCode": "CSZ001", "usernameList": [ "Rocbin", "Joy" ] }
<tr ms-repeat="groupList" data-repeat-rendered="initTreeGrid"
ms-class-1="treegrid-{{$index+1}}"
ms-class-2="treegrid-parent-{{el.parentIndex}}:el.parentIndex>0">
<td>{{el.name}}</td>
<td>
<ul class="clearFloat">
<li ms-repeat="el.usernameList">
<img ms-attr-src="${ctx}/user/avatar.do?username={{el}}&size=small" ms-attr-alt="el" ms-attr-title="el"
class="img-circle">
<i class="fa fa-times-circle-o" ms-visible="deleteMemberIndex==$outer.$index" ms-click="deleteThisMember($outer.el.name,$outer.el.code,el)" aria-hidden="true"></i>
</li>
</ul>
</td>
</tr>
$outer.el.name就能夠在usernameList裏獲取name的值啦

利用ms-repeat及{{el}}能夠循環輸出數組。
Array3中的name能夠換，但必定要同樣，經過{{el.name}}循環引用數組裏的值。
也能夠用ms-each來實現，不過ms-each是寫在ul上的。
$remove的用法：ms-click=」$remove」，只能移除數組元素

remove: function (item) {
subbranch.subbranchList.remove(item);
event.stopPropagation();
}


自動添加數組的組
var data = avalon.define({
$id: "array",
array3: [{a: 111}, {a: 222}, {a: 3}]
});
var b = data.array3;
var time = setInterval(function () {
b.push({a: Math.random().toString().substr(4, 10)});
if (b.length > 10) {
b.shift();
}
}, 1000);
Html
<ul>
<li ms-repeat="array3">{{$index}}--------{{el.a}}</li>
</ul>
<button onclick="javasript:clearInterval(time);">中止更新</button>


數組的更新
/*數組數據-簡單值的更新*/
Avalon
array: ["a", "b", "c", "d"],
Js
function newarray(){
vm.array.set(0,"23")
}
Html
<ul ms-each="array">
<li>{{$index}}...{{el}}</li>
</ul>
<button ms-click="newarray">修改數組</button>

/*數組數據-對象值的更新*/
Avalon
array2: [
{text: "e"},
{text: "f"},
{text: "g"}
]
Js
function newArray2(){
vm.array2[0].text="1230";<!--test與array2的鍵對應-->

}
Html
<ul ms-with="array2">
<li>{{$index}} . {{el.text}}</li>
</ul>
<button ms-click="newArray2">修改數組2</button>

對象object

var model=avalon.define({
$id:"test",
object:{
grape:"葡萄",
coconut:"椰子",
apple:"蘋果",
orange:"橙子"
},
num:{
a:"132",
b:"123",
c:"213"
}
});
Html
<div ms-controller="test">
<ul>
<li ms-repeat="object">{{$key}}----------{{$val}}</li>
<li ms-repeat="num">{{$key}}----------{{$val}}</li>
</ul>
</div>

P.s可使用ms-with實現，不過ms-with是寫在ul上的。

自定義索引值：
var index1=0;
var model=avalon.define({
$id:"test",
object:{
grape:"葡萄",
coconut:"椰子",
apple:"蘋果",
orange:"橙子"
},
getIndex:function(){
return index1++;
}
});
Html
<div ms-controller="test">
<ul ms-with="object">
<li>{{getIndex()}}{{$key}}____{{$val}}</li>
</ul>
<ul>
<li ms-repeat="object">
{{getIndex()}}{{$val}}
</li>
</ul>
</div>

P.s若是將index放在avalon裏定義，index的初始值不爲0；

對象的更新
對象數據-鍵值的更新
Avalon
data: {
aaa: 1111,
bbb: 2222,
ccc: 3333
},
Js
/*對象數據-鍵值的更新*/
setTimeout(function(){
vm.data.aaa=444;
alert(vm.data.aaa);
},2000);
/*對象數據-鍵值對的更新*/
setTimeout(function(){
vm.data={
ccc:888,
ddd:999,
ggg:999
}
},4000);
Html
<ul>
<li ms-repeat="data">{{$key}}--->{{$val}}</li>
</ul>
P.s 用第一種方法更新數據，數據是修改了，但是頁面沒法自動更新數據。

雜七雜八的屬性
ms-href
在avalog裏的定義一個地址屬性
path:"https://www.baidu.com"
在頁面上：
<a ms-href="{{path}}">百度</a>
<a ms-href="{{path}}/index.php?tn=98012088_3_dg&ch=3">wingwing先生</a>

ms-arrt-id
定義元素的id
Avalon：
id:"name1",
Html：
<p ms-attr-id="{{id}}">wingwing先生</p>
<p ms-attr-id="is-{{$index}}">wingwing先生</p> //id爲「is-0」(假如這個p標籤是ms-repeat
輸出的元素中第一個元素的話。)
另外一種寫法：
ms-attr-id="'employee-' + $index"

ms-attr-name
元素的name屬性
Avalon：
attrName:"123",
Html:
<a ms-href="{{path}}" ms-attr-name="{{attrName}}">百度</a>

ms-src
ms-attr-title
元素的src和title屬性
Avalon:
src:"img/132.jpg",
title:"title123"
Html:
<img ms-src="{{src}}" ms-attr-title="{{title}}">

ms-visible 隱藏與顯示 經過display控制。
ms-if 經過用dom節點移除與添加控制的.
由於ms-if會先於ms-reaper執行，因此avalon又提供了一個方法，ms-if-loop
兩個屬性都輸傳入boolean值
Avalon：
var vm=avalon.define({
$id:"test",
a:""
});
setTimeout(function(){
vm.a="13";
},3000);
setTimeout(function(){
vm.a="";
},6000);
Html
<div ms-controller="test">
{{a!=''}}<!--顯示true或false -->
<p ms-visible="a!=''">ms-visible顯示and隱藏</p><!--經過display來控制的-->
<p ms-if="a!=''">ms-if顯示and隱藏</p><!--經過用dom節點移除與添加來控制的-->
</div>

ms-data-* 數據緩存，用於將數據保存到某元素節點上
var vm=avalon.define({
$id:"test",
name:"wing",
num:123456,
password:NAN,
data:new Date,
$object:{
1:123,
2:456,
3:789
},/*不添加$的話，avalon會自動添加不少東東進去。。。*/
$array:[1,2,3],
show:function(){
var elem=avalon(this);
console.log(
elem.data("n"),elem.data("num"),
elem.data("pw"),this["data-object"],
this["data-array"],this["data-data"]
);
}
});
Html
<body ms-controller="test">
<div ms-data-n="name"
ms-data-num="num"
ms-data-pw="password"
ms-data-data="data"
ms-data-object="$object"
ms-data-array="$array"
ms-data-fn="show"
ms-click="show"
>click</div>
</body>
P.s ms-data-*的*不須要與avalon定義的屬性名一致，而ms-data-*=「xx」中xx須要與avalon
定義的屬性名一致。
array、object、data會綁定到元素上而不是經過屬性來綁定。因此獲取它們的方式會有些不一樣，詳情看show().

ms-class

P.s.在第四種方式中，若1+1能轉換成boolean值的true，則添加red這個樣式，不然移除這個樣式。
在最後一種方式中，「:true」只能放在最後，不然不起做用。

如何在屬性值裏及輸出變量的值又輸出字符串？

或

效果圖：

 

 

ms-hover鼠標滑過期改變類名，ms-active鼠標點擊時改變的類名
var vm=avalon.define({
$id:"test",
bool:true,
color:"black",
noClass:function(){
vm.bool=!vm.bool;
},
switchClass:function(){
vm.color=(vm.color=="black")?"grey":"black";
}
});
Html
<div ms-controller="test">
<p ms-hover="active">划過去！！</p>
<p ms-active="active">點點點！！</p>
<p ms-class="active:bool">點擊按鈕 決定這個p要不要樣式</p>
<button ms-click="noClass">switchClass</button>
<br>
<p ms-class="p-{{color}}:bool">點擊按鈕，決定樣式是哪一個</p>
<button ms-click="switchClass">switchClass</button>
</div>

ms-css-*

Avalon
var vm = avalon.define({
$id: "test",
background: "yellow",
width: 100,
height: 100,
click: function () {
vm.width = vm.width + 10;
vm.height = vm.height + 10;
}
});
Html
<div ms-css-width="width" ms-css-height="height" ms-css-background="background" ms-click="click"></div>
<select ms-duplex="background">
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="blue">blue</option>
</select>

<p>{{background}}</p>

<p>width:<input ms-duplex-number="width"></p>

<p>height:<input ms-duplex-number="height"></p>
例子中可經過下拉列表改變div的背景顏色，點擊div。Div的高度和寬度都會增長10px

ms-dulex-*

 


事件
使用avalon提供的事情類型的優點是，avalon兼容不一樣的瀏覽器，一些本來不兼容這個事件的瀏覽器，如今也可使用這些事件。

若綁定的元素包含子元素，mouseover/mouseout會觸發屢次，mouseenter/mouseleave只會觸發一次.
與 mouseover 事件不一樣，只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。若是鼠標指針穿過任何子元素，一樣會觸發 mouseover 事件。
點擊事件：ms-click

例子：選項卡
var vm = avalon.define({
$id: "test",
isShow: false,
countIndex:1,
toggle:function(index){
vm.countIndex=index;
}
});
Html
<body ms-controller="test">
<button ms-click="toggle(1)">紅</button>
<button ms-click="toggle(2)">黃</button>
<button ms-click="toggle(3)">橙</button>
<div class="d1" ms-visible="countIndex==1"></div>
<div class="d2" ms-visible="countIndex==2"></div>
<div class="d3" ms-visible="countIndex==3"></div>
</body>
Style
div {
width: 200px;
height: 50px;
}
.d1 {
background-color: red;
}
.d2 {
background-color: yellow;
}
.d3 {
background-color: orange;
}
點擊按鈕經過綁定的toggle(index)傳值到vm,改變countIndex的值，從而使div顯示或隱藏。

data-duplex-changed：當內容改變是觸發事件
string:"",
a:function(){
alert("onchange");
},
Html：
<input ms-duplex="string" data-duplex-changed="a">

ms-on-input：表單輸入值的時候觸發的事件
例子：獲取元素的值。
Avalon
inputValue:"",
input:function(e){
vm.inputValue=this.value+"___________"+ e.type;
},
p_innerHtml:"",
click:function(){
vm.p_innerHtml=this.innerText;
}
P.S. This.value獲取節點的value值，同理this.innerText\this.innerHtml
Html
<input ms-on-input="input">{{inputValue}}
<p ms-click="click">13132023</p>{{p_innerHtml}}
效果

多個參數的方法
f_value:"132",
click2:function(e,a,f){
alert(e.type+"___"+a+"___"+f);
}
Html
<p ms-click="click2($event,1,f_value)">多參函數</p>
參數能夠直接傳vm裏的值，若要傳事件對象則要在event前加一個「$」符號。

ms-each-el循環輸入
array:[11,22,33],
arrayClick:function(e,a){
alert(e.type+"...."+a);
}
Html
<div ms-each-el="array">
<p ms-click="arrayClick($event,el)">{{el}}</p>
</div>

$model獲取avalon定義的全部屬性，除方法外
submit:function(){
var data=vm.$model;
alert(JSON.stringify(data));
}
P.s $model是vm的淨化版，獲取vm裏不是以」$」符號開頭的屬性，用JSON.stringify
將vm裏面全部的function過濾掉。
Html
<button ms-click="submit">click</button>

 


一個節點執行多個方法
var vm=avalon.define({
$id:"test",
click1:function(){
alert(11111111);
},
click2:function(){
alert(222222);
},
click3:function(){
alert(333);
}
});
Html
<div ms-controller="test">
<div ms-click="click3" ms-click-1="click2" ms-click-2="click1">點我</div>
</div>
方法的執行順序是:經過ms-click後面跟着的數字大小決定的，從小到大按順序執行。

回調函數


.trim() 對字符串起始和結尾的空格都被刪除了。
用法：this.value.trim()

屬性監聽
$watch 檢測avalon中非$開頭的屬性。


var vm=avalon.define({
$id:"test",
aaa:"2",
bbb:123,
$ccc:"2",
// $skipArray:["aaa"],/*放在「$skipArray*數組裏面的元素都不會被avalon檢測到*/
ddd:{
eee:{
fff:999
}
},
z:[11,22],
click:function(a){
vm[a]=new Date-0;
},
click1:function(){
vm.ddd.eee.fff=new Date-0;
},
push:function(){
vm.z.push(new Date-0);
}
});
/*方法一*/
/* vm.$watch("aaa",function(a,b){/!*a是新值，b是舊值*!/
console.log("aaa",a,b);
});
vm.$watch("$ccc",function(a,b){/!*a是新值，b是舊值*!/
console.log("$ccc",a,b);
})*/
/*方法二*/
var fu=function(){
console.log(vm.aaa,vm.bbb);
};
vm.$watch("aaa",fu);
vm.$watch("bbb",fu);
/*用於對象的*/
vm.$watch("ddd.eee.fff",function(v){
avalon.log(v);
});
/*用於數組*/
vm.$watch("z.length",function(a,b){
console.log(a,b);
})
Html
<div ms-click="click('aaa')" ms-hover="a">{{aaa}}</div>
<div ms-click="click('bbb')" ms-hover="a">{{bbb}}</div>
<div ms-click="click('$ccc')" ms-hover="a">{{$ccc}}</div>
<div ms-click="click1()" ms-hover="a">{{ddd.eee.fff}}</div>
<p>{{z}}</p>
<button ms-click="push()">點我</button>
$watch必定要跟在vm.（即建立avalon的名字）後面。不然會報錯

$unwatch


$fire

引用別的頁面（須要在apache上纔能有效果）
在outsideModel.html上
<title>引用外部模板</title>
<script src="js/avalon.js"></script>
<script>
var vm=avalon.define({
$id:"test",
url:"_page1",
name:"wing",
age:18,
eee:"lll",
add:function(e){
if(this.value.trim() && e.which==13){
var a=this.value;
vm.myArray.push(a);
this.value="";
}
}
});
</script>
</head>
<body ms-controller="test">
<select ms-duplex="url">
<option>_page1</option>
<option>_page2</option>
</select>
<div ms-include-src="outsideModel{{url}}.html"></div>
</body>
在outsideModel_page1.html及outsideModel_page2.html上就不須要引用avalon.js也不須要建立avalon對象。

outsideModel_page1.html
<h1>登陸頁面</h1>
<p><input ms-duplex="name">{{name}}</p>
<p><input ms-duplex="age">{{age}}</p>

outsideModel_page2.html
<h2>第二頁</h2>
<ul ms-each="myArray">
<li>{{$index +1}}. {{el}}<span ms-click="$remove">X</span></li>
</ul>
<p>添加新元素：<input ms-keypress="add"></p>
效果就是不用刷新頁面均可以在指點的區域引用和更換新的頁面。

Remove的用法：
removeRoleDepartmentAllowConfig: function (item) {/*「目標」移除行*/
vm.showArray.remove(item);
event.stopPropagation();
},

過濾器
日期：
{{el.createDate|date('yyyy-MM-dd HH:mm:ss')}}
格式形式能夠變化，「HH」表示24進制，「hh」表示12進制，能夠省略個別內容
在js裏
"生日："+avalon.filters.date(avatar.birthday,'yyyy-MM-dd')+"</br>"
P.s：avatar.birthday是要格式化的值。

金額：{{el.lastPrice|number(2,'.',",")}}例如2,000.00{{el.money|number(2,」.」)}}20.00

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程