博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【Vue实例】
阅读量:5965 次
发布时间:2019-06-19

本文共 1473 字,大约阅读时间需要 4 分钟。


使用过一段时间的vue1.0,现在vue已经更新了很多版本了,语法在很多地方也有了变化。在此记录一下重新学习的过程以及对vue的一些自己的理解。vue的介绍就直接连接到官网了,官网介绍很详细了

1. 构造函数

在使用之前我们首先需要构建vue实例

var vm = new Vue({    })

以上代码是通过 new 构建了一个vue实例,构造函数中是一个对象,上面代码我用了一个空的对象,对象中可以包含 数据、模板、挂载元素、方法、生命周期钩子等选项。

【我们可以通过extend对vue构造器进行扩展】

var MyComponent = Vue.extend({  // 扩展选项})// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建var myComponentInstance = new MyComponent()

以上代码中通过extend进行了vue构造函数的扩展,我们使用 MyComponent 生成的每一个实例都将拥有扩展中的属性。


2. 属性与方法

我们上面在创建实例的时候传入的是一个空的对象,实际使用中这个对象中是有属性的。

let data = {    name: "blue"}let vm = new Vue({    data})vm.name === data.name;  //truedata.name = "Crazy";vm.name;    // Crazyvm.name = "Pink";data.name;  //Pink

上面代码使用的是ES6的语法,应该能懂。上面代码中Vue实例 【vm】在创建的过程中加入了一个data属性,我们可以通过【vm】实例访问到 name 属性,说明vue实例会对data对象中的每一个属性进行【代理】(也就是托管),所以我们不管是更改【对象data】还是更改【实例vm】属性都会同步name属性。

let data = {    name: "blue"}let vm = new Vue({    data})vm.$data;

我们可以通过上面一种方式访问到整个实例的【data属性】对象,还有一些暴露在实例中的属性和方法,他们都是用$为前缀。这儿就不多说了参考手册里有详细的说明。


3. Vue实例的生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 【生命周期钩子】(一些实例方法,用于生命周期中我们更愿意叫他们为钩子函数) ,这就给我们提供了执行自定义逻辑的机会。例如,created 这个钩子在实例被创建之后被调用:

var vm = new Vue({  data: {    a: 1  },  created: function () {    // `this` 指向 vm 实例    console.log('a is: ' + this.a)  }})// -> "a is: 1"

也有一些其它的钩子,在实例生命周期的不同阶段调用,如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念?答案是,没有。组件的自定义逻辑可以分布在这些钩子中。


4. Vue生命周期图示

下面这张图是官方给出的生命周期图示,我只是把它翻译成中文了

图片描述

转载地址:http://qotax.baihongyu.com/

你可能感兴趣的文章
Nsrp实现juniper防火墙的高可用性【HA】!
查看>>
Linux下磁盘阵列raid
查看>>
Android 动态移动控件实现
查看>>
C#内置数据类型
查看>>
Lock应用之 读写锁
查看>>
oracle11g 安装在rhel5.0笔记
查看>>
PosgreSQL快速参数调优和sysbench压测
查看>>
网路游侠:铱迅软件版WEB应用防火墙试用
查看>>
MD5Init-MD5Update-MD5Final
查看>>
总结之:CentOS 6.5基于DHCP的PXE自动化安装系统详解
查看>>
Glusterfs(distribute) + DRBD + heartbeat + mon 实现分布式文件系统1
查看>>
RedHat 5.4+ Postfix +Extmail实现基于虚拟用户的邮件系统(三)
查看>>
UITableView基本用法
查看>>
Windows Server 2008域中组的简析
查看>>
保护你的聊天隐私---“外挂式”加密软件设计思路
查看>>
nginx 反向代理
查看>>
Excel复制粘贴——跳过空单元格案例
查看>>
MySQL 行复制
查看>>
[深入JUnit] 测试运行的入口
查看>>
Gradle2.0用户指南翻译——第二章. 概述
查看>>