Avalon學習

時間 2019-11-30

標籤 avalon 學習简体版

原文原文鏈接

1.認識Avalon
Avalon是一個簡單易用的迷你的MVVM框架，做者是博客園的司徒正美，去哪兒、搜狐等等都用這個框架。
沒有任何依賴，兼容性很是好，支持IE6，不到5000行，壓縮後不到50KB。
官網地址：http://avalonjs.github.io/，移動版本是avalon.modern.js。
2.做用域綁定(ms-controller, ms-important)
3.忽略掃描綁定(ms-skip)
4.數據填充(ms-text, ms-html)
5.類名切換(ms-class, ms-hover, ms-active)
6.事件綁定(ms-on)
7.顯示綁定(ms-visible)
8.雙工綁定(ms-duplex)
9.樣式綁定(ms-css)
10.數據綁定(ms-data)用法爲ms-data-name="value", 用於爲元素節點綁定HTML5 data-*屬性。
11.屬性綁定(ms-attr)，1.3.5後，除了ms-src, ms-href，其餘都吞入ms-attr-*
12.循環綁定(ms-repeat)
13.模塊間通訊及屬性監控 $watch，$fire, $unwatch
14.過濾器css

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style> .red{ background-color: red;} .active { background-color: yellow;
        } .hover{ background-color: green;}
    </style>
    <script src="avalon.js"></script>
    <script> avalon.ready(function() { var vm = avalon.define({ $id: "box", //ms-controller做用域ID
 w: 100, //變量
 h: 100, click: function() { vm.w = parseFloat(vm.w) + 10; vm.h = parseFloat(vm.h) + 10; }, b: 100, $skipArray: ["b"], //不想監聽b屬性，能夠直接將此屬性名放到$skipArray數組中
 text: "<b>1111</b>", status: "", callback: function(e) { vm.status = e.type; }, field: "", check: function(e, par) { vm.field = this.value + par; }, isvisible: true, array: "a,b,c,d,e,f,g".split(","), checkboxArrayIds: [1, 3], aaa: "http://www.yxl.com/1", A: "ABCD" }); vm.$watch("w", function(newValue,oldValue) { avalon.log(newValue); avalon.log(oldValue); }); setTimeout(function() { vm.w = 222; }, 5000); avalon.filters.myfilter = function (str, args, args2) {//str爲管道符以前計算獲得的結果，默認框架會幫你傳入，此方法必須返回一個值
                /* 具體邏輯 */ str = str + 1; return str; } avalon.filters.add=function(num2) { return num2+5; } avalon.define({ $id: "ddd", //ms-important做用域若是viewmodel中沒有定義變量不會向上一級查找
 w: 100 //變量
 }); avalon.scan(); }); //下面的這種寫法也能夠
        //avalon.ready(function () {
        // avalon.define("box", function(vm) {
        // vm.w = 100;
        // vm.h = 100;
        // });
        // avalon.scan();
        //});
    </script>
</head>
<body>
    <div ms-controller="box">
        <div style=" background: #a9ea00;" ms-css-width="w" ms-css-height="h" ms-click="click"></div>
        <p>{{ w }} x {{ h }}</p>
        <p ms-skip>{{ w }} x {{ h }}</p>
        <p>W: <input type="text" ms-duplex="w" data-duplex-event="change" /></p>
        <p>H: <input type="text" ms-duplex="h" /></p>
        <p>b: <input type="text" ms-duplex="b" /></p>{{b}} <div ms-important="ddd">
            <p>H: <input type="text" ms-duplex="h" /></p>
        </div>
        <div ms-controller="ddd">
            <p>H: <input type="text" ms-duplex="h" /></p>
        </div>
        <p ms-text="text"></p>
        <p ms-html="text"></p>
        <p ms-class="red" ms-hover="hover" ms-active="active" style="width:100px; height:100px;"></p>
        <p ms-mouseenter="callback" ms-mouseleave="callback">
            <input type="text" ms-on-input="check($event,'我是傳過來的參數')" />{{status}}{{field}} </p>
        <p ms-visible="isvisible">顯示綁定</p>
        <p>
            <ul ms-each-item="array">
                <li ms-click="$remove" ms-if="$index % 2 == 0">{{ item }} --- {{$index}}</li>
            </ul>
        </p>
        <p>
        <p> ms-duplex-number <input ms-duplex-number="checkboxArrayIds" type="checkbox" value="1" />
            <input ms-duplex-number="checkboxArrayIds" type="checkbox" value="2" />
            <input ms-duplex-number="checkboxArrayIds" type="checkbox" value="3" />
            <input ms-duplex-number="checkboxArrayIds" type="checkbox" value="4" /> {{checkboxArrayIds}} </p>
        <p>
            <input type="text" ms-data-relateid="1">
        </p>
        <p>
            <a ms-href="aaa + '.html'">xxxx</a>
            <a ms-href="{{aaa}}.html">xxxx</a>
        </p>
        
        <p>
            <ul>
                <li ms-repeat-item="array">{{ item }} --- {{$index}}</li>
            </ul>
        </p>
        <p>{{A|lowercase}}</p>
        <p>{{ new Date | date("yyyy年MM月dd日 HH:mm:ss")}}</p>
        <p>{{ 1|add }}</p>
    </div>
</body>
</html>

相關標籤/搜索

webpack+avalon+mmstate

electron+avalon+jquery+codemirror

每日一句

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