<!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. javascript控件开发之滚动条控件

    首先,基于行前几篇开发的的框架,我们在目录 component\ui\下添加文件 com.ui.scrollBar.js, 在文件中定义com.ui.scrollBar类,继承com.ui.windo ...

  2. 【Python之路22】冒泡排序算法

    1.变量互换 a = 123 b = 456 temp = a a = b b = temp python比较简单的变量互换: a = 123 b = 456 a,b = b,a print(a,b) ...

  3. Python之collection

    1.计数器(counter) Counter是对字典类型的补充,用于追踪值的出现次数. ps:具备字典的所有功能 + 自己的功能 c = Counter('abcdeabcdabcaba') prin ...

  4. golang数据类型三

  5. 【JZOJ4793】【GDOI2017模拟9.21】妮厨的愤怒

    题目描述 栋栋和标标都是厨力++的妮厨.俗话说"一机房不容二厨",他们两个都加入了某OI( )交流♂( )群,在钦定老婆的时候出现了偏差,于是闹得不可开交.可是栋栋是群内的长者,斗 ...

  6. MAC+VS Code+Python+Markdown调试配置

    目录 VS Code官网下载 VS Code插件推荐 VS Code Python环境配置 Markdown配置 VS Code官方文档 VS Code官网下载 VS Code官网下载地址 VS Co ...

  7. docker 常用的命令

    1.运行容器 sudo docker run -d -t -p : --name demo ubuntu:16.04 2.删除容器 sudo docker rm -f demo 3.在容器中安装必备软 ...

  8. Leetcode784.Letter Case Permutation字母大小写全排列

    给定一个字符串S,通过将字符串S中的每个字母转变大小写,我们可以获得一个新的字符串.返回所有可能得到的字符串集合. 示例: 输入: S = "a1b2" 输出: ["a1 ...

  9. 初探postman

    第一种:安装postman 扩展程序 第二种:本地 安装postman 登陆进来postman的界面 发送第一个postman请求 将请求保存到集合 未完,待续...

  10. PHPCMS快速建站系列之标签循环嵌套

    标签循环嵌套方法,可以实现对PC标签循环调用,代码如下: 在此文件里/phpcms/lib/classes/template_cache.class.php 里的 template_parse 方法里 ...