vueAPI (data,props,methods,watch,computed,template,render)
Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。实例创建之后,可以通过vm.$data来访问原始数据对象
为什么组件中的data是一个方法返回一个对象,而不是直接赋值给一个对象?
因为组件可能被用来创建多个实例。如果 data
仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!
props
props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对 象允许配置高级选项,如类型检测、自定义验证和设置默认值。
-
-
type: String、Number、Boolean、Array、Object、Date、Function、Symbol
会检查一个 prop 是否是给定的类型,否则抛出警告。
-
default:any 为该 prop 指定一个默认值。如果该 prop 没有被传入,则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
-
required: Boolean 定义该 prop 是否是必填项。在非生产环境中,如果这个值为 truthy 且该 prop 没有被传入的,则一个控制台警告将会被抛出。
-
validator: Function 自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下,如果该函数返回一个 falsy 的值 (也就是验证失败),一个控制台警告将会被抛出。
-
methods
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
注意:不应该使用箭头函数来定义methods函数,this指向不会按照期望指向Vue实例。
watch
使用 watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。
-
-
deep: true 深度监听,该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深
-
immediate: true 立即执行,该回调将会在侦听开始之后被立即调用
-
注意:不应该使用箭头函数来定义watcher函数,this指向不会按照期望指向Vue实例。
computed
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
计算属性的结果会被缓存
注意:如果你为一个计算属性使用了箭头函数,则 this
不会指向这个组件的实例,不过你仍然可以将其实例作 为函数的第一个参数来访问。
computed和watch用法异同
相同: computed和watch都起到监听/依赖一个数据,并进行处理的作用
异同:computed主要用于对同步数据的处理,watch则主要用于观测某个值的变化去完成一段开销较大的复 杂业务逻辑。能用computed的时候优先用computed,避免了多个数据影响其中某个数据时多次调用 watch的尴尬情况。
template
一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽。
注意:如果 Vue 选项中包含渲染函数,该模板将被忽略。
render
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,也可以用渲染函数。它比模板更接近编译器。
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 子节点数组
)
},
props: {
level: {
type: Number,
required: true
}
}
})
注意:Vue 选项中的 render
函数若存在,则 Vue 构造函数不会从 template
选项或通过 el
选项指定的挂载元 素中提取出的 HTML 模板编译渲染函数。
原文地址:https://www.cnblogs.com/yaokai729/p/11408934.html
- gc服务器慢的原因分析 (r6笔记第14天)
- AI 玩微信跳一跳的正确姿势——跳一跳 Auto-Jump 算法详解
- 干货 | 深入理解Python装饰器
- 11g dataguard使用总结(r5笔记第12天)
- centos7.4下配置django+uwsgi+nginx
- 11g rac配置scan ip(r6笔记第30天)
- 【C++概念】---vector用法
- 浅谈Orabbix监控指标(r6笔记第27天)
- Orabbix定制监控Oracle的简单配置(r6笔记第26天)
- 【java基础】 线程实例
- 记一次数据库的分析和优化建议(r6笔记第24天)
- linux (ubantu)安装最新版python3.6,以及直接安装anaconda
- 【java基础】匿名类
- 朴素贝叶斯法 2016年11月11日
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- java向mysql插入数据乱码问题解决
- java向数据库中插入中文出现乱码
- Flutter基础widgets教程-FractionallySizedBox篇
- 关于myeclipse控制台输出中文乱码的问题
- nutz 自定义查询 分页 取值
- jquery-uploadifyv3.2.1 文件上传插件 学习
- Flutter基础widgets教程-Icon篇
- Redis:持久化
- Flutter基础widgets教程-IconButton篇
- Flutter基础widgets教程-Image篇
- Go - 学习 grpc.Dial(target string, opts …DialOption) 的写法
- Flutter基础widgets教程-IntrinsicHeight篇
- Flutter基础widgets教程-Baseline篇
- springcloud本地开发的微服务如何调用远程k8s的微服务
- Flutter基础widgets教程-LimitedBox篇