vue爬坑之路2----vue实例
构造器
每个vue.js应用都是通过构造函数Vue穿件一个Vue的根实例启动的:
var vm = new Vue({
//选项
})
在实例化Vue时,需要传入一个选项对象,他可以包含数据,模板,挂在元素,方法,生命周期钩子等选项。
vue构造器是可扩展的,实际上,所有的vue.js组件其实都是被扩展的vue实例。
var MyComponent = Vue.extend({
//扩展选项
})
//所有的’MyComponent'实例都将以预定义的扩展选项被创建
var myComponentInstance = new MyComponent();
属性与方法
每个Vue实例都会代理七data对象里所有的属性:
var data = {a:1};
var vm = new Vue({
data:data
});
vm.a===data.a;// ->true
//设置属性也会影响到原始数据
vm.a = 2;
data.a ;// ->2
//反之亦然
data.a = 3;
vm.a; //->3
注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。
除了data属性,Vue实例暴露了一些有用的实例属性。这些属性与方法都有前缀$,以便于与代理的data属性区分。例如:
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(newVal,oldVal){
//这个回调将在'vm.a'改变后调用
})
注意,不要在实例属性或者回调函数中(如vm.$watch('a',newVal => this.myMethond()))使用箭头函数。因为箭头函数绑定父上下文,所以this不会像预想的一样是Vue实例,而是this.myMethod未被定义。
实例生命周期
每个Vue实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模板、挂在实例到DOM,然后在数据变化时更新DOM。在这个过程中,实例也会调用一些生命周期钩子,这就给我们提供了执行自定义逻辑的机会。例如,created这个钩子在实例被创建之后调用:
var vn = new Vue({
data:{
a:1
},
created: function (){
//this 指向 vm实例
console.log('a is'+this.a)
}
}) // ->'a is: 1'
Vue.js是否有‘控制器’的概念?答案是:没有。
所谓“生命周期”,就是在类实例化的过程中,构造函数执行的不同阶段。
“钩子”就是在某个阶段给你一个做某些处理的机会,当做回调函数就行。
转载于:https://www.cnblogs.com/koutuzai/p/6666206.html
vue爬坑之路2----vue实例相关推荐
- Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https: ...
- (转)Vue 爬坑之路(四)—— 与 Vuex 的第一次接触
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...
- Vue 爬坑之路(四)—— 与 Vuex 的第一次接触
2019独角兽企业重金招聘Python工程师标准>>> 在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 htt ...
- Vue 爬坑之路(十)—— Vue2.5 + Typescript 构建项目
Typescript 在前端圈已经逐渐普及,Vue 2.5.0 改进了类型声明,使得对 TypeScript 更加友好 不过要想在项目中直接使用 TypeScript 仍然需要对项目进行一些改造 P ...
- Vue爬坑之路 二:使用Muse-UI前端框架及axios,实现简单登录页
一:安装UI组件 二:创建基本的vue组件 三:使用axios与后台进行数据交互 1:安装axios 2:axios登录的实现 一:安装UI组件 Muse UI 基于 Vue2.0 开发,Vue2.0 ...
- VUE 爬坑之旅 -- 用 ES6 语法写一个工具类,并全局引用
在我前面的有一篇文章里有说过怎么引入外部的 JS 文件,详情见 VUE 爬坑之旅– 如何对公共JS,CSS进行统一管理,全局调用 .这里所说的外部 JS 文件指的是用 ES6 之前的老语法编写的各种 ...
- Vue 爬坑之旅 -- 微信网页授权
现在的 H5 开发,微信授权和微信分享基本是必备功能,昨天将微信分享的相关功能和踩坑过程做了一个总结,今天就来说下微信授权的功能具体到 vue 项目中该要怎么做. Vue 爬坑之旅 – history ...
- React爬坑之路三:Dva
前两篇写了react各种基本操作和主要概念 但其实没必要那么复杂直接用框架就好啦 这年头前端框架真是一睁眼就多出好几个 傻瓜级教程写的不合理的地方请批评指正 React官网:https://react ...
最新文章
- MEMS传感器的未来在哪?
- 阿里云分析性数据库的发展历史
- 扒取的国外的后台管理系统的界面
- 推荐一个好玩的鼠标和键盘使用情况统计软件,完全免费
- 成功通过pmp_这就是你为啥要学PMP!!!
- wav文件头损坏_Dex文件结构学习
- nginx启动重启与升级以及检测配置文件
- 向虚拟机发短信(android SMS 调试)
- 求解最长回文串 manachar算法
- 百度网盘高速直链提取
- HDU 1429 bfs 状态压缩
- 2.2.9 12306火车订票验证码处理
- html的 作用 是什么,html的作用
- 利用Gensim训练关于英文维基百科的Word2Vec模型(Training Word2Vec Model on English Wikipedia by Gensim)
- AP微积分课程难吗?备考建议来啦
- [原创]测试用例设计之“正交实验设计”法
- 杀鸡用牛刀:Sketch流程图绘制体验
- MongoDB从入门到实战(三):创建数据库和集合
- Android 4G上网流程分析
- PS5运行Linux,索尼发布新驱动 PS5手柄现已支持Linux系统用户
热门文章
- 普中科技51单片机_【笔记】普中科技-51单片机-静态数码管显示
- mac的python怎么输入中文_无法在python IDE(Mac OS X)中输入unicode
- mysql输入中文出现 号_MySQL插入中文数据出现?号
- ionic获取手机通讯录
- 任正非谈鸿蒙系统问题不大,任正非谈鸿蒙系统:两三年重建生态,有信心打造全球生态...
- 正弦函数_题型和解析 | 三角函数(补充)
- 快速使用nexus搭建maven本地私服
- 和方舟rust一样的手游_偶像梦幻祭2新活动 ES手游全新开服
- android返回页面代码实现,Intent携带信息返回上一个界面实现基本信息的设置
- java响应鼠标滚轮事件_javascript滚动条响应鼠标滑轮的实现上下滚动事件