前提项目是用脚手架工具生成的，项目用到的技术是vue webpack 和scss
1.引用定义组件的时候需要注意的点
import button from '../../components/button/Button' //在引用组件时，不要用html关键字作为名字，这样在解析的时候它会当成html元素来解析，例如这里用了button，它会当做html的元素。
2.父组件中定义一个方法，让子组件中的按钮点击的时候调用
父组件：
<buttonComponent @commonalityBtn="ServiceList">{{ service }}</buttonComponent>
methods: {
ServiceList () {
router.push({
name: 'search',
params: this.ListParameter
})
}
子组件：
<button type="button" @click="commonality"><slot></slot></button>
methods: {
commonality () {
this.$emit('commonalityBtn')
}
}
3.在vue文件里引入scss文件需注意的点
第一步引入scss文件：import styles from './land.scss'
第二步将styles变量配置在data里
data () {
return {
styles
}
}
第三步使用样式：<span :class="styles.list">选择产品类别</span>
4.根据不同情况显示不同样式的时候需注意要写在数组中例如：
:class="[{'seek' : shouldShow },{'find':should}]"
:class="{'seek' : shouldShow,find:should}"
:style="{'seek' : shouldShow,find:should}"
5.vue实现手风琴（我的代码前提是数据是从父组件传入子组件的，点击父组件的导航显示子组件并实现手风琴）
父组件：
vue：
<selectionGroup v-for="(pulldow,index) in sortName" :childKey="pulldow,index,seq" @groupClick="groupClick"></selectionGroup>
js：
data () {
return {seq:0,}
}，methods{
groupClick(_index){
this.seq=_index;
}
}
子组件：
css：
.groupBlock{display: block}
.groupNone{display: none}
vue：
<li>
<span @click="loadGroup()" class="panel-title">点击查看内容<i class="accordion-title"></i></span>
<div :id="index" :class="[{'groupNone':index!=seq,'groupBlock':index==seq}]"></div>
</li>
js：
export default {
methods: {
loadGroup(){
this.$emit("testclick",this.index);
}
},
props: {
childKey: {type: Object},
index:{type:Number},
seq:{type:Number}
},
}
6.需求：点击一下展开，点击一下合上（前提界面所有的东西都是循环遍历出来的，并且有多个tab卡，每个卡里有多个需要显示隐藏的块）（代码前提：点击的动作是在父组件中，展开收起的部分在子组件中）
子组件：
vue：
<div @click="toggle" class="group-title">
<div>{{section.title}}</div>
</div>
<div v-show='shouldShow'>
<GroupChild :section='section'></GroupChild>
</div>
js:
export default {
data(){
return {
shouldShow: false,
}
},
methods: {
toggle(){
this.shouldShow = !this.shouldShow;
}
props: {
section: {
type: Object
},
isActive: {
type: Boolean
}
},
watch: {
// 回显：修改数据后展开，否则闭合
isActive(val, oldVal) {
if (val && this.section.isChange) {
this.shouldShow = true;
} else {
this.shouldShow = false;
}
}
}
}
父组件：
<GroupItem v-for="section in item.sections" :section="section" :isActive="isActive"></GroupItem>
props: {
isActive: {
type: Boolean
}
}
7.Vue中如何让v-for循环出来的列表里面的click事件只对当前列表内元素有效
<li v-for='item in items' @click="toggle(item)">
<span v-show='item.show'>{{item.content}}</span>
</li>
toggle:function(item){
item.show=!item.show
}
8.子父元素都有点击事件时如何不相互干扰
<div @click="parentClick">
<div @click.stop="childClick"><div>
</div>
9.频繁切换用v-show,很少改变用v-if
v-if初始化时不渲染，条件满足时渲染，有更高的切换开销
v-show初始化时渲染，有更高的初始化开销，条件满足时，只是改变了display的值