Vue.js（二）Vue实例选项列表

最新推荐文章于 2024-02-07 15:58:11 发布

IoneFine

最新推荐文章于 2024-02-07 15:58:11 发布

阅读量703

点赞数

分类专栏： # Vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/jiduochou963/article/details/90147316

版权

Vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

官方文档： https://cn.vuejs.org/v2/api/#选项-数据

Vue.js中凡是以$开头的东西指的都是Vue的实例属性或实例方法。如vm.$data，vm.$el，vm.$destroy()（销毁vue实例，但是绑定的事件还会遗留）。

1、el

来源： https://cn.vuejs.org/v2/api/#el

类型：string | Element

限制：只在由 new 创建的实例中遵守。

详细：

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。（负责定义Vue实例负责接管的DOM的最外层标签）
在实例挂载之后，元素可以用 vm.$el 访问。

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

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

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

2、data

来源： https://cn.vuejs.org/v2/api/#data

类型：Object | Function

限制：组件的定义只接受 function。

详细：

Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。（Vue的实例接管了DOM之后，Vue就会对DOM的内容进行分析，发现插值表达式的时候就会到data中寻找相应的属性）

一旦观察过，不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根级响应式属性。

实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a。

以 _ 或 $ 开头的属性不会被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。

当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

如果需要，可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。

示例：

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 }
  }
})

注意，如果你为 data 属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

data: vm => ({ a: vm.myProp })

3、methods

来源： https://cn.vuejs.org/v2/api/#methods

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

详细：

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

注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

示例：

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

一个栗子——事件绑定：

<div id="root">
    <div@click="handleClick">{{message}}</div>
    <!--v-on简写为@，如v-on:click为@click-->
</div>

<script>
    var vm = new Vue({
        el: '#root',
        data: {
            message: 'hello vue!'
        },
        methods: {
            handleClick: function () {
                alert("hahah是我")
            }
        }
    })
</script>