Vue.js 学习(2) -- Vue实例
2017-05-19 17:06
543 查看
Vue.js都是通过new Vue…创建一个Vue的根实例来开始运行的,上一节我们已经看到了很多这样格式的栗子:
在setting中,可以定义我们需要的数据、模板、挂载元素、方法、生命周期等选项。
除了代理data,Vue实例还暴露了一些有用的实例属性和方法,但是这些实例和方法都必须以$符号开头(有点像jQuery呢),这样我们就可以区分到底是在代理data,还是在访问vm实例自己的方法:
注:文章 Vue.js学习–xxx 中的代码均来自于Vue.js官网。
var vm = new Vue({ // ...我的代码,这里其实是传入了一个开发者定义的对象,这里暂时命名为setting。 })
在setting中,可以定义我们需要的数据、模板、挂载元素、方法、生命周期等选项。
data&属性:
Vue实例,也就是上文的vm,会代理起data对象中的所有属性,也就是,data的属性,可以用vm的属性的形式来直接访问,这样说可能不太好理解,来看一个栗子:var data = { a: 1 } var vm = new Vue({ data: data }) vm.a === data.a // -> true 说明vm代理了data // 设置属性也会影响到原始数据 vm.a = 2 data.a // -> 2 // ... 反之亦然 data.a = 3 vm.a // -> 3
除了代理data,Vue实例还暴露了一些有用的实例属性和方法,但是这些实例和方法都必须以$符号开头(有点像jQuery呢),这样我们就可以区分到底是在代理data,还是在访问vm实例自己的方法:
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.js学习–xxx 中的代码均来自于Vue.js官网。
相关文章推荐
- Vue.js学习记录之在元素与template中使用v-if指令实例
- vue.js学习——实例分析
- Vue.js实例学习:表单输入绑定
- Vue.js实例学习:Class 与 Style 绑定
- vue.js学习之入门实例
- Vue.js实例学习:条件渲染
- Vue.js学习和第一个实例
- Vue.js实例学习:组件
- Vue.js学习和第一个实例
- Vue.js 学习2 实例
- js学习实例3
- vue.js学习
- 实例学习Backbone.js(一)
- JS设计模式学习实例之单例模式
- Vue.js基本规则提炼总结及计算属性学习
- JS DOM编程艺术——JS综合实例—— JS学习笔记2015-7-29(第92天)
- JS学习之表格的排序简单实例
- 原生JS实例练习——控制div属性—— JS学习笔记2015-8-4(第93天)
- vue.js学习
- Vue.js实例练习