vue学习笔记 实例(二)
2017-02-03 18:29
495 查看
var data = {a: 1} var vm = new Vue({ el: '#example', data: data, created: function () { // `this` 指向 vm 实例 console.log('created a is: ' + this.a);//1 this.a = 2; }, mounted: function () { console.log('mounted a is: ' + this.a);//2 } }) vm.$data === data // -> true vm.$el === document.getElementById('example') // -> true vm.$watch('a', function (newVal, oldVal) { }); console.log(vm.a);//2 console.log(data.a);//2
创建Vue的根实例 就是
var vm = new Vue({ // 选项 })
选项有很多种 比如可以传入需要操作的DOM元素(挂载元素),传入data数据,模板,设置方法,生命周期钩子等等
http://cn.vuejs.org/v2/api/#选项-数据
实例上有$符号开头的一些变量,是vue实例提供的属性和方法,为了和data属性区分(因为data里的属性会直接暴露给vm变量),比如$data就是指传入的data对象(不过在实例化Vue后,传入的data被进行了改造),还有$el指的就是传入的el DOM元素,$watch可以侦听回调,另外还有一些生命周期相关的钩子函数,这些钩子函数(
mounted、
updated、
destroyed)会在实例的不同生命周期被调用,完整的生命周期参考下图:
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` 改变后调用 })
生命周期示意图:
另外,比较高级的用法是扩展Vue构造器,写法如下:
var MyComponent = Vue.extend({ // 扩展选项 }) // 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建 var myComponentInstance = new MyComponent()
这样做的话 就不是new Vue了,而是new 新构造器名字(),实际上所有的Vue组件都是被扩展的Vue实例。
相关文章推荐
- Vue 2.0的学习笔记: Vue实例和生命周期
- Vue学习笔记(1) 一开始的使用以及Vue实例的详解
- vue学习笔记---vue实例
- C++/GDI+ 学习笔记(五)——应用实例——半透明的阴影效果
- CGI实例导引之学习笔记
- OWC学习笔记-电子表格(Spreadsheet)第一个实例
- Javascript教程,javascript入门,javascript学习笔记(经典实例)
- Web2.0之Ajax 学习笔记与应用实例(转载)
- (学习笔记)简单正则表达式的使用实例[javascript]
- Jpcap包的学习笔记(五)如何使用JpcapCaptor实例来捕捉网络数据包(上部)
- appfuse实例中的web.xml学习笔记之过滤器
- DNS与BIND学习笔记 5 (实例操练)
- java学习笔记4:对象的初始化顺序(官方实例)
- [学习笔记]jsp+javaBean+Servlet 的设计模式MVC 的实例
- XHTML学习笔记(3)之布局实例
- Jboss Seam 学习笔记-运行实例的注意点
- Hibernate 实例学习笔记
- 一个AI实例-学习笔记
- Spring学习笔记:第二章 Spring中IoC的入门实例
- Windows Workflow Foundation (wwf) 在宿主中使用参数与实例通信 --学习笔记(二)