自定义指令与过滤器

vue生命周期（1.0及以下）:

 钩子函数:（插件自带）

     created -> 实例已经创建 √

     beforeCompile -> 编译之前

     compiled -> 编译之后

     ready -> 插入到文档中 √

     beforeDestroy -> 销毁之前

     destroyed -> 销毁之后

用户会看到花括号标记:

v-cloak 防止闪烁, 比较大段落

{{msg}} -> v-text

{{{msg}}} -> v-html

计算属性的使用:

 computed:{

     b:function(){ //默认调用get

     return 值

     }

 }

---

 computed:{

     b:{

     get:

     set:

     }

 }

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

---

vue实例简单方法:

 vm.$el -> 就是元素

 vm.$data -> 就是data

 vm.$mount -> 手动挂在vue程序

 vm.$options -> 获取自定义属性

 vm.$destroy -> 销毁对象

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

---

循环（1.0的版本，2.0中已经弃用）：

 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(name,function(input){

 });

---

    v-text

    v-for

    v-html

    指令: 扩展html语法

自定义指令:

 属性:

 Vue.directive(指令名称,function(参数){

     this.el -> 原生DOM元素

 });

 


 指令名称: v-red -> red

# * 注意: 必须以 v-开头

自定义元素指令:（用处不大）

     Vue.elementDirective('zns-red',{

         bind:function(){

         this.el.style.background='red';

         }

     });