构造器

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的:

var vm = new Vue({
// 选项
})

虽然没有完全遵循 MVVM 模式, Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm 这个变量名表示 Vue 实例。

在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在 API 文档中查看。

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

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

尽管可以命令式地创建扩展实例,不过在多数情况下建议将组件构造器注册为一个自定义元素,然后声明式地用在模板中。我们将在后面详细说明组件系统。现在你只需知道所有的 Vue.js 组件其实都是被扩展的 Vue 实例。

属性与方法

每个 Vue 实例都会代理其 data 对象里所有的属性:

var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。我们将在后面详细讨论响应系统。

除了 data 属性, Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀$,以便与代理的 data 属性区分。例如:

var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
// 这个回调将在 `vm.a` 改变后调用
})

注意,不要在实例属性或者回调函数中(如vm.$watch('a', newVal => this.myMethod()))使用箭头函数。因为箭头函数绑定父上下文,所以 this 不会像预想的一样是 Vue 实例,而是 this.myMethod未被定义。

实例属性和方法的完整列表中查阅 API 参考

实例生命周期

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

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

生命周期图示

下图说明了实例的生命周期。你不需要立马弄明白所有的东西,不过以后它会有帮助。


原文: http://vuejs.org/guide/instance.html

Vue.2.0.5-Vue 实例的更多相关文章

  1. Vue 2.0 与 Vue 3.0 响应式原理比较

    Vue 2.0 的响应式是基于Object.defineProperty实现的 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 prop ...

  2. vue 2.0 及 vue 3.0 rem配置

    vue 2.0 配置 rem 首先先安装postcss-px2rem   (百度可以) https://www.jianshu.com/p/e6476bbc2131 npm install postc ...

  3. 使用vue 3.0 初始化vue脚手架

    vue-cli3.0安装 如果你事先已经全局安装了旧版本的vue-cli(1.x 或 2.x),你需要先卸载它: npm uninstall vue-cli -g 安装 npm install -g ...

  4. 耗时近一个月,终于录完了VUE.JS2.0前端视频教程!

    这次课录制的比较辛苦,圣诞节时原本已经快录制完成了,偶然的一次,播放了一下,感觉不满意,好几篇推倒重来,所以今天才结束. vue.js2.0是Vue.JS的最新版本,视频教程还不多,如果你看到了,学到 ...

  5. vue 3.0 体验,vue 3.0新特性

    前言 昨天不是尤雨溪 不是刚在B站 直播玩了,分享了vue-next v3.0.0-beta.1 版本 哈哈, 不要太刺激哦 6大亮点 Performance:性能更比Vue 2.0强. Tree s ...

  6. Vue 3.0 有哪些新特性值得我们提前了解

    一.迎接 Vue 3.0 简介 ​ Vue.js 作者兼核心开发者尤雨溪宣布 Vue 3.0 进入 Beta 阶段. 已合并所有计划内的 RFC 已实现所有被合并的 RFC Vue CLI 现在通过 ...

  7. vue入门 0 小demo (挂载点、模板、实例)

    vue入门 0 小demo  (挂载点.模板) 用直接的引用vue.js 首先 讲几个基本的概念 1.挂载点即el:vue 实例化时 元素挂靠的地方. 2.模板 即template:vue 实例化时挂 ...

  8. vue.js学习之入门实例

    之前一直看过vue.js官网api,但是很少实践,这里抽出时间谢了个入门级的demo,记录下一些知识点,防止后续踩坑,牵扯到的的知识点:vue.vue-cli.vue-router.webpack等. ...

  9. Vue 2.0初学后个人总结及分享

    摘要:最近在上海找工作,发现Vue前景还不错,于是就打算先学习一下(之前了解过,但是一直没提到日程上)这篇随笔当是为了自己学习之后,做一个小的阶段性总结.希望本文的内容对于刚开始接触vue的朋友们有点 ...

  10. 【前端】vue.js环境配置以及实例运行简明教程

    vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...

随机推荐

  1. DS实验题 最大最小

    题目: 算法设计: 计算最小值算法: 设置一个flag,flag为1的时候代表遇到*号: 遇到数字时: flag为0进栈: flag为1的时候,从栈顶提出一个元素和当前元素运算,结果进栈 最后对栈进行 ...

  2. PHP json_decode 函数解析 json 结果为 NULL 的解决方法

    在做网站 CMS 模块时,对于模块内容 content 字段,保存的是 json 格式的字符串,所以在后台进行模块内容的编辑操作 ( 取出保存的数据 ) 时,需要用到 json_decode() 函数 ...

  3. 【翻译】CEDEC2013 BANDAI NAMCO 了解游戏格斗动画中的身体运动结构和原理

    CEDEC搬运工程开始~   这篇会议PPT的作者 元梅幸司曾经就职在TECMO参与开发了死或生2,3[ DEAD OR ALIVE],忍龙「NINJA GAIDEN」后来加入NAMCO(现在是BAN ...

  4. (转)经典SQL查询语句大全

    (转)经典SQL查询语句大全 一.基础1.说明:创建数据库CREATE DATABASE database-name2.说明:删除数据库drop database dbname3.说明:备份sql s ...

  5. PHP获取当前日期和时间的方法

    PHP获取当前日期和时间的方法 来源:wikiHow   时间:2014-12-04 14:49:45   阅读数:7240 分享到:0 [导读] PHP是用来创建网络中动态内容的常见语言,因此PHP ...

  6. wordpress为dashboard添加样式

    function my_admin_theme_style() { wp_enqueue_style('my-admin-style', get_template_directory_uri() . ...

  7. poj1012约瑟夫

    #include<stdio.h>int a[14];int f(int k,int m){    int n,i,s;    n=2*k;s=0;    for(i=0;i<k;i ...

  8. 【转】C# 解析JSON格式数据

    http://blog.csdn.net/coolszy/article/details/8606803 JSON简介 JSON(全称为JavaScript ObjectNotation) 是一种轻量 ...

  9. 【总结】使用jdbc+servlet开发一个bug管理系统的经验总结

    开发背景: 公司目前使用Teambition里面的task作为bug管理系统,既没有bug的当前状态,也不能写上bug的详细复现步骤,被assign了任务(该修复bug或者验证bug是否被修复)也没有 ...

  10. HBase的完全分布式的搭建与部署,以及多master

    一:前提准备 1.设置时间同步 2.清空logs,datas 3.格式化集群 bin/hdfs namenode -format 4.重启集群 sbin/start-dfs.sh sbin/start ...