这里是我在与同学合作一个图片分享系统时遇到的问题的解决方法，因为是第一次学习和使用vue.js，所以问题很基础也很杂，主要是用于给自己留下一个记录。
=======================================================
问题1：
实现轮播时，如果想实现点击按跳到特定页后继续自动显示下一页的功能，如果这个自动显示下一页的功能的实现为直接调用setTimeout，如：
start(){
setTimeout(this.sliderNext(),2000);
}
会导致点跳页按钮后，换自动换下一张的速度明显加快。
解决方法：
使用clearTimeout清除之前的定时器，如：
var timer;
start(){
clearTimeout(timer);
timer = setTimeout(this.sliderNext(),2000);
}
setTimeout在使用的时候毕竟会是一个异步操作，需要注意执行代码对其他地方代码的影响，在特定时候执行clearTimeout会是一个好习惯。
=========================================================
问题2：
css3实现子元素平分容器
解决方法：
#outer{
display:box;
display:-webkit-box;
display:-moz-box;
}
#inner1{
-webkit-box-flex:1;
-moz-box-flex:1;
box-flex:1;
}
#inner2{
-webkit-box-flex:1;
-moz-box-flex:1;
box-flex:1;
}
#inner3{
-webkit-box-flex:1;
-moz-box-flex:1;
box-flex:1;
}
注意：#inner们不要设置float:left的样式，否则它们会显示不出来。
=========================================================
问题3：
点击空白处时，关闭弹窗
解决方法：
mounted() {
document.addEventListener('click', (e) => {
if (!this.$el.contains(e.target)) this.show = false
})
}
=========================================================
vue2.0相对与之前版本修改了新的语法，
丢弃$index和$key
新数组语法
<tr v-for="list in lists">
{{list}}
</tr>
或者
<tr v-for="（list,index）in lists">
az</tr>
=========================================================
vue v-for 设置开始位置和结束位置
<div class="c-picGallery__other" v-for="(item,index) in imageList" v-if="index > 0">
<img :src="$img(item)">
</div>
=========================================================
需要注意的是，Vue之所以能够监听Model状态的变化，是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是，对于数组元素的赋值，却没有办法直接监听，
因此，如果我们直接对数组元素赋值：
vm.todos[0] = {
name: 'New name',
description: 'New description'
};
会导致Vue无法更新View。
正确的方法是不要对数组元素赋值，而是更新：
vm.todos[0].name = 'New name';
vm.todos[0].description = 'New description';
或者，通过splice()方法，删除某个元素后，再添加一个元素，达到“赋值”的效果：
var index = 0;
var newElement = {...};
vm.todos.splice(index, 1, newElement);
Vue可以监听数组的splice、push、unshift等方法调用，所以，上述代码可以正确更新View。
=========================================================
vue过渡时对应钩子的响应顺序
当 show 属性改变时，Vue.js 将相应地插入或删除
如果 show 变为 false，Vue.js 将：
调用 beforeLeave 钩子；
添加 v-leave 类名到元素上以触发过渡；
调用 leave 钩子；
等待过渡结束（监听 transitionend 事件）；
从 DOM 中删除元素并删除 v-leave 类名；
调用 afterLeave 钩子。
如果 show 变为 true，Vue.js 将：
调用 beforeEnter 钩子；
添加 v-enter 类名到元素上；
把它插入 DOM；
调用 enter 钩子；
强制一次 CSS 布局，让 v-enter 确实生效。然后删除 v-enter 类名，以触发过渡，回到元素的原始状态；
等待过渡结束；
调用 afterEnter 钩子。
另外，如果在它的进入过渡还在进行中时删除元素，将调用 enterCancelled 钩子，以清理变动或 enter 创建的计时器。反过来对于离开过渡亦如是。
=========================================================
问题：
搜索框（在父组件）输入内容，子组件接受内容并根据内容对分享项进行操作（例如筛选等等）
解决方法：
在子组件使用$watch来监控父组件传过来的数据而改变子组件的显示内容
父组件：
<div class="content">
<categoriesList :searchString="searchString"></categoriesList>
<contentTab></contentTab>
</div>
data(){
return {
searchString:'',
}
},
getSearchResult(){
this.searchText = this.searchText.trim();
if(this.searchText==="" || this.searchText=="搜索分享"){
alert("搜索空字段");
return;
}
// alert("搜索 "+this.searchText);
this.searchString = this.searchText;
//传this.searchText,获取分享
},
子组件：
mounted(){
this.$watch('searchString',function(){
this.searchShare(); //操作
});
},
props:{
searchString:{
type:String,
default:'',
}
},
=========================================================
点击分类按钮显示对应分类内容
在实现点击分类按钮显示响应分类内容的功能时，我一开始是使用先分别获取各分类内容，然后使用v-if对每一个的显示和隐藏进行控制，所以我一开始是对每个分类的内容都定义一个div（。。。。真是蠢死了orz）
其实一开始获取到所有分享后把这些分享放到一个数组里面，那么现在获取到某个分类下的分享后，用同样的方法改变这个数组就行了，这样vue会检查到这个数组的变化，然后重新渲染页面的内容
=========================================================