学习Vue实现去哪儿网（上）-----基础知识总结

第一部分基础知识学习：
   （1）vue挂载渲染基础；

   （2）生命周期；

   （3）计算，方法与监听；computed中get与set；

   （4）vue进行样式渲染：<1>class的对象（true or false）或数组绑定；<2>style的绑定数组数据（data中定义styleobj用于样式绑定改变）

   （5）vue的条件渲染：v-if(不渲染)；v-show(渲染而不显示)

   （6）列表渲染：

                 数组渲染：

                  v-for="((item,index) in items)"; :key="item.id(唯一量)";

                  数组变异方法：pop  ,push  , shift , unshift , splice , sort , reverse ;

                  vue.set(对象，index,value)【全局】;vm.$set(.....)【实例上】

                   template循环渲染占位符;

               对象渲染：

                  v-for="((item,key,index) in items)";   key为键值；

                  除了重新给对象赋值以外，还可以用vue.set(对象，key,value)【全局】;vm.$set(.....)【实例上】

第二部分深入理解vue组件

   （1）注意点：

              。table表格【ul,ol,select等也是这样】元素中只能用指定标签，使用组件会渲染错误，使用is:

              。子组件中data必须是一个函数 。操作DOM时候可以使用ref获取dom节点：this.$refs.dom中ref名;

  （2）父子组件之间的传值

              。子组件通过this.$emit("事件名"，参数)给父组件用props ; 父组件通过属性《监听事件@事件名=“函数”【函数可获取传过来的值】》向子组件传值

              。子组件不可修改从父组件传递来的值，反之可修改；若要修改可将获得的值重新赋给新定义的量【单向数据流】

  （3）组件的参数校验与非props特性

              。非props特性：父组件向子组件传值，但是子组件不接，则内容会渲染在子组件标签属性上不会渲染在标签内

              。参数校验：

 Vue.component("child",{
//        父组件传来的content必须有props来接收
        props:{
            content:{
                typs:[String,Number],
                require:false,
                default:'default value',
//                自定义校验器
                validator:function(value){
                    return (value.length>5)
                }
            }
        },
        template:'
{{content}}
'
    })

     （4）组件绑定原生事件(绑定后加上.native)

         

     （5）非父子组件之间的传值【Bus/总线/发布订阅模式/观察者模式】

  

     （6）在vue中使用插槽

       组件template中使用标签获取插槽内容 ; 多个插槽内容dom中给属性solt="aaa"，在标签中给name="aaa"，即可对应插槽即具名插槽。

     （7）vue中的作用域插槽

     （8）动态组件与v-once指令

第三部分vue基础动画

CSS以及keyfrom实现；js实现；animat.css 与velocity.js实现动画；多元素过渡动画；列表动画；动画组件的封装

css与js实现动画


    enter可以传入两个参数 el和down ;  Velocity(el.{color:red},{duration:1000,compelt:down})
    

    多个元素的过渡动画
    
        

        

    

    列表的过渡动画
    
        

    

    动画封装为组件