脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → VUE 实例选项

vue实例的选项总结

 更新时间：2020年06月09日 15:49:02   作者：codedot  
这篇文章主要介绍了Vue实例的选项有哪些，文中讲解非常细致，代码帮助大家更好的学习，感兴趣的朋友可以了解下

一、数据

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 实例选项的资料请关注脚本之家其它相关文章！

相关文章

  • 详解10分钟学会vue滚动行为

    详解10分钟学会vue滚动行为

    本篇文章主要介绍了vue滚动行为，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue使用watch同时监听多个值的实现方法示例

    Vue使用watch同时监听多个值的实现方法示例

    这篇文章主要为大家介绍了Vue中使用watch同时监听多个值的实现方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • vue中的加密方式总结

    vue中的加密方式总结

    这篇文章主要为大家详细介绍了vue中常见的加密方式实现,例如js-base64、crypto-js、jsencrypt、bcryptjs,文中的示例代码讲解详细,需要的小伙伴可以参考一下
    2023-11-11
  • vue-cli2.x旧版本卸载不掉的问题踩坑指南(附Vue脚手架安装教程)

    vue-cli2.x旧版本卸载不掉的问题踩坑指南(附Vue脚手架安装教程)

    遇到一个Vuecli2脚手架卸载不了的问题,查了许多资料说的都比较复杂,所以下面这篇文章主要给大家介绍了关于vue-cli2.x旧版本卸载不掉的问题踩坑的相关资料,文中还附了Vue脚手架安装教程,需要的朋友可以参考下
    2022-07-07
  • vue列表数据删除后主动刷新页面及刷新方法详解

    vue列表数据删除后主动刷新页面及刷新方法详解

    这篇文章主要给大家介绍了关于vue列表数据删除后主动刷新页面及刷新方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • vue自定义权限标签详细代码示例

    vue自定义权限标签详细代码示例

    这篇文章主要给大家介绍了关于vue自定义权限标签的相关资料,在Vue中你可以通过创建自定义组件来实现自定义标签组件,文中给出了详细的代码示例,需要的朋友可以参考下
    2023-09-09
  • Vue3搭建组件库开发环境的示例详解

    Vue3搭建组件库开发环境的示例详解

    这篇文章给大家分享Vue3搭建组件库开发环境，给大家讲解依次搭建组件库、example、文档、cli，本文内容是搭建组件库的开发环境的过程，感兴趣的朋友跟随小编一起看看吧
    2022-11-11
  • Vue2 配置 Axios api 接口调用文件的方法

    Vue2 配置 Axios api 接口调用文件的方法

    本篇文章主要介绍了Vue2 配置 Axios api 接口调用文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Vue-Luckysheet的使用方法及遇到问题解决方法

    Vue-Luckysheet的使用方法及遇到问题解决方法

    Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源，这篇文章主要介绍了Vue-Luckysheet的使用方法,需要的朋友可以参考下
    2022-08-08
  • Vue3配置路由ERROR in [eslint]报错问题及解决

    Vue3配置路由ERROR in [eslint]报错问题及解决

    这篇文章主要介绍了Vue3配置路由ERROR in [eslint]报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论