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({