Vue.js系列之二Vue实例
每个Vue应用都是通过Vue函数创建一个新的Vue实例开始,代码如下:
var vm=new Vue({});
{}是创建Vue应用时的参数对象
1、Vue实例的data属性
当一个Vue对象被创建时,它向Vue的响应式系统中加入了其参数对象的data属性中所有的属性,当data属性中的属性发生改变时,视图会随之产生改变,根据新的属性值更新视图.代码如下:
<body>
<div id="tDiv">
{{message}}
</div>
</body>
<script>
var currentPage=new Vue({
el:"#tDiv", //指定绑定的目标dom元素的Id
//绑定数据源
data:{
message:"Hello World By Vue"
}
});
</script>
现在通过控制台改变data属性中的message属性,如下图:
可以发现视图也发生了对应的改变.
但是,这里需要注意的是只有哪些在实例被创建时就已经注册到data属性中的属性是响应式的,也就是说如果你后期向data属性中追加了属性,并且修改了该属性值,属兔是不会发生任何改变的.
如果你知道你可能在晚些的时候需要用到一个属性,但是它一开始不存在或者为空,那么你仅需要给该属性设置一个初始值
2、Vue实例暴露的有用的实例属性和方法
Vue实例暴露了一下有用的实例方法和属性,他们都有前缀$,以便于用户定义的属性区分开来,例如:
var data={a:1};
var currentPage=new Vue({
el:"#tDiv", //指定绑定的目标dom元素的Id
//绑定数据源
data:data
});
console.log(data===currentPage.$data);
console.log(currentPage.$el);
currentPage.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
3、实例的生命周期
每个Vue实例在被创建的过程都需要经历一系列的初始化过程,例如要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM等.整个过程Vue也提供了类似管道模型的机制,设置了一些可注册的事件,可以通过这些事件来影响整个Vue实例生成的过程.例如:
可以通过注册一个created事件,该事件会在Vue实例被创建之后执行,代码如下:
<body>
<div id="currentPage">
</div>
</body>
<script type="text/javascript">
var page=new Vue({
el:"#currentPage",
data:{
message:"Hello Vue"
},
created:function () {
alert('Vue实例被创建之后执行的方法'+this.message);
}
});
</script>
注:created事件中的this指向当前Vue实例.
Vue.js系列之二Vue实例的更多相关文章
- Vue.js系列(一)：Vue项目创建详解
引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...
- Vue.js系列之一初识Vue
在看vue.js之前,可以先看这两篇文章,对于为什么要使用vue会有一定帮助 1.Vue.js !important 2.界面之下:还原真实的MV*模式 !important 3.web前端优化之re ...
- Vue.js系列之三模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Vue基础系列（二）——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- Vue源码分析(二) : Vue实例挂载
Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...
- 前端框架vue.js系列（9）：Vue.extend、Vue.component与new Vue
前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...
- Vue.js是什么，vue介绍
Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结
大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...
随机推荐
- 浮点数转byte数组
; float b=34.56745f; float c=0.0; ,,,}; byte* t=fbs; float2Bytes(t,b); unsigned int addrF=(unsigned ...
- HDU 3897 Base Station (网络流，最大闭合子图)
题意:给定n个带权点m条无向带权边,选一个子图,则这个子图的权值为 边权和-点权和,求一个最大的权值. 析:把每条边都看成是一个新点,然后建图,就是一个裸的最大闭合子图. 代码如下: #pragma ...
- python文件对比
#-*- encoding:utf-8 -*- class loadDatas(object): def __init__(self): self.path='./data' def load_com ...
- 整理iOS9适配中出现的坑
一.NSAppTransportSecurity iOS9让所有的HTTP默认使用了HTTPS,原来的HTTP协议传输都改成TLS1.2协议进行传输.直接造成的情况就是App发请求的时候弹出网络无法连 ...
- 用Lucene实现分组，facet功能，FieldCache
假如你像用lucene来作分组,比如按类别分组,这种功能,好了你压力大了,lucene本身是不支持分组的. 当你想要这个功能的时候,就可能会用到基于lucene的搜索引擎solr. 不过也可以通过编码 ...
- [翻译] FastReport "Text" 对象中使用表达式
文本对象的最重要的功能之一是它不仅能够显示静态文本还能显示表达式.表达式混合在正常的文本内容中,让我们看一个简单的例子,他是如何工作的.在文件对象的内容中,输入以下字符: Hello, World! ...
- C++虚函数表(vtbl)
C++的虚函数的作用就是为了实现多态的机制,利用内存的指针偏移来实现将基类型的指针指向的内存空间用子类对象来初始化.这样经过内部虚表的运作,实现可以通过基类指针来调用子类所定义的方法. 这种技术,其实 ...
- 8086汇编语言(1)虚拟机安装ms-dos 7.1
8086汇编语言(1)虚拟机安装ms-dos 7.1 文/玄魂 前言 在开始这一系列文章之前,我想先说下,对于古董级的8086汇编到底还以有没有学习的必要.这里我说下我要从8086开始学习,而不是从w ...
- ASP.NET在请求中检测到包含潜在危险的数据,因为它可能包括 HTML标记或脚本
背景:程序迁移到新的服务器上,在程序进行修改操作时,提示包含危险数据.然而在旧服务器上却没有问题,我猜想的可能是,新服务器IIS安装的ASP.NET版本框架高于以前的IIS上的版本框架,导致web.c ...
- 蚂蚁男孩.缓存组件（Framework.Mayiboy.Caching）
它能做什么? 主要是用来方便使用缓存而诞生,该组件封装了RunTimeCache.Memcached.Redis的使用,通过简单配置就能高效快速使用起来. 使用说明 一. 下载源码,自己手动编译 ...