# 一、介绍

Vue是一套构建用户界面的 渐进式框架。Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。
# 二、Vue实例
构造器
- 每个
Vue.js应用都是通过构造函数Vue创建一个Vue的根实例 启动的
var vm = new Vue({
// 选项
})
@前端进阶之旅: 代码已经复制到剪贴板
- 在实例化
Vue时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在API文档中查看
属性与方法
- 每个
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` 改变后调用
})
@前端进阶之旅: 代码已经复制到剪贴板
实例生命周期
var vm = new Vue(