Vue官网:?
Vue 实例 — Vue.js
https://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() {
}
});