vue实例的选项总结


Posted in Javascript onJune 09, 2020

一、数据

API:https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE

1. data

类型:Object | Function

限制:组件的定义只接受 function

详细:Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。

var data = { a: 1 }

// 直接创建一个实例
var vm = new Vue({
 data: data
})
vm.a // => 1
vm.$data === data // => true

// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
 data: function () {
  return { a: 1 }
 }
})

2. computed

类型:{ [key: string]: Function | { get: Function, set: Function } }

详细:计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的。

var vm = new Vue({
 data: { a: 1 },
 computed: {
  // 仅读取
  aDouble: function () {
   return this.a * 2
  },
  // 读取和设置
  aPlus: {
   get: function () {
    return this.a + 1
   },
   set: function (v) {
    this.a = v - 1
   }
  }
 }
})
vm.aPlus  // => 2
vm.aPlus = 3
vm.a    // => 2
vm.aDouble // => 4

3. methods

类型:{ [key: string]: Function }

详细:methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

var vm = new Vue({
 data: { a: 1 },
 methods: {
  plus: function () {
   this.a++
  }
 }
})
vm.plus()
vm.a // 2

4. watch

类型:{ [key: string]: string | Function | Object | Array }

详细:一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。

5. props

类型:Array<string> | Object

详细:props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。

你可以基于对象的语法使用以下选项:

1  type: 可以是下列原生构造函数中的一种:String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型,否则抛出警告。Prop 类型的更多信息在此。

2  default: any 为该 prop 指定一个默认值。如果该 prop 没有被传入,则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。

3  required: Boolean 定义该 prop 是否是必填项。在非生产环境中,如果这个值为 truthy 且该 prop 没有被传入的,则一个控制台警告将会被抛出。

4  validator: Function 自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下,如果该函数返回一个 falsy 的值 (也就是验证失败),一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。

二、DOM

API:https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-DOM

1.el

类型:string | Element

限制:只在用 new 创建实例时生效。

详细:

(1)提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。

(2)在实例挂载之后,元素可以用 vm.$el 访问。

(3)如果在实例化时存在这个选项,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。

提供的元素只能作为挂载点。不同于 Vue 1.x,所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 <html> 或者 <body> 上。

如果 render 函数和 template property 都不存在,挂载 DOM 元素的 HTML 会被提取出来用作模板,此时,必须使用 Runtime + Compiler 构建的 Vue 库。

2.template

类型:string

详细:一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽。

如果值以 # 开始,则它将被用作选择符,并使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <script type="x-template"> 包含模板。

出于安全考虑,你应该只使用你信任的 Vue 模板。避免使用其他人生成的内容作为你的模板。

如果 Vue 选项中包含渲染函数,该模板将被忽略。

3.render

类型:(createElement: () => VNode) => VNode

详细:字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

如果组件是一个函数组件,渲染函数还会接收一个额外的 context 参数,为没有实例的函数组件提供上下文信息。

Vue 选项中的 render 函数若存在,则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

4.renderError

2.2.0 新增

类型:(createElement: () => VNode, error: Error) => VNode

详细:只在开发者环境下工作。

当 render 函数遭遇错误时,提供另外一种渲染输出。其错误将会作为第二个参数传递到 renderError。这个功能配合 hot-reload 非常实用。

示例:

new Vue({
 render (h) {
  throw new Error('oops')
 },
 renderError (h, err) {
  return h('pre', { style: { color: 'red' }}, err.stack)
 }
}).$mount('#app')

以上就是vue实例的选项总结的详细内容,更多关于VUE 实例选项的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Js切换功能的简单方法
Nov 23 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 Javascript
vuex分模块后,实现获取state的值
Jul 26 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 #Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 #Javascript
浅谈vue的第一个commit分析
Jun 08 #Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 #Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 #Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 #Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 #Javascript
You might like
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
常用的javascript设计模式
2017/01/11 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
python数组复制拷贝的实现方法
2015/06/09 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
python 命令行传入参数实现解析
2019/08/30 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
中介业务员岗位职责
2014/04/09 职场文书
保护环境建议书300字
2014/05/13 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS