关于vue的那些事

以前，看到vue觉得特别难，其实也没啥的，会用就好，代码思想都差不多，简单的前端数据访问渲染自己处理就好了，省的麻烦前端，自己丰衣足食！

1.引入vue.js该引入的东西，不懂看文档哦

2.定义标签如：id="#app"

3.使用vue实例化渲染数据，ajax请求等。

//前端代码
  <div id="app">
            <!-- 设置核销员 -->
            <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">设置核销员</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="ml-3" style="height: 3em">
                                <label class="col-form-label required ml-4 " style="float: left">门店选择</label>
                                <div class="dropdown ml-4 shop-search" style="float: left">
                                    <div class="input-group">
                                        <input class="form-control keyword1 " placeholder="输入 门店名/编码 查找" style="min-width: 250px">
                                        <span class="input-group-btn">
                                                <button v-on:click="showKeywords1()" class="btn btn-success">
                                                    查找
                                                </button>
                                            </span>
                                    </div>
                                    <div class="dropdown-menu apps"  aria-labelledby=""
                                         style="max-height: 240px;overflow-y: auto;">
                                        <div class="shop-item" v-for="(item,index) in shop_list" @click="selectShop(item.id,item.name)">
                                            <a href="javascript:void(0)" >{{item.name}}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <template>
                                <div class="form-group">
                                    <div class="input-group">
                                        <input class="form-control keyword" placeholder="输入 昵称 查找">
                                        <input class="form-control keywordid" placeholder="输入 ID 查找">
                                        <input class="form-control order-id" type="hidden">
                                        <span class="input-group-btn">
                                            <button v-on:click="showKeyword()" class="btn btn-info">
                                                查找
                                            </button>
                                        </span>
                                    </div>
                                </div>
                                <div style="max-height:400px;overflow: auto" class="scrollList">
                                    <table class="table table-bordered">
                                        <tr v-for="(item,index) in show_user_list.list">
                                            <td>{{item.id}}</td>
                                            <td>{{item.nickname}}</td>
                                            <td>
                                                <a class="btn btn-primary btn-sm send" href="javascript:"
                                                   data-url="<?= $urlManager->createUrl(['mch/user/clerk-edit', 'status' => 1]) ?>"
                                                   :data-index="item.id">设为核销员</a>
                                            </td>
                                        </tr>
                                    </table>

                                </div>
                            </template>
                        </div>
                        <nav aria-label="Page navigation example" v-if="show_user_list&&show_user_list.page_count&&show_user_list.page_count>1">
                            <ul class="pagination paginationscroll" style="justify-content: center;">
                                <li class="page-item" @click="getClerkList(1)"><a class="page-link" href="#">首页</a></li>
                                <li class="page-item" @click="getClerkList(parseInt(show_user_list.current_page)-1)" v-show="show_user_list.current_page&&show_user_list.current_page>1"><a class="page-link" href="#">上一页</a></li>
                                <li v-for="(item,index) in show_user_list.page_count" :class="parseInt(show_user_list.current_page)-1==index?'active':''" class="page-item" @click="getClerkList(index+1)" v-show="(index)==(parseInt(show_user_list.current_page)-2)||(index)==(parseInt(show_user_list.current_page)-1)||(index)==(parseInt(show_user_list.current_page))||(index)==(parseInt(show_user_list.current_page)+1)"><a class="page-link" href="#">{{index+1}}</a></li>
                                <li class="page-item" @click="getClerkList(parseInt(show_user_list.current_page)+1)" v-show="show_user_list.page_count&&show_user_list.page_count!=show_user_list.current_page"><a class="page-link" href="#">下一页</a></li>
                                <li class="page-item" @click="getClerkList(show_user_list.page_count)"><a class="page-link" href="#">尾页</a></li>
                            </ul>
                        </nav>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--修改门店-->
            <div class="modal fade" id="shop-edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                 aria-hidden="true" data-backdrop="static">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">设置核销员</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group row">
                                <div class="row col-12">
                                    <?php if(count($shop_nums)>0): ?>
                                        <template>
                                            <div class="ml-3" style="height: 3em">
                                                <label class="col-form-label required ml-4 " style="float: left">门店选择</label>
                                                <div class="dropdown ml-4 shop-search" style="float: left">
                                                    <div class="input-group">
                                                        <input class="form-control keyword1 " placeholder="输入 门店名/编码 查找" style="min-width: 240px">
                                                        <span class="input-group-btn">
                                                        <button v-on:click="showKeywords1()" class="btn btn-success">
                                                            查找
                                                        </button>
                                                    </span>
                                                    </div>
                                                    <div class="dropdown-menu apps" aria-labelledby=""
                                                         style="max-height: 240px;overflow-y: auto;">
                                                        <div class="shop-item" v-for="(item,index) in shop_list" @click="selectShop(item.id,item.name)">
                                                            <a href="javascript:void(0)" >{{item.name}}</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    <?php else: ?>
                                        <template>
                                            <label class="col-form-label">暂未设置门店，<a
                                                        href="<?= $urlManager->createUrl(['mch/store/shop']) ?>">请前往设置</a></label>
                                        </template>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <a class="btn btn-primary send" href="javascript:"
                               data-url="<?= $urlManager->createUrl(['mch/user/clerk-edit', 'status' => 1, 'edit' => 1]) ?>"
                               :data-index="edit_user_id">提交</a>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

//vue代码
<script>
    var app = new Vue({
        el: "#app",
        data: {
            user_list:<?=$user_list?>,
            show_user_list:<?=$user_list?>,
            shop_list:[],
            select_shop: "",
            edit_user_id: "-1",
            page:0,
        },
        methods: {
            //关键字查询
            showKeyword: function () {
                var _self = this;
                var keyword = $.trim($('.keyword').val());
                var keywordid = $.trim($('.keywordid').val());
                if (keyword == "" && keywordid=="") {
                    _self.show_user_list = [];
                    _self.show_user_list = _self.user_list;
                    console.log(this.show_user_list);
                    return;
                }
                _self.show_user_list = [];
                $.ajax({
                    url: '<?=$urlManager->createUrl(['mch/user/get-user-new'])?>',
                    dataType: 'json',
                    type: 'get',
                    data: {
                        keyword: keyword,
                        keywordid:keywordid
                    },
                    success: function (res) {
                        _self.show_user_list = res;
                    }
                });
            },
            //关键字查询
            showKeywords1: function () {
                var _self = this;
                var keyword1 = $.trim($('.keyword1').eq(0).val());
                if(keyword1 ==''){
                    keyword1 = $.trim($('.keyword1').eq(1).val());
                }
                if (keyword1 == "") {
                    _self.show_shop_list = _self.shop_list;
                    return;
                }
                _self.shop_list = [];
                $.ajax({
                    url: '<?=$urlManager->createUrl(['mch/store/get-shop-list'])?>',
                    dataType: 'json',
                    type: 'get',
                    data: {
                        name: keyword1
                    },
                    success: function (res) {
                        _self.shop_list = res;
                    }
                });
                $('.apps').toggle();
                return;
            },
            //选择店铺
            selectShop: function (id,name) {
                this.select_shop = id;
                $('.keyword1').val(name);
                $('.apps').toggle();
            },
            getClerkList:function(page){
                var _this = this;
                var keyword = $.trim($('.keyword').val());
                var keywordid = $.trim($('.keywordid').val());
                var clerk=1;
                var page_count = _this.show_user_list.page_count;
                var current_page = _this.current_page;
                var page = page;
                var data = {};
                data.page = page;
                data.keyword = keyword;
                data.keywordid = keywordid;
                data.clerk=clerk;
                $.ajax({
                    url: '<?=$urlManager->createUrl(['mch/user/get-user-new'])?>',
                    dataType: 'json',
                    type: 'get',
                    data: data,
                    success: function (res) {
                        _this.show_user_list = res;
                    }
                });
            }
        },
        mounted: function () {
            console.log(this.user_list);
        }
    });
    //app.select_shop = app.shop_list.length > 0 ? app.shop_list[0] : ""
</script>

//后端数据处理归你管
public function actionGetUserNew()
    {
        $form = new UserListForm();
        $form->attributes = \Yii::$app->request->get();
        $form->store_id = $this->store->id;
        $form->clerk_type = \Yii::$app->request->get('clerk_type');
        $data_list = $form->getUserNew();
        return \Yii::$app->serializer->encode($data_list);
    }

简单吧？也就是那么一回事！