Vue实例的4个常用选项
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个常用选项的更多相关文章
- Vue实例和方法
github地址:https://github.com/manlili/vue_learn里面的lesson03 一 实例 每个 Vue 实例都会代理其 data 对象里所有的属性,改变data,vu ...
- Vue 实例以及生命周期
最简单的 Vue 实例 //html <div id="app"> {{message}} </div> //javascript var vm = new ...
- Vue实例 中的常用配置项
创建Vue实例时,使用 new Vue ({//配置项}) 或者 组件定义中 export default {//配置项},所有的Vue组件都是Vue实例,并且接受相同的选项对象(一些根实例特有的选项 ...
- Vue实例对象的数据选项
前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...
- Vue实例对象的数据选项(火柴)
前言 一般地,当模板内容比较简单的时候,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项. dat ...
- Vue实例初始化的选项配置对象详解
Vue实例初始化的选项配置对象详解 1. Vue实例的的data对象 介绍 Vue的实例的数据对象data 我们已经用了很多了,数据绑定离不开data里面的数据.也是Vue的核心属性. 它是Vue绑定 ...
- vue单文件组件data选项的函数体获取vue实例对象
因配置的关系,导致 vue的data选项中存在事件.而事件无法获取 vue 的实例对象:项目是单文件形式的,以下代码只是例子 new Vue({ el:..., data:{ a: { onevent ...
- 05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
随机推荐
- css 内容超出宽度自动换行
1. word-break:break-all;只对英文起作用,以字母作为换行依据2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 PS:要设定宽度!
- AQS与重入锁ReetrantLock原理
一.AQS原理 AQS(AbstractQueuedSynchronizer)队列同步器是用来构建锁.同步组件的基础框架. AQS内部通过一个volatile int类型的成员变量state控制同步状 ...
- 一种C#开发ActiveX的思路
由于某些原因,不得不在C#下开发ActiveX插件,而这会带来很多问题,主要有无法在线安装.无法自动更新.由于本人水平有些,这两个问题不一定是这样,如果有大侠知道C#下开发ActiveX插件可实现在线 ...
- Numbers Exchange
题意: Eugeny有n张卡片,他希望和Nikolay交换一些卡片使得他拥有的奇数数字和偶数数字的卡片数目一样,且所有数字都不同. Nikolay有m张卡片,分别写着1到m.问最少交换几次,能够满足要 ...
- CodeForces 1098E. Fedya the Potter
题目简述:给定长度为$n \leq 5\times 10^4$的序列$a_1, a_2, \dots, a_n \leq 10^5$.将$\gcd(a_l, a_{l+1}, \dots, a_r) ...
- 启动Android模拟器问题集锦
1.新建AVD时,报错“no CPU/ABI system image available for this target”, 解决:在SDK Manager中下载System Image 2.Sys ...
- Hibernate使用Query进行查询
错误结果如下 Exception in thread "main" org.hibernate.hql.internal.ast.QuerySyntaxException: new ...
- Android-毛笔的探索与开发
前言 这篇文章主要是关于移动端毛笔的开发,在平板上有着书写毛笔字贴的效果. 介绍关于毛笔的算法思路. 项目github地址 算法思路分析 曲线拟合算法 利用曲线拟合算法增加虚拟的点,使得笔迹更加光滑 ...
- 使用you-get下载网页小视频(实际上你可以下载任意你想要的web网页中的内容)
1. 什么是you-get? You-Get是一个小型的命令行实用程序,用于从Web下载媒体内容(视频,音频,图像),如果没有其他方便的方法可以尝试使用you-get. 2.安装you-get 打开命 ...
- DirectX实现球面纹理映射
http://www.cnblogs.com/graphics/archive/2011/09/13/2174022.html DirectX实现球面纹理映射 介绍 球面纹理映射就是将一个平面纹理映射 ...