Days13 vue项目实战1

1.vm.$data $代表vue的一个实例

2.实例生命周期8+3，11个阶段，主要8个

3.v-once 执行一次性插值，{ { } }中内容不会改变

4.计算属性computed  需要计算的属性有变化时就会刷新属性值，computed会在浏览器中有缓存，不变的值直接从缓存中拿。如果不想这样需要设置get和set属性。

5.样式绑定：

对象  v-bind：class="{ actived: isActived }" ,在data中设置isActived中的值，达到动态添加类的效果，通过this.isActived  = ! this.isActived来回切换class

数组  v-bind: class="[ styA,styB ]" 在data中设置styA和styB的类名，动态绑定class

组件 中绑定class会被添加到根元素中，已经存在的样式还在

6.v-if ：显示隐藏元素相当于添加删除DOM

  v-show ：设置元素的display属性。显示隐藏操作频繁时使用 v-show，不过v-show不支持template语法，v-if可以。

7.key 会给元素一个唯一的标识，一般不建议绑定index，会有性能问题

8.v-for =" item in  list " :key=" item.id"  

9.动态添加 li , tr等，使用is <li is=" 组件"> </li>

10.ref获取DOM节点 ref="one "   this.$refs.one.XXX

11.父传子  通过属性 <child :count=" 1 "> </ child >   props :[ 'count']     

子组件接收父组件的值不可以直接修改，可以讲count的值复制到一个变量后修改其他变量的值

子传父  通过触发事件 this.$emit( ' change', ' ')  父@change= " handleCountClick"

12.组件的参数校验props : { content:String   } 很多参数限制父组件传过来的值，参考官方文档

13.给子组件绑定事件，< child  @click.native=" ">< /child >

14.非父子组件传值，bus（类似JS的发布订阅模式）    

vue.prototype.bus=new vue();

this. bus. $emit ( 'change' , this.content )

15.插槽slot

多插槽的使用

< div  class='header' slot='header'> < /div>

<slot name='header'> default content</slot>

16.作用域插槽，子组件中循环查找数据时可以使用

<child>   <template slot-scope="data">  <li> {{ data.item}}</li></template> </child>

17.动态组件<component :is =" type"> </component>  type:指明显示那个组件

18.transition mode=" out-in (in -out )"

v-enter v-leave-to   v-enter-active  v-leave-active

enter-active-class= "active" 自定义动画class

18.Animated.js

进入 enter-active-class="animated  动画名"

离开 leave

刚进入 appear

19.JS动画 Velocity.js