vue 细节 规范（只要不断片，持续的更新.....）

1************涉及到数据请求刷新 组件上使用v-if控制是否呼出该组件  v-show出现的问题即是数据请求一次发生改变之后  组件隐藏 数据不会动态刷新 再次呼出数据是第一次请求d  show 控制的单纯的css display属性  if 组件会整个重新渲染一遍

2************组件复用 命名问题 引入之时 可使用驼峰命名法则 在template 中使用 尽量与现有的结构区分开  一眼看去  这就是一个组件 结构清晰明了

如

script  import  WoMen  from './women' 

components  :{

WoMen, 

}

template <wo-men></wo-men>

3*********神奇的n目运算

普通的  三目运算{{item.type==1?:"手机":"电脑"}}

神奇的  n目运算

<p>物品： <span>{{item.type=="1"?"iphone XR":(item.type=="3"?"Mate20 pro":(item.type=="2"?"p20 Plus pro":(item.type=="4"?"samsung s9":(item.type=="5"?"htc U12":(item.type=="8"?"a6000":(item.type=="50"?"30mm f1.4":"未知"))))))}}</span></p>

 4********组件传值 父传子 自定义属性  子组件props接收 

props是单向数据流  单向数据最大的好处就是保证父级的数据不被子级污染

因此 父组件可随意改变值并即时传递给子组件  而子组件no

当你想要在子组件中使用到这个props值的时候 不要直接在方法中 this.这个属性 do something  if you do了

 

不会报错 

会时不时警告你 我就干过这事儿 ...

 

 干掉警告当然不是一碗饭就完事儿了

你可以这样做 使用一个data属性 局部变量  接收这个值 然后对这个值进行操作

 

了解到还可以使用一个计算属性来解决

 在这之前有说数据单向流

因为props接收的是一个对象或者数组 属于引用类型 因此子组件可以修改父组件的数据

这显然违背了 单向数据流的初衷 

因此 我们可以通过简单粗暴的深拷贝

JSON.parse(JSON.stringify(obj))

 当然 也有弊端---性能消耗 方式臃肿 重复操作 

----------------------------------我是一条分割线

子组件接收可以有两种方式 

放到一个数组中  可当做变量使用

严格的 放到对象中   必须接收对象规范的数据类型

props:{name:{type:string,default:'value'}}

还可以有一个默认值但是不可作为子组件内部的变量去使用

推荐使用 第二种 

自定义属性 传输的数据命名尽量以 小写方式

 5---------关于z-index

z-index使用条件 元素必须要有定位（position:absolute）;

 

z---------垂直延伸到显示区的轴。

正数-----离用户更近;

负数-------离用户更远。

 6-------关于ul左侧的空白区域

图中左侧空白区域从何而来呢 ，当页面出现了我们并没有亲手设置过的css效果

第一怀疑 便是 浏览器  

对的 默认样式 

于是便有了下面的清除浏览器默认样式

一般引入css文件 便会在开头标注

*{

margin:0;

padding:0;

　　}

以此避免这些诡异的不明的布局

正常状态

或者直接给ul元素清除

padidng：0；

margin：0；

顺便清除下list-style:none;

7--------------