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()函数是 ...
随机推荐
- Haskell 学习
truncate pi -- 表示截断, 此处结果为 3 haskell中的touple是可变的,而python中是不可变的 lines函数: lines :: String -> [Strin ...
- Directx11教程37 纹理映射(7)
原文:Directx11教程37 纹理映射(7) 本章是在教程35.36的基础上来实现一个光照纹理结合的程序,就是把场景中旋转的cube加上纹理. lighttex.vs中顶点的结构现在 ...
- Silverlight 2.5D RPG游戏技巧与特效处理：（五）HLSL渲染动画
原文:Silverlight 2.5D RPG游戏技巧与特效处理:(五)HLSL渲染动画 或许大家依旧对上一节中的“黑夜”及“梦回过去”记忆犹新,追问下去HLSL到底是何方神圣能实现如此炫酷之效果?层 ...
- bzoj1624 寻宝之路
Description 农夫约翰正驾驶一条小艇在牛勒比海上航行． 海上有N(1≤N≤100)个岛屿,用1到N编号．约翰从1号小岛出发,最后到达N号小岛．一张藏宝图上说,如果他的路程上经 ...
- Jmeter非命令行执行脚本
这次我们可以清晰地看到每个线程的执行情况. 这里是我们使用非 GUI 模式运行测试脚本时可以使用的一些命令: -h 帮助 -> 打印出有用的信息并退出 -n 非 GUI 模式 -& ...
- oracle查看编码格式及修改
一.查看编码 1.查看oracle数据库编码 命令:select * from nls_database_parameters where parameter ='NLS_CHARACTERSET'; ...
- APP UI设计趋势：为好设计而动
http://www.cocoachina.com/design/20150703/12029.html 作者:bone9 善心悦目的动效已然成为一个app的必备,作为设计师自然要跟随趋势学习.APP ...
- python 数据的读取
- python 字典元素删减
- Dataphin公共云重磅发布，提供一站式智能数据构建与管理能
点击订阅新品发布会! 新产品.新版本.新技术.新功能.价格调整,评论在下方,下期更新!关注更多内容,了解更多 最新发布 Dataphin公共云重磅发布 2019年6月26日15时,阿里云Dataphi ...