对vue的初步学习(二)

案例:vue制作weibo
交互

vue-> 1.0
vue-resource ajax php
服务器环境(node)

this.$http.get()/post()/jsonp()

this.$http({
url:地址
data:给后台提交数据,
method:'get'/post/jsonp
jsonp:'cb' //cbName
});
----------------------------------
vue事件:

vue事件:
@click=""
数据:

添加一条留言：

获取某一页数据:
getPageData(1);

详细见案例
----------------------------------
vue生命周期:
钩子函数:

created -> 实例已经创建 √
beforeCompile -> 编译之前
compiled -> 编译之后
ready -> 插入到文档中 √

beforeDestroy -> 销毁之前
destroyed -> 销毁之后
----------------------------------
用户会看到花括号标记:

v-cloak 防止闪烁, 比较大段落
----------------------------------
<span>{{msg}}</span> -> v-text
{{{msg}}} -> v-html
----------------------------------
ng: $scope.$watch

 <div id="box">
        {{msg}}
    </div>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                msg:'well'
            },
            created:function(){
                alert('实例已经创建');
            },
            beforeCompile:function(){
                alert('编译之前');
            },
            compiled:function(){
                alert('编译之后');
            },
            ready:function(){
                alert('插入到文档中');
            },
            beforeDestroy:function(){
                alert('销毁之前');
            },
            destroyed:function(){
                alert('销毁之后');
            }
        });

        /*点击页面销毁vue对象*/
        document.onclick=function(){
            vm.$destroy();
        };
    </script>

计算属性的使用:
computed:{
b:function(){ //默认调用get
        return 值
           }
            }
--------------------------
computed:{
        b:{
        get:
        set:
          }
          }

<div id="box">
        a => {{a}}
        <br>
        b => {{b}}
    </div>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:1
            },
            computed:{
                b:{
                    get:function(){
                        return this.a+2;
                    },
                    set:function(val){
                        this.a=val;
                    }
                }
            }
        });

        document.onclick=function(){
            vm.b=10;
        };
    </script>

* computed里面可以放置一些业务逻辑代码，一定记得return
---------------------------------
vue实例简单方法:
vm.$el -> 就是元素
vm.$data -> 就是data
vm.$mount -> 手动挂在vue程序

vm.$options -> 获取自定义属性
vm.$destroy -> 销毁对象

vm.$log(); -> 查看现在数据的状态

---------------------------------
循环：
v-for="value in data"

会有重复数据？
track-by='索引' 提高循环性能

track-by='$index/uid'

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

---------------------------------
过滤器:
vue提供过滤器:
capitalize uppercase currency....

debounce 配合事件，延迟执行
数据配合使用过滤器:
limitBy 限制几个
limitBy 参数(取几个)
limitBy 取几个 从哪开始

filterBy 过滤数据
filterBy ‘谁’

orderBy 排序
orderBy 谁 1/-1
1 -> 正序
2 -> 倒序

<div id="box">
   <ul>
       <!--limitBy 参数(取几个)
        limitBy 取几个  从哪开始-->
       <li v-for=" val in arr | limitBy 2 1">{{val}}</li>
   </ul>
    <script>
        var vm=new Vue({
            data:{
                arr:[1,2,3,4,5]

            },
            methods:{

            }
        }).$mount('#box')
    </script>

</div

自定义过滤器: 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>

过滤html标记

双向过滤器:*
Vue.filter('filterHtml',{
read:function(input){ //model-view
return input.replace(/<[^<+]>/g,'');
},
write:function(val){ //view -> model
return val;
}
});

<script>
        //<h2>welcome</h2>
        Vue.filter('filterHtml',{
            read:function(input){ //model-view
                alert(1);
                return input.replace(/<[^<]+>/g,'');
            },
            write:function(val){ //view -> model
                console.log(val);
                return val;
            }
        });
        window.onload=function(){
            var vm=new Vue({
                data:{
                    msg:'<strong>welcome</strong>'
                }
            }).$mount('#box');
        };

    </script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="msg | filterHtml">
        <br>
        {{{msg}}}
    </div>

数据 -> 视图
model -> view

view -> model
---------------------------------
v-text
v-for
v-html
指令: 扩展html语法

自定义指令:
属性:

Vue.directive(指令名称,function(参数){
             this.el -> 原生DOM元素
     });

<div v-red="参数"></div>

指令名称: v-red -> red

* 注意: 必须以 v-开头

拖拽:
-------------------------------
自定义元素指令:（用处不大）
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
           }
     });
------------------------------------------------
@keydown.up
@keydown.enter

@keydown.a/b/c....

自定义键盘信息:
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;

<script>
        //ctrl 获取键码->17
        /*document.onkeydown=function(ev){
            console.log(ev.keyCode);
        };*/
        Vue.directive('on').keyCodes.ctrl=17;  //
        Vue.directive('on').keyCodes.myenter=13;

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    a:'blue'
                },
                methods:{
                    show:function(){
                        alert(1);
                    }
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <input type="text" @keydown.myenter="show | debounce 2000">  
    </div>

------------------------------------------------
监听数据变化:
vm.$el/$mount/$options/....

vm.$watch(name,fnCb); //浅度
vm.$watch(name,fnCb,{deep:true}); //深度监视

 <script>

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    json:{name:'strive',age:16},
                    b:2
                }
            });

            vm.$watch('json',function(){
                alert('发生变化了');
            },{deep:true});

            document.onclick=function(){
                vm.json.name='aaa';
            };
        };

    </script>
</head>
<body>
    <div id="box">
        {{json | json}}
        <br>
        {{b}}
    </div>

------------------------------------------------

下期:

vue组件:
组件间各种通信
slot
vue-loader webpack .vue
vue-router