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 事件进行同步: <!-- ...
随机推荐
- cs231n spring 2017 lecture8 Deep Learning Networks
1. CPU vs. GPU: CPU核心少(几个),更擅长串行任务.GPU有很多核心(几千个),每一个核都弱,有自己的内存(几个G),很适合并行任务.GPU最典型的应用是矩阵运算. GPU编程:1) ...
- JDK9新特性-改进进程管理 API
Java 9 这个版本对进程管理方面的改进也是相当大的.在为数不多的几次 Java 项目中,有偶尔用到多线程,但对多进程和进程方面的了解还真是太少. 我想,大部分人应该跟我一样,在编程之外知道有进程的 ...
- jquery mobile AJAX特性的陷阱
简单情况是 MVC 重定向,URL不变 试了N种方式,跳来跳去,无解,服务端跳,写JS跳,生成跳转中间页跳.失败 后来一看,明明已经跳到新页了,样式什么还是原页的,有点火大了. 出去溜一圈,喝杯水,和 ...
- 对String类型的认识以及编译器优化
Java中String不是基本类型,但是有些时候和基本类型差不多,如String b = "tao" ; 可以对变量直接赋值,而不用 new 一个对象(当然也可以用 new). J ...
- win7/win8下vmware/VirtualBox虚拟网卡显示未识别网络的解决
http://blog.csdn.net/zengxianying/article/details/44017227
- Tesseract OCR使用介绍
#Tesseract OCR使用介绍 ##目录[TOC] ##下载地址及介绍 官网介绍:http://code.google.com/p/tesseract-ocr/wiki/TrainingTess ...
- Oracle介绍
Published: 2016-11-08 22:15:00 In Data Mining. tags: SQL 版本与配置 企业版 标准版 个人版 事务性数据表 分析型数据表 PL/SQL 配置 控 ...
- 网络字体反爬之pyspider爬取起点中文小说
前几天跟同事聊到最近在看什么小说,想起之前看过一篇文章说的是网络十大水文,就想把起点上的小说信息爬一下,搞点可视化数据看看.这段时间正在看爬虫框架-pyspider,觉得这种网站用框架还是很方便的,所 ...
- 利用python代码操作git
python操作git 安装模块 pip3 install gitpython 基本使用 import os from git.repo import Repo # 创建本地路径用来存放远程仓库下载的 ...
- java.lang.SecurityException: class "javax.servlet.AsyncContext"'s signer information does not match signer information of other classes in the same package
最近在写个Http协议的压测挡板时,遇到以下错误. 2018-03-08 10:34:07.808:INFO:oejs.Server:jetty-8.1.9.v20130131 2018-03-08 ...