cdn方式：vue+jq+vant 问题列表

Vue官网:  Vue 实例 — Vue.js

Vant官网： Vant 3 - Mobile UI Components built on VueMobile UI Components built on Vuehttps://vant-contrib.gitee.io/vant/#/zh-CN/col

注意事项：因为是cdn方式， vant官网的写法不完全使用，需要小改一下写法

1.Vue 完整生命周期：

2.new Vue()创建实例，进行双向绑定，尽量通过data数据操作页面，禁止直接操作元素，通过 v-model实现双向绑定

3.绑定事件：事件名称前添加@符号

4. 组件化

父组件传参子组件：  动态数据属性 + ：

                     下图静态属性案例 

子组件传给父组件： 通过props获取父组件属性，取值 

$parent可以无线叠加，寻找祖父级别

this.$parent.属性   vue生命周期问题 setTimeout才可以取到
this.$parent.方法   vue生命周期问题 setTimeout才可以取到
this.$emit('父组件方法', this.autoName, this.searchVal);

注意：①如果涉及UI组件，this.$parent可能无反应，就多加.$parent试试
      ②this.$emit 调用父组件的方法名不支持驼峰，必须全小写

父组件获取子组件data数据、调用子组件方法：通过ref

子组件传值父组件： this.$emit(' 父组件方法 ', args );

子组件：

父组件：

5.过滤器

6.页面加载过程会有代码闪现

css 样式：

[v-cloak]{
    display: none;
}

html 页面： 涉及到js逻辑的全部加此属性

7.vant 无select组件，只有field, 手动封装select

Vue.component("van-select", {
    props: ["name"],
    data() {
        return {}
    },
    template: '<div class="van-cell van-field van-sel-box">\
               <label class="van-cell__title van-field__label" v-if="name">\
                    <span>{{ name }}</span>\
                    <div class="sel_arrow_shade"></div>\  // select文字居右时，箭头朝左，遮盖
               </label>\
               <slot></slot>\
               </div>',
    methods: {}
});


<van-select class="van-cell van-field" name="项目类型">
    <select v-model="project.project_type" class="van-cell van-field__control">
        <option :value="item.id" v-for="item in projectTypes" :key="item.id">{{ item.name 
           }}</option>
    </select>
</van-select>

8.vant list 上拉刷新，ajax 总是请求多次加载全部数据

onload : 添加setTimeout原因猜测：ajax请求过快，元素却还没渲染完，高度不定继续请求

替换成this.$nextTick 依然还是出现继续请求问题，需要添加setTimeout才可以

<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
   :style="{height: winH-54 + 'px'}" :offset="100">
   <div class="list_one" v-for="(item, index) in list" :key="item.id">
        <a :href="`ck_xxlr_detail.html?id=${item.id}`" class="xmcx">
             <van-cell-group>
                  <img src="../../images/index/icon_kh.png" class="img_l" />
                  <p class="title">{{ item.project_name }}</p>
                  <p>数据来源：{{ item.project_principal }}</p>
                  <p>支持部门：{{ item.project_type_name }}</p>
             </van-cell-group>
        </a>
   </div>
</van-list>

new Vue({
    el: '#app',
    data() {
        return {
            winH: window.innerHeight,
            list: [],
            loading: false,
            finished: false,
            pageNumer: 1,
            pageSize: 10
        };
    },
    methods: {
        onLoad: function() {
            var _this = this;
            setTimeout(() => { 
                _this.loading = true;
                _this.getData();
            }, 300);
        },
        getData: function(){
            var _this = this;
            $.ajax({
                type:"POST",
                url:"../../../project/getProjectList",
                dataType: "json",
                data:{
                    pageNumber: _this.pageNumer,
                    pageSize : _this.pageSize,
                    searchName: _this.searchVal
                },
                success:function(result){
                    if(result.ret.succeed){
                        _this.list = _this.list.concat(result.page.list);
                        _this.loading = false;
                        // 如果当前条数 == 总条数，则已经没有数据
                        if (_this.list.length >= result.page.totalRow) {
                            _this.finished = true;
                        }else {
                            _this.finished = false;
                            _this.pageNumer ++;
                        };
                    } else {
                        _this.$toast(result.ret.retMsg);
                    }
                }
            });
        }
    },
    mounted() {
        
    }
});