Vue学习记录，心得体会-2

vue-resource的全局配置

在每次使用vue-resource进行请求时，我们都要进行整个路由地址的书写，我们可以通过vue-resource的配置选项，来进行根域名的配置，配置根域名的好处就是，不用我们每次都要书写很长的路由地址，而且万一根域名更换之后，我们进行根域名的更换也是很方便的。

通过语法   Vue.http.options.root = '/root';  来进行根域名的配置。

只要配置全局根域名之后，每次发送http请求时，请求的url路径应该以相对路径开头，前面不能带 / ，否则，不会启用路由拼接。

而在我们进行post请求时，总会启动配置选项{emulateJSON:true},来将ajax伪装为表单请求，我们也可以为这个配置进行全局的配置。

使用过度类名来实现动画

在vue中，如果想制作动画效果，需要将想使用动画效果的dom元素用 transiton 元素进行包裹，如果transition中的元素被增加，删除，vue会自动检测元素是否应用了css的动画，是否有对应的钩子函数。

vue提供了6个过度类名，如果transition中的元素被添加或者删除，如果绑定了css动画，就会执行相应的动画。

v-enter :元素过度开始时的状态。

v-enter-active:元素在进入过度时，会执行这个类中定义好的动画，过度属性，过度时间，过度曲线。

v-enter-to:元素过度完成之后的状态

v-leave:元素开始离开时的状态

v-leave-active:元素正在离开时，会执行这个类中定义的动画。

v-leave-to:元素离开之后的状态

这里面的v-开头表示的是选中了一个没有name属性的transition元素，如果transiton元素有了一个name属性,名为active，那么就需要active-enter才可以规定它进入时的状态。

下面是代码。

    
    
    



    
    
        
hello word
    

Vue中使用第三方类库animation实现动画

自定义动画还是麻烦的，我们可以使用第三方动画库，animation来帮助我们更好的实现一些动画效果。

但是在vue中我们如何去实现它呢？

首先我们需要在transition元素中加入属性，enter-active-class="animated  animation动画库的规定动画效果类名" 来定义我们的入场动画，通过leave-active-class="animated animation动画库的规定动画效果类名",来实现动画效果.

    切换
    
        
Animation
    
    
    
        
Animation
    

vue动画的钩子函数，来执行半场动画

我们使用vue的类动画时，动画总是一个循环，如果我们只想让一个小球只有飞走这一个动画效果，那么使用class动画就很难完成，所以我们要使用动画钩子函数来完成。

    掉落
    
    
        


        
    

使用transition-group来实现v-for循环出的列表动画

在我们使用v-for循环出了列表时，想给列表中的元素设置动画，我们就需要在外部套用transition-group 元素，并且我们必须要给循环的元素设置 :key 属性 。

然后，使用过度类名来添加动画，

   

    
    
    




    
        id:
        
    
    
        name:
        
        
    
    添加
    
    
        
{{item.id}}---{{item.name}}删除
    

组件化

什么是组件化呢？组件化就是我们可以拆分vue的代码量，将不同的功能定义为不同的组件，我们用到什么功能，就调用相应的组建即可。

我们在学习之前的内容时，可能还听过模块化的概念，那么模块化和组建化的区别是什么呢？

模块化：模块化是从代码逻辑的角度区分的，是为了代码分层开发，保证模块功能单一。

组件化：组建化是从ui页面的角度区分的，是为了方便ui组件的重用。

创建第一个组件

现在，让我们来创建我们的第一组件吧。

使用Vue.extend来创建全局的Vue组件

Vue.component函数的第一个参数是是组件的名称，将来要引入组件的时候，就是以一个 标签形式来引用它的

 第二个参数:Vue.extend函数创建的组件模板，其中的 template就是将来组件要展示的HTML内容。

,最后如果想使用组件的话，只需要将组件名称以html标签的形式引入即可

还有需要注意的是，在定义组件名称的时候，如果有大写，则在以html引入的时候，需要在大写前加-然后大写变小写。

如zuJian 以html引入的时候需要变为 zu-jian

注意:不论使用什么方式创建组件模板，template属性指向的模板内容，只能有且只有一个根标签。

组件创建的第二种方式

在上面组件的创建中，虽然可以正常的创建一个组件了，但是方法确实有点麻烦，这可不符合我们程序员的思想啊。

在下面，有几种比较简单的创建一个组件的方式，我将一一列举出来。

//直接将Vue.extend函数放入第二个参数
    Vue.component("zujian",Vue.extend({
        template:"
我是第二种方式创建的组件
"
    }))
    //第二个参数直接放入一个对象，只要对象中有template属性，且属性中有html模板。
    Vue.component("zujian2",{
        template:"
我是第三种方式创建的组件
"
    })

上面列出的两种方法虽然也可以比较方便的创建组件，但是我们更希望在html中直接编写代码，然后让组件指向他们，这样的方式将更为方便，vue也为我们提供了这种方式。

Vue.component("mycom",{
        //template可以直接用元素选择器，选中要作为模板的template元素
        template:"#tmp"
    })

定义内部私有组件

var vm = new Vue({
        el:"#app",
        data:{},
        methods:{},
        //使用components定义私有组件
        components:{
            //对象名也是组件名，对象内部一个template属性使用元素选择器或者直接书写html标签
            login:{
                template:"#tmp"
            }
        }
    })

Vue组件中的data

组件中的data的作用与vue实例中的作用是一样的，不过定义的方法不太一样。

