过滤器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. MongoDB自学日记1——基本操作

    作为一个做底层及后台研发的,最近对NoSQL却产生了浓厚的兴趣,加入了一个DBA群,据说北京排的上号的DBA都在里面,然而里面基本都是Oracle系的,MySQL和MongoDB系的少之又少.学习靠不 ...

  2. 深入理解Java G1垃圾收集器

    本文首先简单介绍了垃圾收集的常见方式,然后再分析了G1收集器的收集原理,相比其他垃圾收集器的优势,最后给出了一些调优实践. 一,什么是垃圾回收 首先,在了解G1之前,我们需要清楚的知道,垃圾回收是什么 ...

  3. Hadoop集群(第3期)机器信息分布表

    1.分布式环境搭建 采用4台安装Linux环境的机器来构建一个小规模的分布式集群. 图1 集群的架构 其中有一台机器是Master节点,即名称节点,另外三台是Slaver节点,即数据节点.这四台机器彼 ...

  4. vue实现Excel文件的上传与下载

    一.前言项目中使用到比较多的关于Excel的前端上传与下载,整理出来,以便后续使用或分析他人. 1.前端vue:模板下载与导入Excel 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件 ...

  5. 《阿里巴巴Java开发手册》改名《Java开发手册》,涵盖史无前例的三大升级

    2019.06.19 <阿里巴巴Java开发手册>时隔一年,发布更新1.5.0华山版.同时,将更名为<Java开发手册>,涵盖史无前例的三大升级 1)鉴于本手册是社区开发者集体 ...

  6. JavaScript 操作 DOM 总结

    基本概念 DOM 是 JavaScript 操作网页的接口,全称为"文档对象模型"(Document Object Model).它的作用是将网页转为一个 JavaScript 对 ...

  7. Consul&Nginx&Registrator&ConsulTemplate部署高可用负载均衡

    1. Consul Server 创建consul server虚拟主机 docker-machine create consul 出现如下内容即创建成功 Running pre-create che ...

  8. 浅入深出Vue:事件处理

    上一篇的最后留下了一个 v-on的思考,也就是本章的主题:事件处理 为什么需要事件处理 在前端开发中,经常要面对各种表单.按钮.而这里面就住着一个事件:点击 (click). 前端童鞋们肯定不陌生它, ...

  9. 【JAVA NIO】java NIO

    本文是博主深入学习Netty前的一些铺垫,之前只是使用Netty,用的很粗暴,导包,上网找个DEMO就直接用,对Netty中的组件了解并不深入. 于是再此总结下基础,并对一些核心组件作如下记录: 1. ...

  10. GMap 自定义绘图

    GMap自定义绘图 gmap自带的绘图只难绘制路径,多边形,固定大小的圆.在实际开发中可能这些并不能满足自己所需.这里就需要自定义绘图 原理:继承GMapRoute或者GMapMarker类,重写里面 ...