Vue实例和生命周期
创建一个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实例和生命周期的更多相关文章
- Vue.js-07:第七章 - Vue 实例的生命周期
一.前言 在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...
- vue实例的生命周期
Vue实例的生命周期也就是这个实例从出生到死亡的过程,所以我在文档原图上把这个周期大致分为创建过程 | 运行过程 | 销毁过程三个阶段,不同结果或又分为一些小的阶段 在第一个阶段,创建阶段,会完成Vu ...
- 浅析vue实例的生命周期(生命周期钩子)
“每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...
- 从零开始学 Web 之 Vue.js(三)Vue实例的生命周期
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- 关于Vue实例的生命周期(2)
关于Vue实例的生命周期(2) 创建(create)->挂载(mount)->更新(update)->销毁(destory) 钩子函数触发事件 beforeCreate 在实例初始 ...
- 7.Vue实例的生命周期
1.Vue实例的生命周期: 什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子 = 生命周期函数 = 生命周期事件 2. 主要的生命 ...
- 黑马vue---37-38、vue实例的生命周期
黑马vue---37-38.vue实例的生命周期 一.总结 一句话总结: created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板 moun ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- Vue 实例以及生命周期
最简单的 Vue 实例 //html <div id="app"> {{message}} </div> //javascript var vm = new ...
随机推荐
- NET高性能IO
System.IO.Pipelines: .NET高性能IO https://www.cnblogs.com/xxfy1/p/9290235.html System.IO.Pipelines是一个新的 ...
- mysql导入sql文件错误#1044 - Access denied for user 'root'@'localhost'
在我的个人知识管理中,经常用到mysql数据库,wordpress搭建的worklog.搜索测试数据.我blog的测试环境等.我在自己的电脑上整了WAMP(Windows Apache MySQL P ...
- MVC 路由URL重写
在现今搜索引擎制霸天下的时代,我们不得不做一些东西来讨好爬虫,进而提示网站的排名来博得一个看得过去的流量. URL重写与优化就是搜索引擎优化的手段之一. 假如某手机网站(基于ASP.NET MVC)分 ...
- Java基础知识 ——JDK,JRE和JVM
1.开发简单的Java程序过程: 名词解释: JDK:JDK是 Java 语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.JDK是整个java开发的核心,它包含了JAVA的运行 ...
- css position 定位模式
定位 定位模式: static relative absolute fixed 边偏移 :top bottom left right 一般的定位必须要有定位模式以及边偏移 static 静态定位 默 ...
- JavaScript中函数对象和对象的区别
function Test (word) { console.log (word); } Test('哈哈,我是函数'); new Test('哈哈,我是对象'); //将以上的调用方式换种通俗易懂的 ...
- web端 复合控件 响应回发
AutoPostback="true"; 自动提交 RdiobuttonList 属性→设计→编辑项→{ Enabled 是否可用 selected 是否选中 Text ...
- python基础教程总结13——网络编程,
1.网络设计模块 1.1 socket模块 根据连接启动的方式以及本地套接字要连接的目标,套接字之间的连接过程可以分为三个步骤:服务器监听,客户端请求,连接确认. 1)服务器监听:是服务器端套接 ...
- 重温Javascript(一)-基本概念
工作中要用到JavaScript,一组复习笔记. 一些看法 1. 想想JavaScript目前最常用的宿主环境,浏览器或者服务端V8,都是单线程,所以不用过多的考虑并发的问题,如果是协程来实现异步的方 ...
- 弄了一个星期的wp 8.1,吐血的感觉
看到8.1出来这么久了,心痒难耐,忍不住想重新把应用写一遍,于是上个星期开始动手,用的mvvm模式,结果一路下来,sqlce不能用了,那好吧,我用sqlite,webrequest变成httpclie ...