过滤器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. 32个Python爬虫项目让你一次吃到撑

    整理了32个Python爬虫项目.整理的原因是,爬虫入门简单快速,也非常适合新入门的小伙伴培养信心.所有链接指向GitHub,祝大家玩的愉快~O(∩_∩)O WechatSogou [1]- 微信公众 ...

  2. Python 爬虫从入门到进阶之路(八)

    在之前的文章中我们介绍了一下 requests 模块,今天我们再来看一下 Python 爬虫中的正则表达的使用和 re 模块. 实际上爬虫一共就四个主要步骤: 明确目标 (要知道你准备在哪个范围或者网 ...

  3. Appium+python自动化(十一)- 元素定位秘籍助你打通任督二脉 - 下卷(超详解)

    简介 宏哥看你骨骼惊奇,印堂发亮,必是练武之奇才! 按照上一篇的节目预告,这一篇还是继续由宏哥给小伙伴们分享元素定位,是不是按照上一篇的秘籍修炼,是不是感觉到头顶盖好像被掀开,内气从头上冒出去,顿时觉 ...

  4. angular安装

    安装时间:20190703安装环境:win10 1 安装Nodejs 1.1 下载地址:https://nodejs.org/en/ 1.2 下载完成之后双击安装,安装完成之后无需配置环境变量(安装的 ...

  5. VMware Tools安装,设置centos全屏、可拖入文件功能

    Mr·Hu原创作品.转载请注明出处http://www.cnblogs.com/huxiuqian/p/7843126.html 由于在VM中使用小屏太不方便,所以进行全屏化,亦可进行文件共享. 1. ...

  6. python argparse模块的使用

    import argparse def get_parse(): # 初始化 parse = argparse.ArgumentParser() # 添加选项,类型为str,默认为空 parse.ad ...

  7. 基于STM32之UART串口通信协议(三)接收

    一.前言 1.简介 回顾上一篇UART发送当中,已经讲解了如何实现UART的发送操作了,接下来这一篇将会继续讲解如何实现UART的接收操作. 2.UART简介 嵌入式开发中,UART串口通信协议是我们 ...

  8. Appium+python自动化(十五)- Android 这些基础知识,你知多少???(超详解)

    简介 前边具体操作和实战已经讲解和分享了很多了,但是一些android的一些基础知识,你又知道多少了,你都掌握了吗?这篇就由宏哥给小伙伴们既是一个分享,又是对前边的一次总结.为什么要对这些做一个简单的 ...

  9. STM32学习的一些实例

    第一讲:修炼STM32之乾坤大挪移术—— 如何用DMA神器搬运数据DMA,即直接存储器访问.DMA 传输方式无需 CPU 直接控制传输,通过硬件为 RAM 与 I/O 设备开辟一条直接传送数据的通路, ...

  10. CentOS java生成文件并赋予权限的问题

    2.检查文件是否允许: file.canExecute(); – return true, file is executable; false is not. file.canWrite(); – r ...