vue基础----修饰符，watch,computed,method实例方法
1.vue常用的修饰符，number,trim,number--->当作数字，trim-->去掉前后空格
2.methods与计算属性 computed 的相同与区别
<body>
<div id="app">
{{getInfo()}}
{{getInfo1}}
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
data:{
foo: "hello ",
bar: "world"
},
// 方法不会缓存 在模板中调用需要用getInfo()
methods: {
getInfo() {
console.log("getInfo is called");
return this.foo + this.bar;
}
},
// 计算属性 本质上是一个方法 使用时候当作属性来用
/* 计算属性具有缓存 只有当其依赖的数据成员发生改变时候 才重新执行*/
computed: { // Obejct.defineProperty()
getInfo1() {
console.log("getInfo1 is called");
return this.foo + this.bar;
}
}
}).$mount("#app"); /*输出
getInfo is called
getInfo1 is called
*/
</script>
</body
总结：computed本质上是一个方法，使用的时候当作属性来用，计算属性具有缓存 只有当其依赖的数据成员发生改变时候 才重新执行，方法不会缓存，当作方法去调用。
3.watch vs computed
<body>
<div id="app">
{{getInfo1}}
{{getInfo}}
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
data:{
foo: "hello ",
bar: "world",
getInfo:""
},
// 计算属性 本质上是一个方法 使用时候当作属性来用
/* 计算属性具有缓存 只有当其依赖的数据成员发生改变时候 才重新执行*/
computed: { // Obejct.defineProperty()
getInfo1() {
console.log("getInfo1 is called");
return this.foo + this.bar;
}
},
// watch vs computed
// 1 尽量优先使用computed 代码简洁
// 2 watch支持异步
watch: {
/*
foo(newValue,oldValue) {
this.getInfo = this.foo + this.bar;
},
bar(newValue,oldValue) {
this.getInfo = this.foo + this.bar;
}*/
foo:{
handler() {
setTimeout(()=>{
this.getInfo = this.foo + this.bar;
},1000);
},
immediate: true //立即执行,为false的时候第一次渲染不会出来，只有当数据改变的时候才会变
},
bar() {
this.getInfo = this.foo + this.bar;
}
}
}).$mount("#app");
</script>
</body>
总结：1 尽量优先使用computed 代码简洁
2 watch支持异步
vue基础----修饰符，watch,computed,method实例方法的更多相关文章
- 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [.net 面向对象编程基础] (8) 基础中的基础——修饰符
[.net 面向对象编程基础] (8) 基础中的基础——修饰符 在进入C#面向对象核心之前,我们需要先对修饰符有所了解,其实我们在前面说到变量和常量的时候,已经使用了修饰符,并且说明了变量和常量的修改 ...
- Vue—事件修饰符
Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue. ...
- vue.js 中 data, prop, computed, method，watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- Vue 时间修饰符之使用$event和prevent修饰符操作表单
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue事件修饰符(once:prev:stop)
vue事件修饰符(once:prev:stop) stop修饰符 效果如下: 当你鼠标在这个div里的时候,x与y的值:会随着鼠标的变化而变化.但是当鼠标放在stopMoving的时候,x与y的值是 ...
- 深入理解vue 修饰符sync【 vue sync修饰符示例】
在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...
- Vue sync修饰符的使用
父子组件传值,父组件可以给子组件传值,但是子组件是不能修改组件提供的值,这里vue提供了sync修饰符,以前父组件点击子组件显示,子组件关闭按钮,父组件再点击子组件就无法让子组件显示.因为子组件点击关 ...
- vue之修饰符
修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 .你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: <!-- ...
随机推荐
- Linux查看后台任务，关闭后台任务
jobs查看后台任务, kill %num关闭相应的后台任务
- 基于Dockerfile制作tomcat镜像
Docker 概述: 在前面的例子中,我们从下载镜像,启动容器,在容器中输入命令来运行程序,这些命令都是手工一条条往里输入的,无法重复利用,而且效率很低.所以就需要一种文件或脚本,我们把想执行的操 ...
- @RequestBody 参数为string正常改为对象时不报错但获取不到值
@RequestBody 参数为string正常改为对象时不报错但获取不到值 试了好多办法都不行 最后 原因 jackson 包的版本号不匹配 2.9.0的不能封装进对象,可以运行且不报错但获取不到 ...
- 1122 Hamiltonian Cycle (25 分)
1122 Hamiltonian Cycle (25 分) The "Hamilton cycle problem" is to find a simple cycle that ...
- Dungeon Master （三维ＢＦＳ）
题目: You are trapped in a 3D dungeon and need to find the quickest way out! The dungeon is composed o ...
- Linux下运行命令出现is not in the sudoers file的问题
原因: 用户没有加入到sudo的配置文件里. 解决方法: 1.切换到root用户,运行visudo命令: 2.找到root ALL=(ALL) ALL,在下面添加一行 xxx ALL=(ALL) ...
- docker运行mysql主从备份，读写分离
1)从Docker官方下拉MySQL的image 打开https://hub.docker.com/ 搜索mysql 在docker中运行 默认tag为latest docker pull mysql ...
- runR
Linux下使用R 运行linux下的R脚本 编写R文件 新建后缀名为R的文件 写入R程序 在脚本首行加入 1 运行R文件 这里有两种方式 大专栏 runR进入R的环境">进入R的环 ...
- AI超越人类大脑，或许是场“别有用心者”的骗局
谷歌.微软.苹果.特斯拉.百度.腾讯.阿里等互联网巨头企业,以及纳德拉.马斯克.扎克伯格.马云等互联网大佬,近年来一直都对人工智能--AI非常上心.在众多场合对AI给予了或肯定,或恐惧的评价.但无 ...
- sys.argv的意义[转]
sys.argv的意义 原文地址:https://www.cnblogs.com/zzliu/p/10775049.html 简单来说,sys.argv是一个参数列表,这个列表存放着从外界获取到的参数 ...