vue練手小項目--眼鏡在線試戴

最近看到了一個眼鏡在線試戴小項目使用純js手寫的，本人剛學習vue.js沒多久，便試試用vue做做看了，還沒完善。

其中包括初始圖片加載，使用keywords查找，父子組件之間傳遞信息，子組件之間傳遞信息

1. 使用keywords查找

     1.1 給每個li添加初始data

smallImg: [
　　{
　　　　keywords: "橢圓臉",
　　　　src: "images/model_1.jpg",
　　　　addClass: false
　　},
　　{
　　　　keywords: "圓形臉",
　　　　src: "images/model_2.jpg",
　　　　addClass: false
　　},

　　...

]

　1.2 添加方法

// 搜索臉型
addCurrent: function (index){
	// li樣式添加
	this.faceType[index].isTrue=true;
	this.faceType[this.oldIndex].isTrue=false;
	this.oldIndex=index;

	// 搜索臉型
	var type=this.faceType[index].type;
	this.smallImg.forEach(function (val,index){
		// 先都不加class
		val.addClass=false;
		// 若關鍵字不等於臉型則添加class
		if(val.keywords!=type){
			val.addClass=true;
		}
	});
	// 點擊全部，則所有的都不添加class
	if(index==0){
		this.smallImg.forEach(function (val,index){
			// 先都不加class
			val.addClass=false;
		});
	}
}

2. 子組件向父組件發送數據

　　2.1 點擊任意眼鏡觸發showGlass()事件

<script type="text/template" id="galsslist">

	<div class="galsslist">
		<ul class="clearfix">
			<li v-for="(val,index) in glass" @click="showGlass(index)" v-if="val.show">
				<img :src="val.src" alt="">
				<h4>{{ val.title }}</h4>
				<p>{{ val.text }}</p>
			</li>
		</ul>
	</div>
</script>

　　2.2 子組件發射togg()事件到父組件，並傳遞點擊的index值  

showGlass: function (index){
　　　　this.$emit("togg",index);
},

　　2.3 父組件自定義事件

<!-- 自定義事件，子組件向父組件發送數據 -->
<galsslist @togg="showBig"></galsslist>

　　2.4 執行showBig()事件，佩戴選擇的眼鏡

showBig: function (index){
	this.bigGlassImg="images/glass_"+(index+1)+".png";
	this.showbigGlassImg=true;
}

3. 子組件之間傳遞信息

   3.1 先在index的data中定義  bus: new Vue(),

   3.2 點擊搜索在子組件觸發search事件，發射事件 sear(), 並傳遞sendMsg信息

// 向另一個組件傳遞信息
search: function (){
	var sendMsg=this.toggArr[0].msg;
	this.$root.bus.$emit("sear",sendMsg);
}

　3.3 執行事件sear()，並修改this.searchKey,並觸發searchKeywords()事件

// 接收另一組件傳遞的信息
created: function (){
	var self=this;
	this.$root.bus.$on("sear",function (val){
		self.searchKey=val;
		self.searchKeywords();
	})
},
beforeDestory: function (){
	this.$root.bus.$off("sear");
}

　3.4 顯示與之匹配的眼鏡

searchKeywords: function (){
	this.glass.forEach(function (val,index){
		// 先全部顯示
		val.show=true;
		var key=val.title.split("_")[0];
		// key不相等，則隱藏
		if(key!=this.searchKey){
			val.show=false;
		}
	},this);
	// 為全部則全部顯示
	if(this.searchKey=="全部"){
		this.glass.forEach(function (val,index){
			// 全部顯示
			val.show=true;
		});
	}
}

4. github地址 （https://github.com/hsiangleev/proj-eyeglass.git）