用到的知识点
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的使用
扫描二维码关注公众号,回复:
970034 查看本文章
依赖: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 获取当前元素