Vue入坑总结
一、require('../assets/1.jpg') 图片通过js引入到项目中，使用require为了使webpack返回正确的资源路径
二、使用Router
第一步：router配置
//使用router第一步：router配置 import Router from 'vue-router'
第二步：注册router
//使用router第二步：router注册 Vue.use(Router)
第三部：router的map
import IndexPage from '../pages/IndexPage'
export default new Router({ //router的map
routes: [
{
path: '/',
name: 'IndexPage',
component: IndexPage
}
]
})
三、创建任何组件，
1、先建 .vue单文件 2、引入组件 import slideShow from '../components/Slide' 3、注册组件 components
四、学会使用计算属性
有时候使用方法也可以实现，但是更多的使用计算属性
computed:{
//最开始想到的是用方法实现效果，但是推荐计算属性，
preIndex:function(){
if(this.newIndex==0){
return this.slides.length-1
}else{
return this.newIndex-1
}
}
}
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。方法不会缓存
五、vue轮播、
用vue写的轮播，一直有个问题，上一张离开时并不是移向右侧离开，而是瞬间消失，然后下一张移入，代码如下
<transition name="slide-trans"> <img v-if="show" :src="slides[newIndex].src" alt="" width="100%" height="100%"> </transition> <transition name="slide-trans-old"> <img v-if="!show" :src="slides[newIndex].src" alt="" width="100%" height="100%"> </transition>
css代码如下： 一直怀疑这儿有问题，其实这儿完全没问题，
.slide-trans-enter-active {
transition: all 0.5s;
}
.slide-trans-enter {
transform:translateX(900px);
}
.slide-trans-old-leave-active{
transition: all 0.5s;
transform:translateX(-900px);
}
真正的问题出在，我应该让两张图片定位的。否则，图片会一左一右一次排开，或者一上一下排开。
gotoIndex (index) {
//let that=this;
this.show=false;
setTimeout(()=>{ //注意这儿是setTimeout
this.show=true;
this.newIndex=index;
},10)
},
这样形成时间差，一左一右移动
六、插槽单词拼写错误、
易错单词拼写错 <slot></slot> 写成<solt>
七、自定义事件，子组件向父组件传递数据
this.$emit("closeAbout") //事件名是什么，，在父组件中接受的就是什么，
在父组件中接收 监控
<my-dialog :is-show="isShowDialog" v-on:closeAbout="closeAbout">5555555555</my-dialog>
两者必须保持一致。 不可写成 v-on:close-about="closeAbout" 错错错！！！！！
八、阻止事件冒泡
<div class="dialog-wrap" v-if="isShow" @click.stop="aboutClose"> <div class="dialog-cover" @click.stop=""> <div class="dialog-content"> <p class="dialog-close" @click.stop="aboutClose">X</p>
<slot></slot>
</div> </div> </div>
点击没有任何处理程序，但也可以只组织事件冒泡，是可以的。