<!DOCTYPE html>

<html>

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>

    <body ms-controller='test'>

        <h1>soleSlot的使用, 它会组件容器中innerHTML替换生成组件的slot元素</h1>

        <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: '动态内容',

            aaaa: '动态内1容',

            name: 'lslsl',

            ddd: function() {

                console.log('xxxx')

            },

            click: function() {

                vm.bb = '更新内容' + (new Date - 0)

            }

        })

        avalon.scan(document.body);

    });

}

$(function() {

    initVm();

});

avalon2 第一个demo的更多相关文章

  1. angular开发者吐槽react+redux的复杂：“一个demo证明你的开发效率低下”

    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...

  2. 初识nginx之第一个demo

    商城项目做了一个多月了,想到必须用到负载均衡,简单了解了一下nginx,首先分享第一个demo,五月份上线后,会继续分享一系列相关知识. 在nginx根目录下,用了一个园友的批处理文件nginx.ba ...

  3. springMvc的第一个demo

    1.下载jar包 http://repo.spring.io/libs-release-local/org/springframework/spring/4.2.3.RELEASE/ 2.下载源码 j ...

  4. Android 通知栏Notification的整合 全面学习 （一个DEMO让你完全了解它）

    在android的应用层中,涉及到很多应用框架,例如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架,通知机制,ActionBar框架等等. ...

  5. 如何在WTL和MFC中使用duilib及如何静态使用duilib库！（初级讲解 附带一个Demo）

    关于duilib的历史,我也就不多说了,能看到这篇文章的人都是有一定了解才能找到这个的. 我直接说下对这个库的基本使用吧. 我个人对一些好技术都是比较感兴趣的. 因为个人原因 喜欢接触一个好技术. 所 ...

  6. 白盒测试之gtest第一个demo

    认识gtest工具后,关于它的使用,下面将用一个demo程序演示一下gtest的用法以及成果展示. 一.需要测试的C++代码: #include "myfunction.h" // ...

  7. 在VS中实现webService的一个demo（图解）

    在VS中实现webService的一个demo(图解) 先创建一个web项目,创建好web项目后,添加新建项——web服务 在新建好的web服务文件中写如下代码: 生成当前解决方案. 新建一个winf ...

  8. Cocos2d-x 学习（1）—— 通过Cocos Studio创建第一个Demo

    近期在工作上有了比較大的转变,自学情绪也慢慢高涨,本来一直在研究unity的技术.由于换了工作会開始接触cocos2d-x.但并不意味着停止研究unity,以后有时间还是会继续的. 公司的cocos2 ...

  9. 使用android的mediaplayer做成 一个demo,欢迎测试使用

    附件是为一个定制视频产品而简单的写了一个demo,用来说明android的mediaplayer是如何使用的. http://files.cnblogs.com/guobaPlayer/palyerD ...

随机推荐

  1. ubuntu16.04上在使用搜狗输入法时，按shift不能正常切换中英文

    问题描述: ubuntu16.04上在使用搜狗输入法时,不知道把什么组合键给错按了,导致了按shift不能正常切换中英文,这是一件很烦恼的事儿! 解决步骤: 1,终端输入打开: fcitx-confi ...

  2. deque简单解析

    deque是支持双端插入删除的容器,oi中用来维护单调队列 声明方式 deque<int> d1;//声明一个叫d1的双向队列 deque<int> d2(d1);//声明一个 ...

  3. PHP配置环境中开启GD库

    下配置好的PHP环境中,GD库不像windows那样可以直接用,而是默认关闭,需要把它打开,去到php.ini文件中 找到php_gd2.dll把分号去掉即可.(注:GD库跟绘制二维码等有关)

  4. Wndows下Apache+php+Mysql环境的搭建及其涉及的知识

    一.安装Apache 1. 在网上搜索以下3个文件,以及找一个地方新建一个文件夹 好吧,这里有下载链接:http://pan.baidu.com/s/1hr9IdSS 文件夹内有:apache,mys ...

  5. CSS-画三角

    要实现三角的效果有很多方法: 例如下面的页面就需要三角: 其中, <!DOCTYPE html> <html lang="en"> <head> ...

  6. 【51nod1563】坐标轴上的最大团 贪心

    题面 坐标轴上有n个点,每个点有一个权值.第i个点的坐标是 xi ,权值是 wi .现在对这些点建图.对于点对 (i,j) ,如果 \(|xi−xj|≥wi+wj\) ,那么就给第i个点和第j个点之间 ...

  7. Effective Modern C++：08调整

    41:针对可复制的形参,在移动成本低且一定会被复制的前提下,考虑将其按值传递 class Widget { public: void addName(const std::string& ne ...

  8. QT中，控件显示不下，用...表示

    void CommonHelper::setQLabelText(QLabel *label, const QString &text) { QFontMetrics cs(label-> ...

  9. HTML5环形音乐播放器

    在线演示 本地下载

  10. VIM中空格和TAB的替换

    在.vimrc中添加以下代码后,重启vim即可实现按TAB产生4个空格:set ts=4  (注:ts是tabstop的缩写,设TAB宽4个空格)set expandtab 对于已保存的文件,可以使用 ...