vue.js学习1.3(1.0)

vue.js学习1.3

1.vue实例简单方法:
vm.$el -> 就是元素 vm.$data -> 就是data
vm.$mount -> 手动挂在vue程序

        var vm=new Vue({
            data:{
                a:1,
                b:2
            }
        }).$mount('#box');

等价于：

        var vm=new Vue({
            el:'#box'
            data:{
                a:1,
                b:2
            }
        })

2.循环：（1.0）
v-for=”value in data”
会有重复数据？
track-by=’索引’ 提高循环性能

ps:2.0就不需要添加track-by啦，vue2.0默认可以添加重复数据。

  <div id="box">
        <input type="button" value="添加" @click="add">
        <ul>
            <li v-for="val in arr" track-by="$index">
                {{val}}
            </li>
        </ul>
    </div>
    <script>

        var vm=new Vue({
            data:{
                arr:['apple','pear','orange']
            },
            methods:{
                add:function(){
                    this.arr.push('tomato');
                }
            }
        }).$mount('#box');

    </script>

3.过滤器:

• debounce 配合事件，延迟执行
• 数据配合使用过滤器:
  limitBy 限制几个 —-> 假如后台传了100个数据，我只要前50个
  limitBy 参数(取几个)
  limitBy (取几个 从哪开始)

     arr:[1,2,3,4,5] 
     <li v-for="val in arr | limitBy 2">
     取两个数据：1 2

• filterBy 过滤数据

 arr:['width','height','background','orange']
 <li v-for="val in arr | filterBy 'w'">
 取只含 W 的数据

• orderBy 排序
• orderBy 谁 1/-1 （如：按照年龄 1）

<li v-for="val in arr | orderBy 1">
1 ---》 正序
-1 ---》倒序

• 自定义过滤器: model ->过滤 -> view

  Vue.filter(name,function(input){
       ....
  });
  

  栗子：时间过滤器

 <div id="box">
        {{a | date}}
    </div>
    <script>
        Vue.filter('date',function(input){
            var oDate=new Date(input);
            return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
        });

        var vm=new Vue({
            data:{
                a:Date.now()
            },
            methods:{

            }
        }).$mount('#box');

    </script>

ps:在1.0中这些都是vue自带的。
但是到了2.0 —>绝大多数是要自己定义实现的。
limitBy
filterBy
…..
一些简单功能，自己通过js实现
之前json数据1.0 —– {{msg | json}}，而2.0是不需要转换的，直接就是了。

自定义过滤器――还有
但是,自定义过滤器传参

    之前: {{msg | toDou '12' '5'}}
    现在:     {{msg | toDou('12','5')}}