<!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. Django项目：CRM(客户关系管理系统)--09--04PerfectCRM实现King_admin注册功能01

  2. caffe 的docker安装过程及相关linux操作总结

    一.caffe 和 docker的安装编译 docker pull caffe镜像(注意使用docker安装省去安装CUDA和cudnn的安装.) 安装相关依赖包 安装opencv3(使用源码安装) ...

  3. 属性中id和name的区别

    id 在HTML中的作用:      1.用id选择相应的style sheet(风格).       2. <A ..> 链接的目的地      3.脚本语言用它找目的地(找该id的标签 ...

  4. C# 配置文件 Appconfig

    WinForm或WPF应用程序有时候需要保存用户的一些配置就要用到配置文件,而微软为我们的应用程序提供了Application Configuration File,就是应用程序配置文件,可以很方便的 ...

  5. 从0开始学习 GitHub 系列之「02.加入 GitHub」

    转载地址: http://blog.csdn.net/googdev/article/details/52787586 看完昨天的文章「从0开始学习 GitHub 系列之「初识 GitHub」」估计不 ...

  6. iView3.x Anchor(锚点)组件 导航锚点

    iView3.x Anchor(锚点)组件 导航锚点 iview 3.x框架中新添了一个Anchor(锚点组件),用这个组件去做页面的分类导航正好合适,但是苦于官方文档太过抽象研究了一整天,才勉强可以 ...

  7. word之图表目录中点号位置提升3磅

  8. Hello World 之Spring Boot 调用图数据库Neo4j

    明日歌 [清]钱鹤滩 明日复明日,明日何其多! 我生待明日,万事成蹉跎 1. 图数据库Neo4j之爱的初体验 ----与君初相识,犹似故人归 在如今大数据(big data)横行的时代,传统的关系型数 ...

  9. 草地排水 改了又改（DCOJ6013）

    题目描述 在农夫约翰的农场上,每逢下雨,贝茜最喜欢的三叶草地就积聚了一潭水．这意味着草地被水淹没了,并且小草要继续生长还要花相当长一段时间．因此,农夫约翰修建了一套排水系统来使贝茜的草地免除被大水淹没 ...

  10. 【Django入坑之路】Form组件

    1:From组件的简单使用 1创建From: #导入模块 from django import forms from django.forms import fields, widgets # 导入自 ...