avalon2 第一个demo
<!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的更多相关文章
- angular开发者吐槽react+redux的复杂：“一个demo证明你的开发效率低下”
曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...
- 初识nginx之第一个demo
商城项目做了一个多月了,想到必须用到负载均衡,简单了解了一下nginx,首先分享第一个demo,五月份上线后,会继续分享一系列相关知识. 在nginx根目录下,用了一个园友的批处理文件nginx.ba ...
- springMvc的第一个demo
1.下载jar包 http://repo.spring.io/libs-release-local/org/springframework/spring/4.2.3.RELEASE/ 2.下载源码 j ...
- Android 通知栏Notification的整合 全面学习 （一个DEMO让你完全了解它）
在android的应用层中,涉及到很多应用框架,例如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架,通知机制,ActionBar框架等等. ...
- 如何在WTL和MFC中使用duilib及如何静态使用duilib库！（初级讲解 附带一个Demo）
关于duilib的历史,我也就不多说了,能看到这篇文章的人都是有一定了解才能找到这个的. 我直接说下对这个库的基本使用吧. 我个人对一些好技术都是比较感兴趣的. 因为个人原因 喜欢接触一个好技术. 所 ...
- 白盒测试之gtest第一个demo
认识gtest工具后,关于它的使用,下面将用一个demo程序演示一下gtest的用法以及成果展示. 一.需要测试的C++代码: #include "myfunction.h" // ...
- 在VS中实现webService的一个demo（图解）
在VS中实现webService的一个demo(图解) 先创建一个web项目,创建好web项目后,添加新建项——web服务 在新建好的web服务文件中写如下代码: 生成当前解决方案. 新建一个winf ...
- Cocos2d-x 学习（1）—— 通过Cocos Studio创建第一个Demo
近期在工作上有了比較大的转变,自学情绪也慢慢高涨,本来一直在研究unity的技术.由于换了工作会開始接触cocos2d-x.但并不意味着停止研究unity,以后有时间还是会继续的. 公司的cocos2 ...
- 使用android的mediaplayer做成 一个demo,欢迎测试使用
附件是为一个定制视频产品而简单的写了一个demo,用来说明android的mediaplayer是如何使用的. http://files.cnblogs.com/guobaPlayer/palyerD ...
随机推荐
- c++新特性实验(1)预处理
1.参考资料 1.1 C++ C++17 标准文档(正式) : https://www.iso.org/standard/68564.html C++ 标准文档(草案) : ht ...
- webstorm/phpstorm破解版教程网址
http://idea.lanyus.com/ http://www.php.cn/tool/phpstorm/408348.html 如果正版到期了,重新安装不能再次免费试用的话,之后我就用老版的w ...
- Expires
(装载) 简要:添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能,能在后续的页面中有效避免很多不必要的Http请求,WEB服务器使用Expires头来告诉Web客户端它可以使用一个组件 ...
- Laravel访问出错错误信息：`Warning: require(/vendor/autoload.php): failed to open stream: No such file or dire
错误信息:`Warning: require(/http/www.mywakavLee.cn/bootstrap/../vendor/autoload.php): failed to open str ...
- Android平台本地（离线）打包指南 - Android Studio
预备环境 AndroidStudio开发环境,要求安装Android4.0或以上(API 14)SDK. 下载HBuilder离线打包Android版SDK(5+ SDK下载). 离线打包SDK目录说 ...
- 【JZOJ3295】【SDOI2013】泉（spring）
╰(￣▽￣)╭ 济南市"泉历史研究小组"依据济南特有的泉脉关系将济南的泉水分为六个区域,分别是市中区.历下区.天桥区.槐荫区.历城区.长清区. 作为光荣的济南泉历史研究小组中的一员 ...
- 学习JDK1.8集合源码之--Stack
1. Stack简介 Stack是集合中对数据结构栈的一种实现,栈的原则是先进先后出,与队列相反(先进先出).Stack是继承自Vector的,意味着它也是由数组实现的线程安全的,不考虑线程安全的情况 ...
- jsp里更新Clob类型字段数据
ResultSet rs = null; Connection conn = new dbconn().getconnect(); Statement stmt = null; int news=0; ...
- PHPCMS 按点击量排序
{pc:content action="hits" catid="12" num="4" order="views DESC&qu ...
- CNCF 旗下首个为中国开发者量身打造的云原生课程，《CNCF x Alibaba 云原生技术公开课》即将上线
伴随着以 Kubernetes 为代表的云原生技术体系的日益成熟以及 CNCF 生态的逐渐壮大,“云原生”已然成为了未来云计算时代里一个当仁不让的关键词.但是,到底什么是“云原生”?云原生与 CNCF ...