vue.js的简单使用及组件套用
2016-12-12 11:17
681 查看
组件使用
<!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>
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- 使用vue.js简单的tab选项卡效果
- Vue.js 2使用中的难点举例--子组件，slot, 动态组件，事件监听
- 关于Vue.js 组件的使用及其概念
- vue.js 组件实现简单分页效果
- Vue.js组件component关于分页功能、自定义事件的$.Emit()的使用
- Vue.js父与子组件之间传参 父向子组件传参 例子：App.vue为父，引入componetA组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为ht
- Vue.js学习系列（八）---如何使用组件
- Vue.js路由组件vue-router使用方法详解
- vue.js使用props在父子组件之间传参
- Vue.js路由组件vue-router的使用方法
- vue2.0使用weui.js的uploader组件上传图片
- Ext.js 组件的简单应用——【Window】和【HtmlEditor】结合使用
- Vue的路由功能（1）简单路由与vue-router的基础使用（同步/异步组件）
- vue组件简单介绍与使用
- vue.js中组件的创建和使用方法
- VUE.js的简单使用及路径