过滤器filter:

1、将数据进行添油加醋的操作。

2、过滤器分两种: 组件内的过滤器(组件内有效)、 全局过滤器

组件内:filters:{过滤器名:过滤器函数fn},fn内通过return 返回最终数据。 例如 filters:{transName:function(){reteurn ''}}

全局过滤器: Vue.filter(过滤器名:过滤器函数fn);例如:Vue.filter('transName',function(arg....){return ''})

3、过滤器是先注册再使用

4、用法 {{变量|过滤器名(参数1,参数2......)}}

监听watch(单个),cumputed(监听多个)

1、用法watch(key属于data中声明的变量名,value是监视后的行为)

watch:{

  myName:function(newValue,oldValue){

  }

}

注:如果watch监视复杂类型的数据 比如users:[{name:''abc}],  如果按上述监听,怎么监听失败,因为对于复杂类型的数据,watch监听的是对象的地址,而不是属性的值。所以需要

深度监听。一般复杂类型 Object || array,用法如下:

watch:{

  deep:true,

  handler:function(newValue,oldValue){

  }

}

2、cumputed(监听多个) 用法

例如 要实现   a+b = {{result}}的例子,a、b分别代表的是data里面声明的变量,a\b任何一个的变化都会影响result的输出,这时可以使用cumputed,

cumputed:{

  //监听result属性

  result:function(){

    //监视对象,凡是写在该方法内的所有this.变量,都会被监听执行该方法。

    return this.a+this.b;

  }

}

git上有开发的项目作为例子,有兴趣的可以下载学习。源代码已上传git:Git地址

                              技术交流群:

vue教程(二)--过滤器和监视改动功能的更多相关文章

  1. vue教程2-06 过滤器

    vue教程2-06 过滤器 过滤器: vue提供过滤器: capitalize uppercase currency.... <div id="box"> {{msg| ...

  2. Vue教程:过滤器filters(五)

    Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...

  3. vue教程二 vue组件(3)

    给属性传递数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  4. vue教程二 vue组件(2)

    每个组件都可以有自己的data.methods.computed和您之前看到的所有内容—就像Vue实例本身一样. 您可能已经注意到了组件和Vue实例之间的一个细微差别:Vue实例上的数据属性是一个对象 ...

  5. vue教程二 vue组件(1)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script ...

  6. vue教程2-07 微博评论功能

    vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  7. Vue学习之过滤器和自定义指令小结(三)

    过滤器: 过滤是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰.过滤器就是过滤用的工具.渲染数据用的!!! 我们需要知道的是: 1.Vue中的过滤器不能 ...

  8. vue教程1-07 模板和过滤器

    vue教程1-07 模板和过滤器 一.模板 {{msg}} 数据更新模板变化 {{*msg}} 数据只绑定一次 {{{msg}}} HTML转意输出 <!DOCTYPE html> < ...

  9. PySide——Python图形化界面入门教程(二)

    PySide——Python图形化界面入门教程(二) ——交互Widget和布局容器 ——Interactive Widgets and Layout Containers 翻译自:http://py ...

随机推荐

  1. Qt优雅地结束线程(两种方法都是用Mutex锁住bool变量进行修改,然后由bool变量控制耗时动作的退出,即正常退出)

    如果一个线程运行完成,就会结束.可很多情况并非这么简单,由于某种特殊原因,当线程还未执行完时,我们就想中止它.不恰当的中止往往会引起一些未知错误.比如:当关闭主界面的时候,很有可能次线程正在运行,这时 ...

  2. return Json对象时序列化错误

    当要序列化的表与另一个表是一对多的关系是,表1序列化时会找到另一个表2关联的字段,会将另一个表2进行序列化,然后表2中也有一个字段与表1关联,这样序列化就会产生循环序列化. 在网上进行搜索,其中大多数 ...

  3. postgres数据库小记

    因为工作中需要查询其他部门数据库,刚好是postgres数据库,用python链接的话,可以用psycopg2库,具体用法其实和MysqlDB是一样的,就是安装的时候遇到点问题. 安装的时候,提示: ...

  4. 如何调整cookie的生命周期

    一.什么是cookie 形象比喻成“网络身份证” 指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密). (1)记录信息的盒子(2)识别每一个网络用户的证件 ...

  5. 基于 Kong 和 Kubernetes 的 WebApi 多版本解决方案

    前言 大家好,很久没有写博客了,最近半年也是比较的忙,所以给关注我的粉丝们道个歉.去年和朱永光大哥聊的时候提了一下我们的这个方案,他说让我有空写篇博客讲一下,之前是非常的忙,所以这次趁着有些时间就写一 ...

  6. iOS App开发的那些事儿1:如何建立合适的规范

    <iOS App开发的那些事儿>系列文章从更宏观的角度出发,不仅仅局限于具体某个功能.界面的实现,而是结合网易云信iOS端研发负责人多年的经验,从如何优化现有代码的角度出发,深度分析如何创 ...

  7. Scala 学习之路(三)—— 流程控制语句

    一.条件表达式if Scala中的if/else语法结构与Java中的一样,唯一不同的是,Scala中的if表达式是有返回值的. object ScalaApp extends App { val x ...

  8. java基础知识总结(一)

    满满的干货=-= (一)环境变量的作用: 每个人刚开始学习java的时候,肯定都是安装JDK,配置环境变量,怎么配置网上教程很多很多,但是为什么这么配置呢? 我配置的环境变量: JAVA_HOME:C ...

  9. 简单DI

    <?php class DI { private $container; public function set($key, $obj, ...$args) { $this->contai ...

  10. Java并发框架:Executor

    介绍 随着当今处理器中可用的核心数量的增加, 随着对实现更高吞吐量的需求的不断增长,多线程 API 变得非常流行. Java 提供了自己的多线程框架,称为 Executor 框架. 1. Execut ...