<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. LintCode A+B问题

    给出两个整数a和b, 求他们的和, 但不能使用 + 等数学运算符. 说明 a和b都是 32位 整数么? 是的 我可以使用位运算符么? 当然可以 样例 如果 a=1 并且 b=2,返回3 1.(忽略进位 ...

  2. ELK学习之jdk和jre的区别

    JRE: Java Runtime EnvironmentJDK:Java Development KitJRE顾名思义是java运行时环境,包含了java虚拟机,java基础类库.是使用java语言 ...

  3. day13 memcache，redis上篇

    memcache memcache简介 Memcached是一个自由开源的,高性能,分布式内存对象缓存系统. Memcached是以LiveJournal旗下Danga Interactive公司的B ...

  4. 【风马一族_php】PHP运算

    运算 算术运算符 <?php //加法 $num1 = 10; $num2 = 43; echo $num1 + $num2; echo " "; var_dump($num ...

  5. HDU-1160_FatMouse's Speed

    FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Sp ...

  6. 利用idea构建hibernate

    1.创建项目 若勾选Use library,则点击右侧的Create,使用本地已下载的Hibernate 5.2.13框架(必须导入hibernate-release-5.2.13.Final\lib ...

  7. oracle函数 least(exp1,exp2,exp3,……,expn)

    [功能]返回表达式列表中值最小的一个.如果表达式类型不同,会隐含转换为第一个表达式类型. [参数]exp1……n,各类型表达式 [返回]exp1类型 [示例] SELECT least(10,32,' ...

  8. 阿里云DataV专业版发布，为可视化创造更多可能！

    阿里云数据可视化应用工具DataV正式推出专业版,该版本为可视化领域专业团队和从业者量身打造,定位数据可视分析大屏搭建场景,让使用者可以轻松hold住复杂交互设计和实时数据交互查询需求. 什么是Dat ...

  9. @bzoj - 4709@ 柠檬

    目录 @desription@ @solution@ @accepted code@ @details@ @desription@ 一共有 N 只贝壳,编号为 1...N,贝壳 i 的大小为 si. ...

  10. 微信支付、支付宝支付和QQ钱包支付

    最近忙于对接微信支付和支付宝支付,注册微信公众号,认证公众号,注册微信支付商户号并进行认证: 签约支付宝支付产品(手机网站支付.PC网站支付),注册支付宝企业账号(企业账号权限更大): 注册QQ钱包商 ...