vue.js的简单使用及组件套用

组件使用 vue-demo .big{ font-size: 26px; } 时间 {{item.time|time}}

苗咪

2865人浏览 · 2016-12-12 11:17:17

苗咪 · 2016-12-12 11:17:17 发布

组件使用

<!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 :data='users'></demo>

</div>

   <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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^