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）