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. nvidia-smi 查看GPU信息字段解读

    第一栏的Fan:N/A是风扇转速,从0到100%之间变动,这个速度是计算机期望的风扇转速,实际情况下如果风扇堵转,可能打不到显示的转速.有的设备不会返回转速,因为它不依赖风扇冷却而是通过其他外设保持低 ...

  2. IO多路复用模型之select()函数详解

    IO复用 我们首先来看看服务器编程的模型,客户端发来的请求服务端会产生一个进程来对其进行服务,每当来一个客户请求就产生一个进程来服务,然而进程不可能无限制的产生,因此为了解决大量客户端访问的问题,引入 ...

  3. CF 888E Maximum Subsequence——折半搜索

    题目:http://codeforces.com/contest/888/problem/E 一看就是折半搜索?……然后排序双指针. 两个<m的数加起来如果>=m,一定不会更新答案.因为- ...

  4. spellchecker inspection helps locate typeos and misspelling in your code, comments and literals, and fix them in one click

    项目layout文件中出现 spellchecker inspection helps locate typos and misspelling in your code, comments and ...

  5. linux 中的局部变量、全局变量、shell 变量的总结

    系统局部变量和全局变量  一.变量分类局部变量和环境变量,局部变量只适用于当前shell,而环境变量是全局的,它适用于所有当前shell以及其派生出来的任意子进程,有些变量是用户创建的,其他的则是专用 ...

  6. 机器学习之逻辑回归(logistic回归)

    前言            以下内容是个人学习之后的感悟,转载请注明出处~ 逻辑回归 一.为什么使用logistic回归   一般来说,回归不用在分类问题上,因为回归是连续型模型,而且受噪声影响比较大 ...

  7. C#backgroundWorker用法

    1.在 WinForms 中,有时要执行耗时的操作,在该操作未完成之前操作用户界面,会导致用户界面停止响应.解决的方法就是新开一个线程,把耗时的操作放到线程中执行,这样就可以在用户界面上进行其它操作. ...

  8. c#中 这种构造方法Recer(…):this(…){ }

    指的是构造函数首先调用另外一个构造函数. class Program { static void Main(string[] args) { Person p2 = new Person(" ...

  9. [Xcode 实际操作]八、网络与多线程-(4)使用UIApplication对象发送短信

    目录:[Swift]Xcode实际操作 本文将演示如何使用应用程序单例对象,发送短信的功能. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 注:需要使用真机进行测 ...

  10. Tomcat 连接池调优

    性能较好的Tomcat 配置文件内容 <Context> <Resource name="jdbc/pgsql" type="javax.sql.Dat ...