vue学习笔记(四)——Vue实例以及生命周期

1.构造器(实例化)

 var vm = new Vue({ 

   //选项

   |-------DOM

   |      |-------el (提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。)

   |      |-------template (一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发 slot。)

   |      |-------render (字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。)

   |-------数据

   |      |-------data    (Vue实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化)

   |      |-------props (可以是数组或对象,用于接收来自父组件的数据。)

   |      |-------propsData (创建实例时传递 props。主要作用是方便测试。)

   |      |-------computed (计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例)

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

   |      |-------watch (一个对象,键是需要观察的表达式,值是对应回调函数。)

   |-------生命周期钩子

   |      |-------beforeCreate(在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。)

   |      |-------create(实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见)

   |      |-------beforeMount(在挂载开始之前被调用:相关的 render 函数首次被调用。)

   |      |-------mounted(el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。)

   |      |-------beforeUpdate(数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。)

   |      |-------updated(由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。)

   |      |-------activated(keep-alive 组件激活时调用。)

   |      |-------deactivated(keep-alive 组件停用时调用。)

   |      |-------beforeDestroy(实例销毁之前调用。在这一步,实例仍然完全可用。)

   |      |-------destroyed(Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。)

   |-------资源

   |      |-------directives(包含 Vue 实例可用指令的哈希表。)

   |      |-------filters(包含 Vue 实例可用过滤器的哈希表。)

   |      |-------components(包含 Vue 实例可用组件的哈希表。)

   |-------杂项

   |      |-------parent

   |      |-------mixins

   |      |-------name

   |      |-------extends

   |      |-------delimiters

   |      |-------functional

 })

扩展Vue构造器:可以扩展 Vue 构造器,从而用预定义选项创建可复用的组件构造器:

 var MyComponent = Vue.extend({

 })

2.属性与方法

  1.实例属性

  vm.$data

  vm.$el

  vm.$options

  vm.$parent

  vm.$root

  vm.$children

  vm.$slots

  vm.$scopedSlots

  vm.$refs

  vm.$isServer

  2.实例方法/数据

    vm.$watch

    vm.$set

    vm.$delete

  3.实例方法/事件

    vm.$on

    vm.$once

    vm.$off

    vm.$emit

  4.实例方法/生命周期

    vm.$mount

    vm.$forceUpdate

    vm.$nextTick

    vm.$destroy

3.全局API

    Vue.extend ------使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。

    Vue.nextTick ------在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

    Vue.set          ------设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。

    Vue.delete     ------删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制,但是你应该很少会使用它。

    Vue.directive  ------注册或获取全局指令。

    Vue.filter        ------注册或获取全局过滤器。

    Vue.component----注册或获取全局组件。注册还会自动使用给定的id设置组件的名称

    Vue.use         ------安装 Vue.js 插件。

    Vue.mixin  ------全局注册一个混合,影响注册之后所有创建的每个 Vue 实例。

    Vue.compile  ------在render函数中编译模板字符串。只在独立构建时有效

时间: 2024-10-23 13:46:28

vue学习笔记(四)——Vue实例以及生命周期的相关文章

vue学习笔记初识vue——使用HTML模板

在创建Vue实例时,如果声明了el配置项,那么你也可以省略template 选项.这时候,Vue.js将提取锚点元素的HTML内容,做为模板. 我们可以使用单一的el配置项来创建Vue实例: var vm = new Vue({el:'#app'}); 在Vue.js中,这种模板被称为HTML模板,而使用template配置项 书写的模板,被称为字符串模板. 工作原理 当Vue.js发现你提供的选项中没有template属性时,将提取el属性所 指定的DOM节点的outerHTML内容作为模板内

(转)《深入理解java虚拟机》学习笔记7——Java虚拟机类生命周期

C/C++等纯编译语言从源码到最终执行一般要经历:编译.连接和运行三个阶段,连接是在编译期间完成,而java在编译期间仅仅是将源码编译为Java虚拟机可以识别的字节码Class类文件,Java虚拟机对中Class类文件的加载.连接都在运行时执行,虽然类加载和连接会占用程序的执行时间增加性能开销,但是却可以为java语言带来高度灵活性和扩展性,java的针对接口编程和类加载器机制实现的OSGi以及热部署等就是利用了运行时类加载和连接的特性,java的Class类在虚拟机中的生命周期如下: 上图中加

