vue现在比较火，可是我一直没怎么学。

其实我认为最简单的学习就是实践，昨天把一个用jq实现的老页面用vue实现了下，确实很方便。这是最初版本。

看不懂是正常的。这个本来就是自己的一个记录。

<style>
    .btn-circle .layui-icon {font-size: 18px;}
</style>

<!-- 正文开始 -->
<div class="layui-fluid" id="Business_lst_html" >
    <div class="layui-row layui-col-space15" >
          <div class="layui-col-xs12">
             <div class="layui-card">
                    <div class="layui-card-body">
                    <div class="layui-form" lay-filter="butsinLstFormTop" >
                            <div class="layui-block layui-form" style="margin-bottom:10px;"> 
                                    <input type="type" name="seachTest" class="myseach-input"  lay-verify="required"  placeholder="按事项关键字搜索"  />
                                    <button class="layui-btn icon-btn layui-btn-sm myseach"  lay-filter="seachButsin" lay-submit >
                                        <i class="layui-icon">&#xe615;</i>搜
                                    </button>
                                </div>
                        
                            <div class="layui-btn-container">
                                <button class="layui-btn btn-circle"  @click="openWin()" style="bottom: 60px; z-index: 9999;font-size: 18px" title="增加业务">
                                    <i class="layui-icon">&#xe654;</i>
                                </button>
                                
                                <!--<button data-tableid="butsinLstTable" ew-event="exportCsv" class="layui-btn icon-btn layui-btn-sm">
                                    <i class="layui-icon">&#xe67d;</i>导出
                                </button>-->
                                <button class="layui-btn layui-btn-sm layui-btn-primary" v-on:click="only_debts">
                                    只看欠款
                                </button>
                                <button class="layui-btn layui-btn-sm layui-btn-danger" v-on:click="wait_works(1)">
                                    待处理
                                </button>
                                <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="wait_works(2)">
                                    处理中
                                </button>
                                <button class="layui-btn layui-btn-sm" v-on:click="wait_works(3)">
                                    待结账
                                </button>
                              
                              </div>
                       
                    </div>
                  </div>   
                </div> 
            </div>
        </div>
      
        <div class="layui-row layui-col-space15" id="Business_html">
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md6 mymain"    v-for="(obj,index) in listData"  v-bind:key="obj.id" >
                <div class="layui-card">
                    <div class="layui-card-body">
                    <div class="layui-text">
                            <template v-if="obj.img_url != 'assets/images/default.png' ">
                                <div class="user-text-head" >
                                        <img  @click="imgprev(obj.img_url)"  v-bind:src=`${obj.img_url}?x-oss-process=style/thumb`  v-bind:layer-src="obj.img_url" />
                                </div>
                            </template>
                        <div class="con-right ">
                            <h3>事项</h3>
                            <p>{{obj.matters}} </p>
                            <p>{{obj.bus_detailed}}</p>
                        </div>
                        <div class="layui-clear"></div>
                        <div class="layui-text"><span>{{obj.create_time}}</span><span class="pull-right" style="color:#FF5722;" >￥{{obj.actual_pay}}<span></div>
                        <template v-if="obj.phone">
                             <div class="layui-text" >
                                    <span>客户：{{obj.user_name}}</span>
                                    <span style="margin-left:10px;">{{obj.phone}}</span>
                                    <a v-bind:href=`tel:${obj.phone}` class=" pull-right layui-btn layui-btn-primary layui-btn-xs">直拨电话</a> 
                            </div>
                        </template>
                        <div class="layui-text layui-clear" style="margin-top:5px;">
                                <a v-if="obj.status == 1 "  class="layui-btn layui-btn-danger layui-btn-xs" @click="openWin(index)">{{obj.status_text}}</a>
                                <a v-else-if="obj.status == 2 " class="layui-btn layui-btn-normal layui-btn-xs"  @click="openWin(index)">{{obj.status_text}}</a>
                                <a v-else-if="obj.status == 3 " class="layui-btn  layui-btn-xs" @click="openWin(index)">{{obj.status_text}}</a>
                                <template v-else  class="layui-btn  layui-btn-xs">
                                        <span v-if="obj.dabt == 0  "  >完成</span>
                                        <a v-else  class="layui-btn  layui-btn-xs"  @click="openWin(index)"  >欠款{{obj.dabt}}</a>
                                </template>
                                <span  v-if="obj.status == 10 " class="layui-ml10">收款:{{obj.pay_type_title}}</span>
                                <button class="layui-btn layui-btn-xs layui-btn-primary"  @click="del(index)"   style="float: right;"><i class="layui-icon">&#xe640;</i> 删除</button>
            <button class="layui-btn layui-btn-xs layui-btn-primary"   @click="openWin(index)" style="float: right;margin-right: 10px;"><i class="layui-icon">&#xe642;</i> 修改</button>     
                        </div>
                
              </div>
            </div>
        </div>
            </div>
        </div>

