perf/component/组件的VM.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="../../dist/avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: 'test',
                bbb: '其他内容',
                show: function () {
                    console.log('这是页面的事件')
                }
            });
            function heredoc(fn) {
                return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
                        replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
            }
            avalon.component('ms-number', {
                template: heredoc(function () {
                    /*
                     <div>
                     <button type="button"  :on-click="@reduce">--</button>
                     <input readonly :attr="{value:@num}">
                     <button type="button"  :on-click="@add" >++</button>
                     </div>
                     */
                }),
                defaults: {
                    num: 21,
                    reduce: function () {
                        var a = this.num
                        a -= 1;
                        this.num = a < 0 ? 0 : a
                    },
                    add: function () {
                        this.num += 1;
                        console.log(this.$hashcode, 'hash')
                    }
                }
            })

        </script>
    </head>
    <body>
        <h1>组件的VM</h1>
        <p>组件的VM理论上是继承了它上方的所有组件的属性与方法, 
            但本例直接在组件模板上使用defaults中没有声明的方法是一个不好的写法</p>
        <div>template中只允许使用defaults中的变量, slot中可以用上层VM中的变量,但最好都能过ms-widget对象传入</div>
        <div ms-controller="test">
            <xmp is='ms-number' :widget='{show: @show}' ></xmp>
            {{@bbb}}
        </div>
    </body>
</html>