过滤器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. javaweb各种框架组合案例(三):maven+spring+springMVC+hibernate

    1.hibernate译为"越冬",指的是给java程序员带来春天,因为java程序员无需再关心各种sql了: 2.hibernate通过java类生成数据库表,通过操作对象来映射 ...

  2. Linux上vim的使用

    .........以下是我在使用vim时的操作经验........... (首先要了解vim主要是命令模式,输入模式,可视化模式,主要区别就是在不同模式下可以完成不同的操作,只是个编辑器,没有必要太纠 ...

  3. python trojan development 1st —— use python to send mail and caputre the screen then combine them

    import smtplib from email.mime.text import MIMEText msg_from='1@qq.com' #发送方邮箱 passwd='bd' #填入发送方邮箱的 ...

  4. Web项目性能测试结果分析

    1.测试结果分析 LoadRunner性能测试结果分析是个复杂的过程,通常可以从结果摘要.并发数.平均事务响应时间.每秒点击数.业务成功率.系统资源.网页细分图.Web服务器资源.数据库服务器资源等几 ...

  5. eclipse 工具在工作中实用方法

    不断更新记录工作中用到的实用技巧 1.快捷方式管理多个工作空间 参数: -showlocation 设置eclipse顶部显示工作空间位置 -data 文件位置 设置打开的工作空间位置 创建eclip ...

  6. springboot如何读取自定义配置项

    我们springboot项目有自己默认的配置文件,一般地由application.yml和bootstrap.yml组成,前者是模块的配置,后者是微服务的配置,后台比前者先被框架加载. 我们有时需要自 ...

  7. HBase 学习之路(六)——HBase Java API 的基本使用

    一.简述 截至到目前(2019.04),HBase 有两个主要的版本,分别是1.x 和 2.x ,两个版本的Java API有所不同,1.x 中某些方法在2.x中被标识为@deprecated过时.所 ...

  8. vagrant+xdebug

    https://segmentfault.com/a/1190000007789295

  9. 小范笔记:ASP.NET Core API 基础知识与Axios前端提交数据

    跟同事合作前后端分离项目,自己对 WebApi 的很多知识不够全,虽说不必要学全栈,可是也要了解基础知识,才能合理设计接口.API,方便与前端交接. 晚上回到宿舍后,对 WebApi 的知识查漏补缺, ...

  10. 苹果二代TWS无线耳机AirPods调研

    产品介绍 苹果AirPods二代自从2018年9月份上市以来,到现在将近一年的时间了,据江湖传闻,苹果AirPods的总售卖个数,已经超过了5000W部,这样价格的TWS耳机,能够卖那么多的量,估计也 ...