1.按钮的学习
<button type="button" data-loading-icon="mui-spinner mui-spinner-custom" class="mui-btn mui-btn-primary">确认</button>
<script type="text/javascript">
mui(document.body).on('tap', '.mui-btn', function(e) {
mui(this).button('loading');
setTimeout(function() {
mui(this).button('reset');
}.bind(this), 2000);
});
</script>
这段主要是让按钮处于加载中，js中的代码document.body是body中的文件，on是件，tap是单击事件
下面是一个函数 mui(this).button('loading');让按钮处于loading的状态， setTimeout(function() {
mui(this).button('reset');
}.bind(this), 2000);
});设置这个事件reset也就是恢复的时间，是2000毫秒
2.Vue.js
首先建立一个普通项目，然后把Vue.js下载下来，建一个js文件,粘贴进去，重排代码格式就可以啦。
实例一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="vue_det">
<h1>site:{{site}}</h1>
<h1>url:{{url}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#vue_det',
data:{
site:"菜鸟教程",
url:"www.runoob.com",
alexa:"10000"
},
methods:{
details:function(){
return this.site + "-学的不仅是技术，更是梦想";
}
}
})
</script>
</body>
</html>
el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中
data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'<h1>菜鸟教程</h1>'
}
})
</script>
</body>
</html>
v-html是用来输出HTML语言的
3.数据绑定
1. 数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：
2. 使用 v-html 指令用于输出 html 代码：
HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.class1{
background: #444;
color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: true
}
});
</script>
</body>