创建一个Vue实例

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

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

数据与方法

当一个Vue实例被创建时,它向Vue的响应式系统中加入了其data对象中能找到的所有属性。当这个属性的值发生变化时,视图将产生"响应",即匹配更新后的值。

//我们的数据对象
var data = {a: 1} //该数据对象加入到vue实例中
var vm = new Vue({
data: data
}) //获得这个实例上的属性
//返回源数据中对应的字段
vm.data == data.a // => true //设置属性也会影响
vm.a = 2
data.a //2

值得注意的是只有当实例被创建时data中存在的属性才是响应式的。

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

var data = {a: 1}
var vm = new Vue({
el: '#example',
data: data
}) vm.$data === data // true
vm.$el === document.getElementById('example') // true vm.$watch('a', function(newValue, oldValue){
//这个回调将在vm.a改变后调用
})

实例生命周期钩子

created()可以用来在一个实例被创建之后执行代码。

生命周期钩子的this上下文指向调用它的Vue实例。

关于生命周期的可以接我另外一篇文章:https://segmentfault.com/a/11...

原文地址:https://segmentfault.com/a/1190000016836774

Vue实例和生命周期的更多相关文章

  1. Vue.js-07:第七章 - Vue 实例的生命周期

    一.前言  在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...

  2. vue实例的生命周期

    Vue实例的生命周期也就是这个实例从出生到死亡的过程,所以我在文档原图上把这个周期大致分为创建过程 | 运行过程 | 销毁过程三个阶段,不同结果或又分为一些小的阶段 在第一个阶段,创建阶段,会完成Vu ...

  3. 浅析vue实例的生命周期(生命周期钩子)

    “每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...

  4. 从零开始学 Web 之 Vue.js(三)Vue实例的生命周期

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  6. 关于Vue实例的生命周期(2)

     关于Vue实例的生命周期(2) 创建(create)->挂载(mount)->更新(update)->销毁(destory) 钩子函数触发事件 beforeCreate 在实例初始 ...

  7. 7.Vue实例的生命周期

    1.Vue实例的生命周期: 什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子 = 生命周期函数 = 生命周期事件 2. 主要的生命 ...

  8. 黑马vue---37-38、vue实例的生命周期

    黑马vue---37-38.vue实例的生命周期 一.总结 一句话总结: created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板 moun ...

  9. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  10. Vue 实例以及生命周期

    最简单的 Vue 实例 //html <div id="app"> {{message}} </div> //javascript var vm = new ...

随机推荐

  1. NET高性能IO

    System.IO.Pipelines: .NET高性能IO https://www.cnblogs.com/xxfy1/p/9290235.html System.IO.Pipelines是一个新的 ...

  2. mysql导入sql文件错误#1044 - Access denied for user 'root'@'localhost'

    在我的个人知识管理中,经常用到mysql数据库,wordpress搭建的worklog.搜索测试数据.我blog的测试环境等.我在自己的电脑上整了WAMP(Windows Apache MySQL P ...

  3. MVC 路由URL重写

    在现今搜索引擎制霸天下的时代,我们不得不做一些东西来讨好爬虫,进而提示网站的排名来博得一个看得过去的流量. URL重写与优化就是搜索引擎优化的手段之一. 假如某手机网站(基于ASP.NET MVC)分 ...

  4. Java基础知识 ——JDK,JRE和JVM

    1.开发简单的Java程序过程: 名词解释: JDK:JDK是 Java 语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.JDK是整个java开发的核心,它包含了JAVA的运行 ...

  5. css position 定位模式

     定位 定位模式: static relative absolute fixed 边偏移 :top bottom left right 一般的定位必须要有定位模式以及边偏移 static 静态定位 默 ...

  6. JavaScript中函数对象和对象的区别

    function Test (word) { console.log (word); } Test('哈哈,我是函数'); new Test('哈哈,我是对象'); //将以上的调用方式换种通俗易懂的 ...

  7. web端 复合控件 响应回发

    AutoPostback="true";   自动提交 RdiobuttonList 属性→设计→编辑项→{ Enabled   是否可用 selected 是否选中 Text   ...

  8. python基础教程总结13——网络编程,

    1.网络设计模块 1.1 socket模块    根据连接启动的方式以及本地套接字要连接的目标,套接字之间的连接过程可以分为三个步骤:服务器监听,客户端请求,连接确认. 1)服务器监听:是服务器端套接 ...

  9. 重温Javascript(一)-基本概念

    工作中要用到JavaScript,一组复习笔记. 一些看法 1. 想想JavaScript目前最常用的宿主环境,浏览器或者服务端V8,都是单线程,所以不用过多的考虑并发的问题,如果是协程来实现异步的方 ...

  10. 弄了一个星期的wp 8.1,吐血的感觉

    看到8.1出来这么久了,心痒难耐,忍不住想重新把应用写一遍,于是上个星期开始动手,用的mvvm模式,结果一路下来,sqlce不能用了,那好吧,我用sqlite,webrequest变成httpclie ...