您好,欢迎来到二三四教育网。
搜索
您的当前位置:首页Vue.js入门-Vue实例

Vue.js入门-Vue实例

来源:二三四教育网

Vue.js 热度一直在上升,项目中也使用了这个框架,记录一下学习的过程。

一、Vue实例

通过构造函数 Vue({option}) 创建一个 Vue 的实例:

var vm = newVue({

  // 选项

})

在实例化的时候,我们可以传入一个选项对象,包含数据、模板、挂载元素、方法、生

命周期钩子等选项。

1. 数据

类型:Object | Function

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

Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。

对象必须是纯粹的对象 (含有零个或多个的 key/value 对):浏览器 API 创建的原生对象,原型上的属性会被忽略。

实例创建之后,可以通过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(...))得到深拷贝的原始数据对象。

2. Vue实例的生命周期

如图所示,原图出自官方网站。

图中所示的都是v2.x 版本的方法,与v1.x比一些方法名称有所变化。

这些方法也叫:生命周期钩子函数。

Copyright © 2019- how234.cn 版权所有 赣ICP备2023008801号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务