1.过滤器 filters:在不改变的data的情况下输出前端页面需要的格式数据。例如将小数过滤为整数等。filters是一个对象,里边定义一个function方法,function传入一个参数,function的作用是对数据进行相关处理。

  

运行结果为:

2. 计算属性 computed:当数据需要经过处理计算后才能得到结果的,我们可以用这个属性。例如求和等。computed是一个对象,里边定义一个function方法,function传入一个参数,function的作用是对数据进行相关处理计算等。 计算属性 computed 用法更简洁。

运行结果为:

3.方法 methods:在 methods 中,我们可以定义一些方法供组件使用。例如给定一个数据num,实现点击按钮数据num+1,可以定义一个puls()方法在methods中,然后将puls()绑定在按钮的点击事件上;

运行结果:

点击加1按钮1次:

再点击加1按钮1次:

4.观察 watch:watch是Vue提供的用于检测指定的数据发生改变的api,类似于事件监听。可以用methods中的例子来监听数字num。

运行结果:

点击加1按钮1次:

再点击加1按钮1次:

Vue实例的4个常用选项的更多相关文章

  1. Vue实例和方法

    github地址:https://github.com/manlili/vue_learn里面的lesson03 一 实例 每个 Vue 实例都会代理其 data 对象里所有的属性,改变data,vu ...

  2. Vue 实例以及生命周期

    最简单的 Vue 实例 //html <div id="app"> {{message}} </div> //javascript var vm = new ...

  3. Vue实例 中的常用配置项

    创建Vue实例时,使用 new Vue ({//配置项}) 或者 组件定义中 export default {//配置项},所有的Vue组件都是Vue实例,并且接受相同的选项对象(一些根实例特有的选项 ...

  4. Vue实例对象的数据选项

    前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...

  5. Vue实例对象的数据选项(火柴)

    前言 一般地,当模板内容比较简单的时候,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项. dat ...

  6. Vue实例初始化的选项配置对象详解

    Vue实例初始化的选项配置对象详解 1. Vue实例的的data对象 介绍 Vue的实例的数据对象data 我们已经用了很多了,数据绑定离不开data里面的数据.也是Vue的核心属性. 它是Vue绑定 ...

  7. vue单文件组件data选项的函数体获取vue实例对象

    因配置的关系,导致 vue的data选项中存在事件.而事件无法获取 vue 的实例对象:项目是单文件形式的,以下代码只是例子 new Vue({ el:..., data:{ a: { onevent ...

  8. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  9. Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

随机推荐

  1. SecureCRT远程连接虚拟机CentOS的三种方式

    当在VMware虚拟机中将CentOS安装成功后,会在win7系统中模拟出两个虚拟网卡:VMnet1和VMnet8,我们来查看一下,点击“控制面板—>查看网络状态和任务—>更改适配器设置” ...

  2. pdf2swf 转换时报This file is too complex to render- SWF only supports 65536 shapes at once

    ERROR   ID Table overflow ERROR   This file is too complex to render- SWF only supports 65536 shapes ...

  3. [poj2778]DNA Sequence(AC自动机+矩阵快速幂)

    题意:有m种DNA序列是有疾病的,问有多少种长度为n的DNA序列不包含任何一种有疾病的DNA序列.(仅含A,T,C,G四个字符) 解题关键:AC自动机,实际上就是一个状态转移图,注意能少取模就少取模, ...

  4. Git(一)

    Git概念 Git其实是一种分布式版本控制系统,与CVS,Subversion等集中化的版本控制系统相对.它主要有几个特点: • 速度快 • 简单的设计 • 对非线性开发模式的强力支持(允许上千个并行 ...

  5. eclipse编译Jmeter源码

    1.在apache官网下载源码和安装包   http://jmeter.apache.org/ 2.  解压     解压安装包和源码包,     将安装包apache-jmeter-3.3 里lib ...

  6. Flutter实战视频-移动电商-51.购物车_Provide中添加商品

    51.购物车_Provide中添加商品 新加provide的cart.dart页面 引入三个文件.开始写provide类.provide需要用with 进行混入 从prefs里面获取到数据,判断有没有 ...

  7. JSBridge框架解决通信问题实现移动端跨平台开发

    一.跨平台开发是趋势 目前主流的移动端平台主要是Android和iOS,为了尽可能复用代码和节省开发成本,各大巨头都开发了自己的跨平台框架,比如Facebook的React-Native.阿里的Wee ...

  8. 1079 Total Sales of Supply Chain (25 分)

    A supply chain is a network of retailers(零售商), distributors(经销商), and suppliers(供应商)-- everyone invo ...

  9. 使用fastadmin的页面跳转模板

    1.效果图 2.修改tp默认跳转模板文件( /thinkphp/tpl/dispatch_jump.tpl ),将文件中的内容全部替换成下面的内容然后保存即可,注意替换语言包和图片路径 {__NOLA ...

  10. 跳转到另一个APP

    看看这个代码: http://code4app.com/codesample/4fcc512d6803fae60b000002 inApp跳转,不过需要Nimbus类库. 要跳转到另一个APP,需要另 ...