Vue.js中data,props和computed数据
data
data 是Vue实例的数据对象。Vue将会将data 的属性转换为 getter/setter, 也就是用Object.defineProperty方法(在官网里面有深入响应式原理里面具体的介绍)。对象必须是纯粹的对象(含有零个或多个的key/value对)。因为这里面的数据都是被监控的,所以说这里面的数据最好都是在视图层显示的数据。如果说不是在视图层展示的变量。可以定义在外面或者放在vm对象上。
eg:
let baz = ''
export default {
data() {
return {
bar: 'bar'
}
},
methods: {
testFn() {
// baz
}
}
}
bar 变量是在页面中要显示的字段,baz就是在函数里面会用到的数据。如果视图里面不用显示的话就没必要写在data里面。这样
可以减少开销,提高性能。
props
props 是props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,
对象允许配置高级选项,如类型检测、自定义校验和设置默认值。
computed
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。不过计算属性也用
函数来替代。
computed: {
// 仅读取,值只须为函数
aDouble: function () {
return this.a * 2
},
// 读取和设置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
Vue.js中data,props和computed数据的更多相关文章
- vue.js 中 data, prop, computed, method,watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- Vue.js中滚动条加载更多数据
本文章参考:http://www.cnblogs.com/ssrsblogs/p/6108423.html 分析:1.需要判断滚动条是否到底部: 需要用到DOM的三个属性值,即scrollTop.cl ...
- 实例分析Vue.js中 computed和methods不同机制
在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...
- Vue.js学习 Item5 -- 计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...
- vue.js中的slot
vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...
- vue.js 中双向绑定的实现---初级
1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...
- 谈谈vue.js中methods watch和compute的区别和联系
methods,watch和computed都是以函数为基础的,但各自却都不同: 1.watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依 ...
- vue.js中,input和textarea上的v-model指令到底做了什么?
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
随机推荐
- Java中String args[]起什么作用?
在百度知道上看到这样一个答案: 在命令提示符中运行该程序时 可以附加参数运行 输入的参数会存入到字符传数组 args[]中例如:在命令提示符中运行该程序的时候假设该程序在D的JAVA文件夹中D:JAV ...
- SPOJcot2 Count on a tree II (树上莫队)
You are given a tree with N nodes. The tree nodes are numbered from 1 to N. Each node has an integer ...
- C++之引用&的详解
C++中的引用: 引用引入了对象的一个同义词.定义引用的表示方法与定义指针相似,只是用&代替了*.引用(reference)是c++对c语言的重要扩充.引用就是某一变量(目标)的一个别名,对引 ...
- 2.1-2.2 Hive 中数据库(Table、Database)基本操作
官网文档:https://cwiki.apache.org/confluence/display/Hive/LanguageManual+DDL 一.create table 1.官方字段 # # C ...
- 2-2和2-3基本数据类型 & 2-4基本数据类型详解 & 3-1和3-2整形字面量值及变量声
2-4基本数据类型详解 3-1和3-2整形字面量值及变量声 023是八进制的 0x1357是十六进制 0X3C也是十六进制 0x1abL:长整型 变量声明 数据类型 空格 变量名 赋值: 变量的定义:
- 关于weblogic 10.3.6.0 的漏洞复现(2)
今天小R又学会了一个工具的使用,而且这个工具很强大很强大. 待会介绍. 一.需要的试验环境: 一台宿主机,虚拟机(kali+window2008或其他版本的windows) 1.宿主机需要的工具:B ...
- IOS实时监控上传下载速度
在开发中要获取网络类型是很简单的,导入Reachability直接获取状态就行了,现在我们要做一个类似下载器的那种实时把上传下载速度显示出来. 需要用到的头文件 使用Reachability 要测速度 ...
- [Xcode 实际操作]七、文件与数据-(15)单例模式的使用
目录:[Swift]Xcode实际操作 本文将演示单例对象的使用. 在项目名称上点击鼠标右键,弹出右键菜单,选择[New File]新建文件命令, 在弹出的模板选项窗口中,选择[Swift]文件选项, ...
- Mol Cell Proteomics. |阳梦如|富马酸二甲酯在神经元和星形胶质细胞中新蛋白质靶点的鉴定及相关功能验证
大家好,本周分享的是发表在Molecular & Cellular Proteomics.上的一篇关于富马酸二甲酯在脑细胞蛋白质中新作用靶点的鉴定及功能性验证的文章,题目是Identifica ...
- vant搜索框问题
最近使用vant搜索框时发现,当输入内容点击一次搜索有数据,点击错号把内容去掉再点击搜索,都没进入点击搜索方法. 解决方法:把bindtop改成bindtouchstart <van-searc ...