Vue新手入门-1

基于vue2.5.9版本

数据绑定v-bind

像img这样的标签，直接在src里面写<img src="{{picimg}}" alt="">；是不正确的，这里需要用v-bind来绑定；简写为：src，同时还没有{{ }}`；即：

<img :src="picimg" :alt="desc">

需要字符串拼接可以写为：

<img v-bind:src="['xxx(需要拼接的字符串)'+item.picurl]" alt="" width="100%" height="245" />

或者：

    <a v-bind='{href:"https://www.caitou.com/index/"+id}'>菜头</a>

过滤器

vue1.0有许多自定义API过滤器，但是vue2.0这些都删除掉了；所以，如果想用一些方法需要直接去实现；

局部过滤器

var vm=new Vue({
        el:"#app",
        data:{
            color:"red",
            names:'<h1>你好</h1>'，
            list2:[
                {id:1,name:'奔驰',ctime:new Date},
                {id:2,name:'宝马',ctime:new Date},
                {id:3,name:'吉利',ctime:new Date},
                {id:4,name:'BYD',ctime:new Date},
            ]

        },
        filters:{  //过滤器
            detefmt:function (input) {
                var res='';
                var date=new Date();
                var y=input.getFullYear();
                var m=input.getMonth();
                var d=input.getDate();
                res=y+'-'+m+'-'+d;
                return res;
            }
        },
        methods:{  //事件
            kd:function () {
                console.log('keydown');
            },
        },
    })

使用方法：{{数据 | 过滤器函数(参数)}}

    <table id="tb">
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        <tr v-show="list2.length ==0">
            <td colspan="4">列表无数据</td>
        </tr>
        <tr v-for="item in list2">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
                <!--过滤器-->
            <td>{{item.ctime | detefmt('-')}}</td>  
            <td>
                <a href="#" @click='delData(item.id)'>删除</a>
            </td>
        </tr>
    </table>

全局过滤器

使用方法：Vue.filter(过滤器函数名,function (参数) { })

Vue.filter('detefmt',function (input,type) {
        var res='';
        var date=new Date();
        var y=input.getFullYear();
        var m=input.getMonth();
        var d=input.getDate();
        if(type=="-"){
        res=y+'-'+m+'-'+d+'03:00:13';
        }else {
            res=y+'-'+m+'-'+d;
        }
        return res;
    })
    var vm=new Vue({