</div>


  
<script >
layui.use(['layer', 'form',  'config','common'],
function () {
"use strict";
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var config = layui.config;



var my_html_data = {
            title:'业务',
            mainId:"#Business_lst_html",
            geturl:'Business/apilst',
            addurl:"business/gethtml/method/business_add/",
            searchsUrl:'Business/searchs',        //搜索用地址
            delurl:'Business/del',
}


var vm = new Vue({
        el: '#Business_lst_html',
        data: {
            listData:[],
            initData:my_html_data,
            searchData:{   //请求搜索时的对象
                'page': 1,
                'limit': 30,
                'search':[]
            }          
        },
        methods: {
            //初始加载
            gethtml:function(url){
                let _that = this;
                admin.req(url,_that.searchData, function (res) { 
                        if(res.code != 0) return wx.miniProgram.navigateTo({url:'/pages/start/start'});  
                       // 如果超过了500条，就清空免得影响性能，这么长谁看
                       if(_that.listData.length > 500){
                         _that.listData = [];
                       } 
                    _that.listData.push.apply( _that.listData,res.data) ;   //数组加入原来数组
                    if(_that.listData.length ==0){
                          layer.msg("暂无数据");
                       }
                    }, 'POST');
            },
            //页面参数重新初始化
            seachInit:function(){
                this.searchData.limit = 1;
                this.searchData.limit = 10;
                this.listData=[];
            },
            //只看欠账
            only_debts:function(){
                this.seachInit();
                this.searchData.search = {arrears:1};
                this.gethtml(config.base_server + this.initData.searchsUrl);
            },
            //看工作状态
            wait_works:function(status_text){
                this.seachInit();
                this.searchData.search = {status:status_text};
                this.gethtml(config.base_server + this.initData.searchsUrl);
           
            },
            //绑定微信预览图片接口事件
            imgprev:function(src){
                wx.previewImage({
                current: src, // 当前显示图片的http链接
                urls: [src] // 需要预览的图片http链接列表
                });
            },
            //打开窗口事件
            openWin(tabid){
                let _that = this;
                let id = (tabid &&(tabid !='undefined')) ? 1 : 0;       //因为js中0算假，因此加1判断
                let title = id ? "修改":"增加";
                let url = id ? _that.initData.addurl+'/id/'+_that.listData[tabid].id :  _that.initData.addurl;
                url = config.base_server + url;
                admin.open({
                    title: title + _that.initData.title,
                    url: url,
                    end:function(){
                        if(id){
                            let data = admin.getTempData('tr_temp_data');
                            console.log(data);
                            _that.listData.splice(tabid,tabid+1,data);

                        }else{
                            let data = admin.getTempData('tr_temp_data');
                            _that.listData.unshift(data);      //数组插入到首位
                        }
                        
                    }
                    
                });
            },
            del:function(tabid){
                let _that = this;
                layer.confirm('确定删除吗?注意,删除后不可恢复', function(index){
                        admin.req(_that.initData.delurl,{id:_that.listData[tabid].id}
                        ,function(data){
                            if(data.code==1001){
                                _that.listData.splice(tabid, 1);
                            }
                            layer.msg(data.msg);
                        },'POST'
                            
                        );
                        layer.close(index);
                 });  
            } 
        },
        created:function(){     //实例被创建后执行代码
            this.searchData.limit = 1;
            this.searchData.limit = 10;
            this.gethtml(config.base_server + this.initData.geturl);
        },
       
    })
})
 
</script>

还有下拉加载没做，慢慢做。实践了一下，真有隔代杀的感觉。