<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. day4new-转自金角大王

    Python之路,Day4 - Python基础4 (new版)   本节内容 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 作业:ATM项目开发 ...

  2. 模板内置函数(HTML)

    模板内置函数 注意:1.html书写避免多余的空格,否则可能无法被识别 2.模板是用来渲染的不要用来处理逻辑 后台ctime=datetime.datatime.now() {{ctime|date: ...

  3. 2019-8-30-C#-从零开始写-SharpDx-应用-笔刷

    title author date CreateTime categories C# 从零开始写 SharpDx 应用 笔刷 lindexi 2019-8-30 8:50:0 +0800 2019-6 ...

  4. Error configuring application listener of class org.springframework.web.context.ContextLoaderListene 标签： tomcat

    今天敲完ssm框架,启动tomcat时报了这个错误.如图: SEVERE: Error configuring application listener of class org.springfram ...

  5. 详解composer的自动加载机制

    composer是一个用PHP开发的用来管理项目依赖的工具,当你在项目中声明了依赖关系后,composer可以自动帮你下载和安装这些依赖库,并实现自动加载代码. 安装composer composer ...

  6. nodeJs学习-08 cookie、session

    http-无状态的:两次访问之间,无区别,cookie可解决 cookie:在浏览器保存一些数据,每次请求都会带过来: 弊端:可以查看修改,并不安全.大小有限(4K) 读取--cookie-parse ...

  7. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十五章：第一人称摄像机和动态索引

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十五章:第一人称摄像机和动态索引 代码工程地址: https://g ...

  8. SDUT_2502:火星计数法

    火星人的计数规则里只有a,b,c,d四个字母,计数规则从小到大是 a,b,c,d,aa,ab,ac,ad,ba,……. 给出来由a,b,c,d四种字母组成的火星数字,算出该数字是第几个(从1开始). ...

  9. python世界里的局部变量和全局变量: 潜规则太重要了!!!

    python世界里的局部变量和全局变量: 潜规则太重要了!!! 先上代码: def fun(): def test_global(): ''' 内层和外层都需要声明为global, 才能彻底打通变量名 ...

  10. LeetCode108 Convert Sorted Array to Binary Search Tree

    Given an array where elements are sorted in ascending order, convert it to a height balanced BST. (M ...