计算属性 computed

　　当数据改变时，方法的结果也会发生改变。如果多处地方调用计算属性里面的同一个方法时，该方法只会执行一次。如图，在控制台改变data里面的num值时，虽然在多处使用computedNum方法，但该方法只执行一次。

　             　

  1. <body>
  2.     <div id="app">
  3.          <p>computedNum:{{computedNum}}</p>
  4.          <p>computedNum:{{computedNum}}</p>
  5.          <p>computedNum:{{computedNum}}</p>
  6.          <p>computedNum:{{computedNum}}</p>
  7.          <p>computedNum:{{computedNum}}</p>
  8.     </div>
  9.     <script>
  10.         var vm = new Vue({
  11.             el:"#app",
  12.             data:{
  13.                 num:1
  14.             },
  15.             computed:{
  16.                 // 如果有多处
  17.                 computedNum:function(){
  18.                     console.log("computing");
  19.                        return this.num*2;
  20.                 }
  21.             }
  22.         })
  23.     </script>
  24. </body>

侦听器 watch

　　　侦听指定属性，属性改变时执行相应的方法。

  1. <body>
  2.     <div id="app">
  3.         <p>watchNum:{{watchNum}}</p>
  4.     </div>
  5.     <script>
  6.         var vm = new Vue({
  7.             el:"#app",
  8.             data:{
  9.                 num:1,
  10.                 watchNum:""
  11.             },
  12.            // 侦听器 watch
  13.             watch:{
  14.                 // 形式1：num 一发生变化就会执行 num 后面的函数
  15.                 // 监听 num 的变化，num发生变化后，newV为变化后的新值，oldV为变化前的旧值。
  16.                 // num:function(newV, oldV){
  17.                 //     console.log("watch....");
  18.                 //     this.watchNum = newV * 2;
  19.                 // },
  20.                 // 形式2: immediate 为 true 时先执行一次 handler 函数，后续 num 发生变化时也执行handler方法。
  21.                 num:{
  22.                     immediate:true,
  23.                     //  immediate为true时，第一次执行handler函数newValue为data里面的num值，oldValue为undefined
  24.                     handler:function(newValue, oldValue){
  25.                         console.log("watch....");
  26.                         this.watchNum = newValue*2
  27.                     }
  28.                 }
  29.  
  30.             },
  31.         })
  32.     </script>
  33. </body>

方法 methods

　　在 methods 里面定义的方法可以在模板表达式里面使用。与计算属性不同的是，每当方法里面的数据发生改变，每个使用该方法的地方都会调用一次该方法。如图所示有4处地方调用了该方法，改变 num 值，执行了4次。

  1. <body>
  2.     <div id="app">
  3.         <p>countNum:{{countNum()}}</p>
  4.         <p>countNum:{{countNum()}}</p>
  5.         <p>countNum:{{countNum()}}</p>
  6.         <p>countNum:{{countNum()}}</p>
  7.     </div>
  8.     <script src="./vue.js"></script>
  9.     <script>
  10.         var vm = new Vue({
  11.             el:"#app",
  12.             data:{
  13.                 num:1
  14.             },
  15.             // 里面的方法可以在模板表达式里面使用
  16.             methods:{
  17.                 countNum:function(){
  18.                     console.log("counting...");
  19.                     return this.num*2
  20.                 }
  21.             }
  22.         })
  23.     </script>
  24. </body>

计算属性(computed)+侦听器（watch）+ 方法（methods）的更多相关文章

  1. Vue-比较方法、计算属性和侦听器

    分别用方法.计算属性和侦听器实现当fristName和lastName改变时,fullName跟着改变. 一.方法: html: <div id="app"> {{fu ...

  2. VueJs(7)---计算属性和侦听器

    计算属性和侦听器 一. 概述 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="exampl ...

  3. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

  4. vue计算属性和侦听器

    一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...

  5. 一起学Vue之计算属性和侦听器

    概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...

  6. Vue.js 生命周期、计算属性及侦听器

    一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...

  7. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  9. vue基础——计算属性和侦听器

    计算属性——介绍 模板内的表达式非常便利,但是设计他们的初衷是用于简单计算的.在模板中放入太多的逻辑会让模板太过沉重切难以维护.如下: <div id="example"&g ...

随机推荐

  1. JavaScript学习总结（五）原型和原型链详解

    转自:http://segmentfault.com/a/1190000000662547 私有变量和函数 在函数内部定义的变量和函数,如果不对外提供接口,外部是无法访问到的,也就是该函数的私有的变量 ...

  2. python实现经典冒泡算法

    利用for循环,完成a=[1,7,4,89,34,2]的冒泡排序 冒泡排序:小的排在前,大的排在后面

  3. 最简化的DirectX 11开发环境的配置 VS2010

    转载自:http://blog.csdn.net/zhmxy555/article/details/7672101 在编写基于DirectX 11的应用程序之前,我们当然需要在IDE中加入Direct ...

  4. 挑战中英实时语音翻译——Skype Translator 中文预览版登陆中国

    Translator 中文预览版登陆中国" title="挑战中英实时语音翻译--Skype Translator 中文预览版登陆中国"> 今天,我们正式宣布在中国 ...

  5. js Array 中的 map, filter 和 reduce

    原文中部分源码来源于:JS Array.reduce 实现 Array.map 和 Array.filter Array 中的高阶函数 ---- map, filter, reduce map() - ...

  6. Selenium的Web自动化测试（送源码）

    8.1  Selenium自动化测试准备 1．Selenium介绍 Selenium是一个Web开源自动化测试框架,页面级操作,模拟用户真实操作,API从系统层面触发事件. Selenium 1.0  ...

  7. Dykin's blog

    回归分析是一种很重要的预测建模技术.主要是研究自变量与因变量之间的因果关系.本文将会从数学角度与代码角度分析不同类型的回归.当你想预测连续型的非独立变量,或者对一系列独立变量或输入项有所反应时,就会使 ...

  8. 注册免费试用12个月的亚马逊AWS云计算服务

    注册: 注册地址 点击页面中间的创建免费用户,进入下一步页面: 然后就是填写各种个人信息的页面了: 填写付款信息: 付款信息会进行一个电话验证,这里需要先填写对应的电话号码和验证码,然后点立刻呼叫我, ...

  9. Swift 进阶 第 4 课 集合类型协议

    • Read 序列 一个序列 (sequence) 代表的是一系列具有相同类型 的值,你可以对这些值进行迭代.遍历一个序列最简单的方式是使用 for 循环: 123 for element in so ...

  10. PS4游戏将登陆PC：一曲属于主机的悲歌

    ​​ ​ 曾经,红白机.PS游戏机等成为一代人难以磨灭的记忆.而随后的索尼PS3.微软Xbox 360.任天堂Wii U等,也称霸了次时代主机时代,成为家庭娱乐的中心.但面对着依托于PC和智能移动终端 ...