avalon2 first demo

<! DOCTYPE HTML > 

< HTML > 
    < head > 
        < title > the TODO Supply A title </ title > 
        < Meta charset = "UTF-. 8" > 
        < Meta name = "the viewport" Content = "Device-width = width, initial- = 1.0 Scale " > 

    </ head > 
    < body MS-Controller = 'Test' > 
        < h1 of > used soleSlot, it will generate a replacement component container assembly slot element the innerHTML </ h1 of > 
        <div  >
            <xmp :widget="{is:'ms-button'}" :click="@ddd" :attr="{title:@bb}">{{@bb}}</xmp>
            {{aaaa}}
            <p><button :click="@click">click</button></p>

        </div>

        {{name}}

        <script src="lib/jquery-1.8.3.min.js"></script>
        <script src="lib/avalon.js"></script>
        <script src="js/test.js"></script>
    </body>
</html>
var vm;

function initVm() {
    avalon.component('ms-button', {
        template: '<button type="button"><span><slot /></span></button>',
        defaults: {
            buttonText: "button"
        },
        soleSlot: 'buttonText'
    })
    avalon.ready(function() {
        vm = avalon.define({
            $id: 'test',
            aaa: {
                buttonText: "vm中的值"
            },
            bb:,'Dynamic content'
            AAAA: 'dynamic content 1' , 
            name: 'lslsl' , 
            ddd: function () { 
                the console.log ( 'XXXX' ) 
            }, 
            the Click: function () { 
                vm.bb = 'update' + ( new new a Date - 0 ) 
            } 
        }) 
        avalon.scan (the document.body); 
    }); 
} 
$ ( function () { 
    initVm (); 
});

 

Guess you like

Origin www.cnblogs.com/lishupeng/p/11116199.html