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控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...
随机推荐
- C++之类和对象的使用（一）
对象的初始化 在声明类时直接对数据成员初始化是错误的!下面的例子时错误的!! class Time{ hour =; minitu=; sec=; } //因为类并不是一个实体,而是一种抽象类型,并不 ...
- linxu ssh 双端认证 不成功之authorized_keys
linxu ssh 双端认证 不成功之authorized_keys liunx双端认证可以让我们更简便的在两台服务器之间传输文件,配置暂且不说,网上有大部分的文章可以搜索到,今天我要说的是在不成功的 ...
- POJ 3686 The Windy's (最小费用流或最佳完全匹配)
题意:有n个订单m个车间,每个车间均可以单独完成任何一个订单.每个车间完成不同订单的时间是不同的.不会出现两个车间完成同一个订单的情况.给出每个订单在某个车间完成所用的时间.问订单完成的平均时间是多少 ...
- The MATLAB Profiler
function a = myFunc(a,b,c,d,e) : a = a-b + c^d*log(e); end end >> profile on; myFunc(a,b,c,d,e ...
- JAVA实现WC.exe功能
项目要求 实现一个统计程序,它能正确统计程序文件中的字符数.单词数.行数,以及还具备其他扩展功能,并能够快速地处理多个文件. 具体功能要求: 程序处理用户需求的模式为: wc.exe [paramet ...
- TransactionScope事务使用
using (System.Transactions.TransactionScope T_Scope = new System.Transactions.TransactionScope()) { ...
- 基于C#语言MVC框架NPOI控件导出Excel表数据
控件bin文件下载地址:https://download.csdn.net/download/u012949335/10610726@{ ViewBag.Title = "dcxx" ...
- odoo：开源ERP/安装和初始设置
1.1 Odoo的结构 Odoo使用Web浏览器来访问Odoo服务,因此你的Odoo服务器可以部署在较远的地方(如另外一个城市),用户的计算机上只需安装谷歌.火狐或 IE9 以上的浏览器,所以Web客 ...
- java项目部署在linux上
在将java项目在linux上之前我们需要准备一下,首先是 一个打成war包的java项目,一个contes的系统,还有就是tomcat和jdkl的压缩包,可以在官网下载, jdk安装 先卸载cent ...
- C语言 IPv6 十六进制 转 十进制
#include <stdio.h> #include <string.h> #include <math.h> //ipv4地址转换 int ipv4_to_i( ...