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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 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
global.php
2006/12/09 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
基于vue的换肤功能的示例代码
2017/10/10 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
详解Python迭代和迭代器
2016/03/28 Python
基于python 字符编码的理解
2017/09/02 Python
python学习基础之循环import及import过程
2018/04/22 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
如何基于Python按行合并两个txt
2020/11/03 Python
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
J2EE面试题集锦(附答案)
2013/08/16 面试题
结婚邀请函范文
2014/01/14 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
三方协议书
2015/01/27 职场文书
邀请书格式范文
2015/02/02 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
小学校本教研总结
2015/08/13 职场文书
Python基础之Socket通信原理
2021/04/22 Python
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
详解Python类和对象内容
2021/06/22 Python