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 事件进行同步: <!-- ...
随机推荐
- highcharts 柱状图在柱子顶部显示y轴数据
var plotOptions={ column:{ //borderColor: "#CCCC66",//边框 shadow: true, //阴影 dataLabels:{ / ...
- makefile中的变量赋值
在makefile中赋值方式有:'='.':='.'?='和'+='. A = a $(B) B = b all: echo $(A) #运行结果:echo a b a b 这种赋值方式是没有先后顺序 ...
- 忘记mysql密码后重置密码
https://jingyan.baidu.com/album/c275f6ba479ca9e33d7567ee.html?picindex=4 找不到mysql的my.ini文件问题: https: ...
- SpringMVC 数据校验(JSR-303)
项目中,通常使用较多的是前端的校验,比如页面中js校验以及form表单使用bootstrap校验.然而对于安全要求较高点建议在服务端进行校验. 服务端校验: 控制层controller:校验页面请求的 ...
- web压测工具http_load
1.什么是http_loadhttp_load是一款基于Linux平台的web服务器性能测试工具,用于测试web服务器的吞吐量与负载,web页面的性能. 2.http_load的安装1)下载地址:ht ...
- Find a way （广度优先搜索）
题目: Pass a year learning in Hangzhou, yifenfei arrival hometown Ningbo at finally. Leave Ningbo one ...
- 我的python面试简历
分享前一段我的python面试简历,自我介绍这些根据你自己的来写就行,这里着重分享下我的项目经验.公司职责情况(时间倒序),不一定对每个人适用,但是有适合你的点可以借鉴 我的真实经验:(14年毕业,化 ...
- 从5个经典工作开始看语义SLAM
本文试图概括Semantic SLAM的主要思路和近年工作,⻓期更新.但因水平有限,若有错漏,感谢指正. (更好的公式显示效果,可关注文章底部的公众号) Semantic SLAM 简介 至今为止,主 ...
- 11--PHP中的类和对象
PHP类和对象 类是面向对象程序设计的基本概念,通俗的理解类就是对现实中某一个种类的东西的抽象, 比如汽车可以抽象为一个类,汽车拥有名字.轮胎.速度.重量等属性,可以有换挡.前进.后退等操作方法. 通 ...
- iNeuOS工业互联平台，.NETCore开发的视频服务组件iNeuVideo，RTSP转WebSocket
目 录 1. 概述... 2 2. 将来集成到iNeuOS平台演示... 3 3. iNeuVideo结构... 3 4. iNeuVideo部署及 ...