<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. JQuery--val()、html()、text()

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

  2. cocos2dx3.0项目创建流程

    cocos2dx3.0不是beta,新增了wp项目创建的支持 但不知道为啥非beta版本号的tools文件夹中取消了project-creator,可能有更改吧 没有这个工具还挺麻烦.就自己手动创建c ...

  3. Hello World 之Spring Boot 调用图数据库Neo4j

    明日歌 [清]钱鹤滩 明日复明日,明日何其多! 我生待明日,万事成蹉跎 1. 图数据库Neo4j之爱的初体验 ----与君初相识,犹似故人归 在如今大数据(big data)横行的时代,传统的关系型数 ...

  4. Directx教程(27) 简单的光照模型(6)

    原文:Directx教程(27) 简单的光照模型(6)      从myTutorialD3D11_15到myTutorialD3D11_19的工程中,我们都只有一个光源,光源的位置在LightCla ...

  5. poj 3280【区间dp】

    poj 3280 题意:给定一个字符串和每个字符删去和增加的代价,求使字符串变成回文串操作所需的最小代价. 题解:哇!开心!终于亲自做对了!做完这两题这个就回了.uva10739  uva 10453 ...

  6. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十七章：拾取

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十七章:拾取 代码工程地址: https://github.com/ ...

  7. 对The Curse of Dimensionality（维度灾难）的理解

    一个特性:低维(特征少)转向高维的过程中,样本会变的稀疏(可以有两种理解方式:1.样本数目不变,样本彼此之间距离增大.2.样本密度不变,所需的样本数目指数倍增长). 高维度带来的影响: 1.变得可分. ...

  8. Uva 10074【递推dp】

    UVa 10074 题意:求01矩阵的最大子0矩阵. http://www.csie.ntnu.edu.tw/~u91029/MaximumSubarray.html#2 这里说的很清楚.先求Larg ...

  9. Spring Data JPA 查询结果返回至自定义实体

    本人在实际工作中使用Spring Data Jpa框架时,一般查询结果只返回对应的Entity实体.但有时根据实际业务,需要进行一些较复杂的查询,比较棘手.虽然在框架上我们可以使用@Query注解执行 ...

  10. SDUT-2054_数据结构实验之链表九：双向链表

    数据结构实验之链表九:双向链表 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 学会了单向链表,我们又多了一种解决问题的 ...