//在vue实例中新增的对象，components，在这个对象中写入私有的组件
        components:{
            mycom:{
                template:"#tmp",
                //组件中的data与vue实例中的data作用相同，不过组件的data必须是一个函数
                //并且必须返回一个对象，对象中的属性与vue实例中的data使用方式完全相同
                data:function () {
                    return {
                        name:"我是data函数返回的对象中的属性",
                    }
                }
            }
        }
    })

为什么data需要是一个方法呢？

如果data是一个对象的话，在我们创建多个组件实例时，所有的实例都会指向一个对象，如果我对组件实例1的data数据进行更改，那么组件实例2也会随之更改，但是如果data是一个方法的话，方法每次返回的对象，都是独有的，组件实例间的数据互不干涉。

Vue.component("mycom",{
        template:"#tem",
        //只有方法返回的数据才可以做到互不干涉。
        data(){
            return {
                age:0
            }
        },
        methods:{
            add(){
                this.age++;
            }
        }
    })

使用v-if与v-else进行组件之间的切换

    登陆
    注册
    
    

使用vue提供的component元素进行组件切换

component元素有 :is 属性， :is指向那个组件名称，就显示那个组件

    登陆
    注册
    
    

Vue.component("login",{
        template:"#login"
    })
    Vue.component("register",{
        template:"#register"
    })
    var vm = new Vue({
        el:"#app",
        data:{
            flag:"login"
        },
        methods:{}
    })

给组件设置动画

    登陆
    注册
    
    
        
    

父子组件的值传递

我们在使用的vue对象，可以看作成一个父组件，而在它里面的对象components创建出来的组件可以看作是它的子组件，我们经过测试可以得知，子组件是无法使用父组件的属性的，那么有什么方法可以让我们使用父组件的属性吗？

现需要在html中使用组件的时候，通过v-bind:自定义名称= "父组件的属性",将父组件的属性传递过来，然后在子组件新建一个数组，名为props 数组中保存 自定义名称 ，然后就可以在子组件使用自定义名称从而来使用父组件的属性了。有些类似函数的形参的意思。

子组件调用父组件的方法，并通过方法给父组件传值

既然子组件是可以调用父组件的属性的，那么也是可以调用父组件的方法的。

首先需要在使用子组件的额时候，添加元素 v-on:自调用触发条件="父组件方法"，然后在子组件的方法中，使用this.$emit(自调用触发条件),来触发相应的条件，父组件的相应方法就会被调用。

如果想通过方法来给父组件传递参数也是可以的，只要在this.$memit()的第二个及之后的参数传递你要传入的参数就可以，然后父组件的方法通过形参的方式来使用这些数据，this.$emit("自调用触发条件","要传递的数据")。

这是使用刚刚学的知识，做的一个发表评论的小案例

    
    
    



    
    

        
        

            评论人: {{item.name}}
            {{item.content}}
        
    

使用ref获取dom元素或者组件

vue不建议我们直接操作dom，但是给了我们选择dom的方法，就是在元素上使用ref="自定义名称",的方法，然后在vue中，可以使用 this.$refs.自定义的名称 来获取该dom元素。

    
    
    
    

        我了个去
    
    展示

var vm = new Vue({
        el:"#app",
        data:{},
        methods:{
            show(){
                //使用this.$refs进行调用相应的dom或者组件，
                //如果ref选择的是组件的话，还可以调用组件的属性和方法。
                console.log(this.$refs.tem1.show());
                console.log(this.$refs.wo.innerHTML);
            }
        },
        components:{
            com1:{
                template:"#tem",
                data(){
                    return{
                        name:"子元素"
                    }
                },
                methods:{
                    show(){
                        console.log("呵呵");
                    }
                }
            }
        }

    })

Vue-router

vue-router是非常适合构建单页面应用的，就是将路径与组件联系起来，通过访问不同的路径，来显示不同的组件，传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

如果想使用vue-router，需要在引入vue之后再引入vue-router，然后在全局中，就多了一个VueRouter构造函数，我们可以通过new这个构造函数，并在在形参中进行地址与组件之间映射的配置，来完成单页面应用的构建。

第一步，需要new VueRouter，然后在形参中进行配置

第二步，形参中的配置为一个对象，{},对象中有一个数组，名为routes，数组中有多个对象，对象中的属性分别是路径，与该路径要显示的组件，格式为{routes:[{path:"/",component:组件模板名称}]}。（注意：这里说的组件模板是Vue.extend，而不是Vue.component，一定要注意区分）

第三步,在vue对象中，添加一个属性，名为router，指向你想要使用vue-router，如 router:router

第四步，在vue控制的区域内，写入元素 router-view ，即可在路径为配置中的路径时，在该元素中就会显示相应的组件模板

    
    登陆
    注册

    
    

router-link元素与选中的router-link的高亮处理

router-link元素是为了进行路由跳转的，一般使用a标签进行跳转需要在最前面加#，而router-link的跳转使用to属性，就可以直接写地址了。

被选中的router-link的class为router-link-active,只要在css中进行这个类的处理就可以做到，选中的router-link高亮化了。

如果对这个类名不满意，还可以在new VueRouter时进行配置，在配置对象中，直接加个属性，linkActiveClass="满意的类名"。

    let router = new VueRouter({
        routes:[
            {path:"/",redirect:"/login"},
            {path:"/login",component:login},
            {path:"/register",component:register}

        ],
        //用来切换被选中的router-link的类名
        //linkActiveClass:"active"
    })

为路由切换使添加动画

直接使用transition元素包裹，使用过度类名进行过度效果

    登陆
    注册