组件使用
<!doctype html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>vue-demo</title>
<script type="text/javascript" src='./vue.min.js'></script>
<style>
.big{
font-size: 26px;
}
</style>
</head>
<body>
<div id="temp-div">
<!-- 这个demo标签是一个自定义函数 -->
<demo :data='users'></demo>
<!-- 这里四:data就是user -->
</div>
<!-- 看好这个script是个模板函数 type不是javascript而是 type="text/x-template" -->
<script type="text/x-template" id="div-template">
<ul>
<li v-for='item in data'>
<p >时间 {{item.time|time}}</p>
<p >名称 {{item.name}}</p>
<p >钱 <em class="big">{{(item.mony-0).toFixed(2).split('.')[0]}}</em> <em>{{(item.mony-0).toFixed(2).split('.')[1]}}</em></p>
</li>
</ul>
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</script>
<script>
/*先创建一个组件,*/
Vue.component('demo', {
template:'#div-template',
replace:true,
props:{
data: Array
},
filters:{
time:function (val) {
var t=new Date(val);
//return t.getFullYear()+"年"+(t.getMonth()+1)+"月"+t.getDate()+'日';//这个是2016年11月23日
return t.toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ").split(' ')[0];//这个是2016/11/23
}
}
});
var vm=new Vue({
el:'#temp-div',
data:{
users:[],//可以先声明出来,
message: 'You loaded this page on ' + new Date()
}
});
/*这里是模仿请求数据,我是写的延时赋值*/
setTimeout(function(){
/*赋值数据给vm.users即可,请求成功后赋值*/
vm.users=[
{time:1479910466000,name:'张三',mony:'1.21'},
{time:1479910466000,name:'李四',mony:'1.1'},
{time:1479910466000,name:'王五',mony:'100.01'}]
},2000)
</script>
</body>
</html>
普通的数据加载(弊端:数据加载过多或者网速过慢页面会出现花括号;使用组件的形式完美的避免了这种情况)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-demo</title>
<script type="text/javascript" src='./vue.min.js'></script>
<style>
.big{
font-size: 26px;
}
</style>
</head>
<body>
<div id="temp-div">
<ul>
<li v-for='item in users'>
<p >时间 {{item.time|time}}</p>
<p >名称 {{item.name}}</p>
<p >钱 <em class="big">{{(item.mony-0).toFixed(2).split('.')[0]}}</em> <em>{{(item.mony-0).toFixed(2).split('.')[1]}}</em></p>
</li>
</ul>
</div>
<script>
var vm=new Vue({
el:'#temp-div',
data:{
users:[],//可以先声明出来,
message: 'You loaded this page on ' + new Date()
},
filters:{
time:function (val) {
var t=new Date(val);
//return t.getFullYear()+"年"+(t.getMonth()+1)+"月"+t.getDate()+'日';//这个是2016年11月23日
return t.toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ").split(' ')[0];//这个是2016/11/23
}
}
});
/*这里是模仿请求数据,我是写的延时赋值*/
setTimeout(function(){
/*赋值数据给vm.users即可,请求成功后赋值*/
vm.users=[
{time:1479910466000,name:'张三',mony:'1.21'},
{time:1479910466000,name:'李四',mony:'1.1'},
{time:1479910466000,name:'王五',mony:'100.01'}]
},2000)
</script>
</body>
</html>