创建Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:

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

Vue的设计受到了mvvm的启发

当创建一个 Vue 实例时,你可以传入一个选项对象

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成。

一个 todo 应用的组件树可以是这样的

根实例
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics

数据与方法

当Vue实例被创建的时候,它将data对象中所有的属性加入到Vue的相应系统中,当这些属性值改变的时,视图会发生变化

//数据对象
var data={a:1}
//将数据对象加入vue实例
var vm=new Vue({
data:data
}) //获取这个实例上的属性
//返回源头数据对应的字段
vm.a==data.a//true
data.a=3
vm.a//3

当这些数据改变时,视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是如果创建一个新的属性

vm.b='hi'

当b的改动将不会触发任何视图的更新,如果知道之后会需要一个属性,但是一开始属性不存在,那么仅仅需要设置一些初始值就可以了

data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}

唯一的例外是使用Object.freeze()这会阻止修改现有的属性,也意味着相应系统无法追踪变化

var obj={
foo:'bar'
} Object.freeze(obj) new Vue({
el:'#app',
data:obj
})
<div>
<p>{{ foo }}</p>
<!--这里的 'foo' 不会更新!-->
<button v-on:click="foo='baz'">Change it</button>
</div>

除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如:

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(newValue,oldValue){
//这里回调'vm.a'改变后的调用
})

实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

created 钩子可以用来在一个实例被创建之后执行代码

new Vue({
data:{
a:1
},
created:function(){
console.log('a is:'+this.a);
}
})

也有一些其它的钩子,在实例生命周期的不同阶段被调用,如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this,this 会作为变量一直向上级词法作用域查找,直至找到为止,经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

生命周期图解

Vue.js官方文档学习笔记(三)创建Vue实例的更多相关文章

  1. Vue.js官方文档学习笔记(一)起步篇

    Vue.js起步 Vue.js介绍 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库 ...

  2. Vue.js官方文档学习笔记(二)组件化应用的构建

    组件化应用的构建 组件化应用允许我们使用小型.独立和通常可复用的组件构建大型应用. Vue注册组件 Vue.component('todo-item',{template:'<li>这是个 ...

  3. vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

    这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...

  4. Vue2.0 官方文档学习笔记

    VUE2.0官方文档 基础部分: 1.VUE简介 Vue是一个基于MVVM的框架,其中M代表数据处理层,V代表视图层即我们在Vue组件中的html部分,VM即M和V的结合层,处理M层相应的逻辑数据,在 ...

  5. pm2 官方文档 学习笔记

    一.安装 1.安装 npm install pm2 -g 2.更新 npm install pm2 -g && pm2 update pm2 update 是为了刷新 PM2 的守护进 ...

  6. SpringBoot官方文档学习(三)配置文件、日志、国际化和JSON

    一.Profiles Spring配置文件提供了一种方法来隔离应用程序配置的各个部分,并使其仅在某些环境中可用.任何@Component.@Configuration或@ConfigurationPr ...

  7. Less 官方文档学习笔记

    LESS 是css的一种扩展,它的编辑器是基于node.js 的less.js,将less文件编译成css文件(可压缩). 其中的概念: 变量:定义变量来代替某个值,只能编译一次,本质是“常量”.例如 ...

  8. vue.js官方文档 PDF

    链接:https://pan.baidu.com/s/1jHMBb5W 密码:gsks

  9. Spark监控官方文档学习笔记

    任务的监控和使用 有几种方式监控spark应用:Web UI,指标和外部方法 Web接口 每个SparkContext都会启动一个web UI,默认是4040端口,用来展示一些信息: 一系列调度的st ...

随机推荐

  1. CSS 按钮

    总结有关按钮的各种样式 ㈠基本按钮样式 看一下没有进行css样式设计时按钮的样子与进行样式设计的按钮样子 <!DOCTYPE html> <html> <head> ...

  2. Spring CommonsMultipartResolver 上传文件

    转:http://yanglei008.iteye.com/blog/246920 ...Controller...{ // 创建一个通用的多部分解析器 CommonsMultipartResolve ...

  3. Eclipse中文件结构的树形显示问题

    问题描述:在Eclipse中的SpringBoot文件显示层级消失. 这种情况下编辑代码的效率大大下降. 原因:Eclipse的工作模式不正确.上面的工作模式是Java模式.实际上应采用JavaEE模 ...

  4. B/S文件上传下载解决方案

    需求: 项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在20G内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以20G来进行限制. PC端全平台支持,要求支持Window ...

  5. AngularJS 前端 MVC 的设计与搭建

    代码 #未引入MVC框架之前的代码 <!doctype html> <html> <head> <meta charset="UTF-8" ...

  6. C++ list用法总结

    头文件 #include<list> 声明一个int型的list:list a: 1.list的构造函数 list<int>a{1,2,3} list<int>a( ...

  7. Python GUI教程(六):使用Qt设计师进行窗口布局

    本篇介绍使用qt设计师进行GUI窗口的布局管理,主要包含以下内容: 使用Qt设计师布局我们的窗口部件: 垂直布局: 水平布局: 网格布局: 使用间隔: 使用“伙伴”将label标签与窗口部件进行连接. ...

  8. win10 exe如何添加或禁用开机自启动项

    一.添加开机自启动 1,先打开存放自启动软件文件的文件夹 方法①:在文件搜索框中输入或粘贴以下地址: C:\ProgramData\Microsoft\Windows\Start Menu\Progr ...

  9. Android_(控件)动态添加或删除Spinner下拉菜单

    使用ArrayList动态数组的依赖性实现动态增减Spinner下拉菜单选项功能. 设置一个EditText输入框,当用户输入了文字并单击[添加]按钮的同时,就会将输入的值添加Spinner至下拉菜单 ...

  10. BytesWritable 长度问题(多出空格)

    在使用 BytesWritable 进行小文件合并时,发现长度与原类容不一致,会多出一些空格 测试代码 @Test public void test() { String str = "aa ...