vue.js的简单使用及组件套用_vue component replace true-CSDN博客

本文链接：https://blog.csdn.net/u011937245/article/details/53580622

组件使用

<!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>