<body>

    <div id="root">

        {{fullName()}}

        {{age}}

    </div>

    <script>

        var vm = new Vue({

            el: "#root",

            data:{

                firstName:"Yu",

                lastName:"Lee",

                age:21,

            },

            //方法一：计算属性

            computed:{

                fullName:function () {

                    console.log("计算了一次");

                    return this.firstName +" "+this.lastName;

                }

            },

           //方法二：方法(无缓存)

            methods:{

                fullName:function () {

                    console.log("计算了一次");

                    return this.firstName +" "+this.lastName;

                }

            },

           //方法三：监听

           watch:{

               firstName:function () {

                   console.log("计算了一次");

                   return this.firstName +" "+this.lastName;

               },

               lastName:function () {

                   console.log("计算了一次");

                   return this.firstName +" "+this.lastName;

               }

           }

        })

    </script>

</body>

监听与计算属性均有缓存机制，所谓缓存机制就是"不依赖的属性发生改变时，不会重新计算一次“

Vue基础练习之计算属性、方法、监听器的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  2. VUE 学习笔记 四 计算属性和监听器

    1.计算属性 对于任何复杂逻辑,你都应当使用计算属性 <div id="example"> <p>Original message: "{{ me ...

  3. Vue基础进阶 之 计算属性的使用

    计算属性的基本使用 初始小示例: 代码: window.onload = () =>{ new Vue({ el:'div', data:{ msg:'' } }) } </script& ...

  4. vue.js初探：计算属性和methods

    在vue.js中,计算属性和methods方法的函数相同时,两者的最终执行结果都是相同的.然而不同的是,计算属性是基于它的依赖缓存.计算属性只有在它的相关依赖发生改变时才会重新取值.这就意味着只要 m ...

  5. Vue学习笔记之计算属性和侦听器

    0x00 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div> {{ message.split(''). ...

  6. 二、vue基础--计算属性和监听器

    1.一些操作需要计算后才能得到的用计算属性,需要放在computed属性中代码如下: <div id='app'> <div> <label>宽:</labe ...

  7. Vue.js-05：第五章 - 计算属性与监听器

    一.前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作.当我们需要对差 ...

  8. Vue学习3：计算属性computed与监听器

    下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  9. Vue生命周期，计算属性、方法、侦听器

    vue实例和组件都有生命周期函数,beforeCreate()实例或组件没有被创建的时候执行的钩子函数:created()是实例或组件被创建完成的时候执行的钩子函 数:beforeMount()函数是 ...

随机推荐

  1. The World's Top 15 Stock Exchanges by Domestic Market Capitalization

     The World's Top 15 Stock Exchanges by Domestic Market Capitalization in 2008 4 Euronext Belgium, Fr ...

  2. 友盟iOS sdk整理

    文档中心 :http://dev.umeng.com 集成文档:http://dev.umeng.com/analytics/ios-doc/integration 报表中心:http://www.u ...

  3. UIScrollView 实践经验

    UIScrollView(包括它的子类 UITableView 和 UICollectionView)是 iOS 开发中最常用也是最有意思的 UI 组件,大部分 App 的核心界面都是基于三者之一或三 ...

  4. Python中if __name__ == '__main__':理解

    在很多python脚本中在最后的部分会执行一个判断语句if __name__ == "__main__:",之后还可能会有一些执行语句.那添加这个判断的目的何在? 在python编 ...

  5. Activity基本类分析

    先上一张类图. Android源码分析的文章在网络上已经很多, 有些知识点阅读完之后能够基本理解其框架,但是由于不是这些代码的维护者,所以过一段时间后就忘记的差不多了,又需要反复学习. 所以在读完文章 ...

  6. 为什么printf()用%f输出double型，而scanf却用%lf呢？

    之前没有注意过这个问题,  转自: http://book.51cto.com/art/200901/106880.htm 问:有人告诉我不能在printf中使用%lf.为什么printf()用%f输 ...

  7. C++中String字符串查找

    在写C++程序中,总会遇到要从一个字符串中查找一小段子字符串的情况,对于在C中,我们经常用到strstr()或者strchr()这两种方法.而对于C++的string,我们往往会用到find(). C ...

  8. LRM-00109: could not open parameter file '/u01/app/oracle/product/12.1.0/db_1/dbs/initepps.ora'

    安装好oracle后,起动时报如下错误: [oracle@Oracle-A ~]$ export ORACLE_SID=ORCL [oracle@Oracle-A ~]$ sqlplus / as s ...

  9. hdu4324 dfs

    scanf("%1d")这种好像很慢. #include<stdio.h> #include<string.h> #define maxn 2010 str ...

  10. Effective C++: 05实现

    26:尽可能延后变量定义式的出现时间 1:只要你定义了一个变量而其类型带有一个构造函数或析构函数,那么当程序的控制流到达这个变量定义式时,你便得承受构造成本:当这个变量离开其作用域时,你便得承受析构成 ...