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>

 点击没有任何处理程序，但也可以只组织事件冒泡，是可以的。