Vue基础练习之计算属性、方法、监听器
<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基础练习之计算属性、方法、监听器的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- VUE 学习笔记 四 计算属性和监听器
1.计算属性 对于任何复杂逻辑,你都应当使用计算属性 <div id="example"> <p>Original message: "{{ me ...
- Vue基础进阶 之 计算属性的使用
计算属性的基本使用 初始小示例: 代码: window.onload = () =>{ new Vue({ el:'div', data:{ msg:'' } }) } </script& ...
- vue.js初探：计算属性和methods
在vue.js中,计算属性和methods方法的函数相同时,两者的最终执行结果都是相同的.然而不同的是,计算属性是基于它的依赖缓存.计算属性只有在它的相关依赖发生改变时才会重新取值.这就意味着只要 m ...
- Vue学习笔记之计算属性和侦听器
0x00 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div> {{ message.split(''). ...
- 二、vue基础--计算属性和监听器
1.一些操作需要计算后才能得到的用计算属性,需要放在computed属性中代码如下: <div id='app'> <div> <label>宽:</labe ...
- Vue.js-05：第五章 - 计算属性与监听器
一.前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作.当我们需要对差 ...
- Vue学习3：计算属性computed与监听器
下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- Vue生命周期，计算属性、方法、侦听器
vue实例和组件都有生命周期函数,beforeCreate()实例或组件没有被创建的时候执行的钩子函数:created()是实例或组件被创建完成的时候执行的钩子函 数:beforeMount()函数是 ...
随机推荐
- 给大家分享一张CSS选择器优选级图谱 ！
- CSS浏览器兼容解决方案
1.在ie8的甑别上,如何让样式只对ie8起作用? 用ie浏览器独有的文档注释的方式.像这样: <!DOCTYPE html> <!--> <html class=&qu ...
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十三章：角色动画
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十三章:角色动画 学习目标 熟悉蒙皮动画的术语: 学习网格层级变换 ...
- Python对于封装性的看法
- zabbix3.4.x添加短信报警
一.修改zabbix_server.conf #vi /etc/zabbix/zabbix_server.conf 去掉注释: ### Option: AlertScriptsPath # Full ...
- JAVA中this的三种用法的详解
this关键字必须放在非静态方法里面 this关键字代表自身,在程序中主要的使用用途有以下几个方面: ? 使用this关键字引用成员变量 ? 使用this关键字在自身构造方法内部引用其它构造方法 ? ...
- 笔记：less的三种使用方法
直接在浏览器端使用 第一步,引入 .less 文件(注意要将 rel 属性设置为“stylesheet/less”) <link rel="stylesheet/less" ...
- 通过iOS 9 SFSafariViewController提供完整的Web浏览体验
http://www.cocoachina.com/ios/20150826/13157.html 本文由CocoaChina译者@涛声依旧-忆往昔翻译自tutsplus校对:BenBeng原文:iO ...
- 2019-8-31-dotnet-使用-System.CommandLine-写命令行程序
title author date CreateTime categories dotnet 使用 System.CommandLine 写命令行程序 lindexi 2019-08-31 16:55 ...
- 实现一个简易的promise
//promise里面只有三个状态,且三个状态的转换形式有两种 //由pending转换为fulfilled,由pending转换为rejected //Promise的构造函数参数是一个函数,函数的 ...