Servlet学习笔记(一):生命周期

一.Servlet 生命周期: Servlet 生命周期可被定义为从创建直到毁灭的整个过程.以下是 Servlet 遵循的过程:初始化--响应请求--终止--回收 Servlet 通过调用 init () 方法进行初始化. Servlet 调用 service() 方法来处理客户端的请求. Servlet 通过调用 destroy() 方法终止(结束). 最后,Servlet 是由 JVM 的垃圾回收器进行垃圾回收的. 现在让我们详细讨论生命周期的方法. 1.init() 方法: init 方法

Spring4.0学习笔记(5) —— 管理bean的生命周期

Spring IOC 容器可以管理Bean的生命周期,Spring允许在Bean生命周期的特定点执行定制的任务 Spring IOC 容器对Bean的生命周期进行管理的过程: 1.通过构造器或工厂方法创建Bean的实例 2.为Bean的属性设置值和对其他Bean的引用 3.调用Bean的初始化方法 4.Bean可以使用了 5.当容器关闭时,调用Bean的销毁方法 bean文件 package com.spring.cycle; public class Car { public Car(){ S

Android(java)学习笔记170:Activity的生命周期

1.首先来一张生命周期的总图: 2.几个典型的场景 (1)Activity从被装载到运行,执行顺序如下: onCreate()  ->    onStart() ->  onResume(): (2)Activity从运行到暂停,再到继续回到运行 onPause() ->  onResume ()        这个过程发生在Activity被别的Activity遮住了部分UI,失去了用户焦点,另外那个Activity退出之后,这个Activity再次获得运行.整个过程中,该Activi

android菜鸟学习笔记28----Android中的Service生命周期及本地和远程服务绑定的实现

Service是Android中长期在后台运行的没有界面的组件,使用服务的优势在于:能够提高进程的优先级,系统不容易回收掉进程,即便回收了,内存充足的时候,会把进程重新创建. 1.服务的简单使用示例: 1.1.定义一个服务: 定义一个服务的方式是定义一个类继承自Service: 1 public class MyService extends Service { 2 3 @Override 4 5 public IBinder onBind(Intent intent) { 6 7 // TOD

EJB学习笔记五(SessionBean的生命周期)

1.前言 前几篇主要介绍了有状态和无状态.远程和本地调用的SessionBean,这篇介绍一下有关SessionBean的生命周期.SessionBean处于EJB容器管理之下,对于客户端来说是完全透明的.但对于开发者来说,必须要了解SessionBean在EJB容器中的运行规律. 2.为何会有SessionBean的生命周期 EJB容器创建和管理SessionBean实例,有些时候,可能也需要定制SessionBean的管理过程.例如,我想在创建SessionBean实例的时候初始化字段变量,

maven学习(四)maven的生命周期

官网:http://maven.apache.org/guides/introduction/introduction-to-the-lifecycle.html maven有三套相互独立的生命周期,每个生命周期中又包含各个不同的阶段,这些阶段是有序的,执行某个阶段时,会将此生命周期此阶段前所有阶段都执行一遍.如:执行default周期的install会将validate到install都执行一遍. clean:清理项目 pre-clean 执行清理前需要完成的工作 clean 执行清理操作清理

Unity学习笔记(2) --- Unity脚本的生命周期

相关文档:Execution Order of Event Functions 1.function Update () {} 正常更新,用于更新逻辑.此方法每帧都会由系统自动调用一次. 2.function LateUpdate () {} 推迟更新,此方法在Update() 方法执行完后调用,同样每一帧都调用. 3.function Awake () {} 脚本唤醒,此方法为系统执行的第一个方法,用于脚本的初始化,在脚本的生命周期中只执行一次. 4.function FixedUpdate

VUE学习笔记之vue cli 构建项目

一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功 因为在官网下载安装node.js后,就已经自带npm(包管理工具)了,要意的是npm的版本最好是3.x.x以上,以免对后续产生影响. 2.安装淘宝镜像 npm install -g cnpm --registry= https://regis