记录第一次使用vue，用来自己看看

1.完整代码

    
        
        
        
    
    
        

            

                

                    
参加活动
                    
阵地资源预约
                    
服务点单
                    
自主点单
                

            
            

                

                    
按地区:
                    

                        
全部
                        
{{val}}
                    
                
                

                    
按类别:
                    

                        
全部
                        
{{val}}
                    
                
            
            
          
                
                

                     

                
            
        
    
    
    
    
    
    
    
    
    

以下是vue.ajax.js

/**
 * 用vue-resource.js简易封装的ajax请求
 * 依赖vue.js,vue-resource.js
 * type："get"或者"post"字符串
 * vm：vue对象
 * url：请求地址
 * param：参数对象
 *  fn 回调方法
 * 
 */
function ajaxVue(type,vm,url,param,fn){
    if (type=="get"||type=="GET"){
        //发送get请求
        vm.$http.get(
            url,
            {params :param,}
            ).then(function(res){
                fn(res.body);
        },function(){
            console.log("ajax fail")
        });
        
    }else if(type=="post"||type=="POST"){
        //发送 post 请求
        vm.$http.post(
        url,
        param,
        {emulateJSON:true}).then(function(res){
            fn(res.body);
        },function(res){
            console.log("ajax fail");
        });
    }else{
        console.log("ajax 请求类型错误");
    }
    
    
}

2.Vue对象中的一些属性说明

el//模板单元 ，如果使用类选择器选择将只会渲染第一个div
data//需要使用到的变量
methods//需要使用到的方法定义 ，js可以直接通过vm.方法() 调用;
watch//监听指定变量时触发的方法
filters//过滤器，显示变量时对变量进行格式化
methods//等生命周期钩子，Vue对象到指定生命周期时触发该方法 如初始化请求接口要使用该属性

3.一些备忘技巧

1.如图需求：点击一个标签(动态加载)改变颜色，其他标签变灰

{{val}}

在data中定义type属性用以标记（changeType方法实现）当前点击的标签，key是每一个标签的顺序码，当某一个标签的key和type值相同时表示标签被选中给予active的class改变属性
当然，在改变标签颜色同时需要把选择的type当作参数重新请求列表数据

2.vue中使用laydate

laydate依赖jquery但是很好用

//利用生命周期钩子在vue完成加载后初始化
mounted:function(){
            var that=this;
            laydate.render({
                elem: '#order-date',
                theme: '#0082D9',
                min: 1,
                done: function(value, date){
                    that.orderDate=value;
                    that.orderStatus=0;
                },
                value:that.orderDate
            }); 
        },