<!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. R语言可视化二

    Lattice绘图系统 Lattice包: xyplot(散点图)/ bwplot / histrogram(柱状图)/ stripplot / dotplot(点图) 格式:xyplot(y~x | ...

  2. 转：CentOS上安装LAMP之第三步：MySQL环境及安装过程报错解决方案（纯净系统环境）

    这是AMP运行环境中最后配置的环境: 惯例传送门: 1.编译安装MySQL cd /home/zhangatle/tar tar zxvf mysql-.tar.gz cd mysql- cmake ...

  3. Codeforces 300C

    题目链接: http://codeforces.com/contest/300/problem/C 本来是道不难的题目,还是自己的数学功底不扎实. 从该题又一次巩固了关于乘法逆的概念,在剩余系中,如果 ...

  4. perfcurve.m

    function [X,Y,T,auc,optrocpt,subY,subYnames] = ... perfcurve(labels,scores,posClass,varargin) %PERFC ...

  5. 【eclipse】解决：eclipse或STS运行maven工程出现Missing artifact jdk.tools:jdk.tools:jar:1.7问题

    eclipse或STS运行maven工程出现Missing artifact jdk.tools:jdk.tools:jar:1.7问题 最近项目中使用到大数据平台,代码中应用了hbase-clien ...

  6. The method getTextContent() is undefined ?

    晚上下班的时候,把班上写了半截的代码带了回来.结果回到家后出乎意料的是回来的时候将代码导入eclipse后,下面这行代码就直接报错了,显示 getTextContent()未定义 . ((Elemen ...

  7. Katalon系列二十一：用例中语句失败处理

    假如有一个用例:1.登陆2.下单3.对历史单评价4.退出 情况一:当第1步执行失败时,我们希望用例不再执行,因为再执行也没有意义了,反而浪费时间:情况二:当第2步执行失败时,我们希望能略过第2步操作, ...

  8. React项目动态设置title标题

    在React搭建的SPA项目中页面的title是直接写在入口index.html中,当路由在切换不用页面时,title是不会动态变化的.那么怎么让title随着路由的切换动态变化呢?1.在定义路由时增 ...

  9. ubuntu下C操作Mysql数据库第一步

    学习于: http://armsword.com/2013/06/20/ubuntu-c-mysql.html

  10. 通过IP地址訪问Jbossserver上的应用

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/liu765023051/article/details/28882533 环境介绍 Web项目中.在 ...