2、vueJs基础知识02

vue生命周期:
　　钩子函数:

　　created -> 实例已经创建 √
　　beforeCompile -> 编译之前
　　compiled -> 编译之后
　　ready -> 插入到文档中（相当于window.onload，页面初始化写在此处） √

　　beforeDestroy -> 销毁之前
　　destroyed -> 销毁之后

防止双大括号闪烁

　　v-cloak  适用于大段落

　　v-text   适用于小段文字

　　v-html

计算属性

　　angular中使用$scope.$watch进行监听变化

　　vue中计算属性的使用：

   computed:{
        b:function(){    //默认调用get
            return 值（依赖于data中的数据）
        }
    }
    --------------------------
    完整用法（get和set方法）
    computed:{
        b:{
            get:function(){},
            set:function(){}
        }
    }

    * computed里面可以放置一些业务逻辑代码，一定记得return

vue实例简单方法:
　　vm.$el -> 就是绑定实例的元素
　　vm.$data -> 就是实例的data数据
　　vm.$mount -> 手动挂载vue实例到元素上（同el配置项）

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

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

循环重复问题
　　v-for="value in data"

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

　　track-by='$index/uid'

过滤器

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

        debounce    配合事件，延迟执行（加上延迟时间参数）
    数据（数组）配合使用过滤器:
        limitBy    限制几个（后面加参数）
        limitBy 参数(取几个)
        limitBy 取几个  从哪开始（两个参数）

        filterBy   过滤数据（后面的参数是包含的过滤条件，类似模糊查询）
        filterBy ‘谁’

        orderBy    排序（按首字母排序）
        orderBy 谁 1/-1 ）（两个参数，按谁排，正倒序）
            1  -> 正序
            -1  -> 倒序

    自定义过滤器:  model ->过滤 -> view
        Vue类上有方法filter
        Vue.filter(name,function(input){
            //input是要处理的内容，后面也可以有传参数
        });

    时间转化器
    过滤html标记

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

    数据 -> 视图
    model -> view

    view -> model

自定义属性指令

　　指令: 扩展html的功能语法 （可以做dom操作，拖拽也只能在指令里面实现）v-text ， v-for， v-html

　　定义方法：

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

　　使用（可传参数）：

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

　　　　指令名称: v-red -> red(v-去掉，使用的时候必须以v-开头)

　　　　* 注意: 必须以 v-开头

　　　　拖拽实现代码:　　　　

        Vue.directive('drag',function(){
　　　　　　　var oDiv=this.el;
            oDiv.onmousedown=function(ev){
                var disX=ev.clientX-oDiv.offsetLeft;
                var disY=ev.clientY-oDiv.offsetTop;

                document.onmousemove=function(ev){
                    var l=ev.clientX-disX;
                    var t=ev.clientY-disY;
                    oDiv.style.left=l+'px';
                    oDiv.style.top=t+'px';
                };
                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                };
            };
        });
　　　　　//使用
　　　　　<div v-drag></div>

　　自定义元素指令:（用处不大） 后面有组件代替
　　　　Vue.elementDirective('zns-red',{
　　　　　　bind:function(){
　　　　　　　　this.el.style.background='red';
　　　　　　}
　　　　});

　　　　使用：

　　　　<zns-red></zns-red>

自定义键盘信息　　　　

　　vue提供的：

　　　　@keydown.up
　　　　@keydown.enter

　　自定义例如@keydown.a/b/c....    用on绑定

　　　　Vue.directive('on').keyCodes.ctrl=17;
　　　　Vue.directive('on').keyCodes.myenter=13;

监听数据变化

　　vm.$el/$mount/$options/....

　　vm.$watch(name,fnCb); //浅度 name是数据的名字，fnCb是回调函数
　　vm.$watch(name,fnCb,{deep:true}); //深度监视 引用类型的数据