用到的知识点
1.vuejs中的生命周期函数 created() 以及 mounted()
created()使用场景：用于异步请求数据时使用，一般与下一步操作$nextTick函数并用
mounted()使用场景：页面渲染完毕后执行，用于初始化一些必要事件，比如加载滚动条插件的时候
2.异步请求框架axios的使用（可参考官方文档）
3.父子组件之间的交互，函数$emit，在子组件上绑定事件 @child="child"
//父组件
<template>
<ratingselect @select-type="onSelectType"></ratingselect>
</template>
<script>
data () {
return {
selectType: 0,
},
methods: {
onSelectType (type) { //父子间从子组件中获取类别参数
this.selectType = type
}
}
</script>
// 子组件
<template>
<div>
<span @click="select(0, $event)" :class="{'active': selectType===0}"></span>
<span @click="select(1, $event)" :class="{'active': selectType===1}"></span>
<span @click="select(2, $event)" :class="{'active': selectType===2}"></span>
</div>
</template>
<script>
data () {
return {
selectType: 0,
},
methods: {
select (type, event) { //子组件触发事件，向父组件传递类别参数
this.selectType = type
this.$emit('select-type', type)
}
}
</script>
4.双向数据绑定的一些api的灵活使用
v-show/v-for/v-if...
5.vue-cli的使用
依赖：nodejs环境 webpack
命令：vue init webpack vue-project
6.滚动条插件iscroll的调用
垂直滚动条：
vue.$el.scroll = new iscroll(vue.$el,{
probeType: 3, //实时监听
click:true
});
水平滚动条：
求出滑动区域宽度，将宽度设置到$el元素的子元素上
vue.$el.scroll = new iscroll(vue.$el,{
scrollX:true,
eventPassthrough: 'vertical'
});
7.在HTML元素中添加钩子用于获取当前元素 ref="xxx"
使用方法：vue.$refs.xxx 获取当前元素