个人博客
构造器
每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例:
var vm = new Vue({
// 选项
})
一个 Vue 实例其实正是一个 MVVM 模式中所描述的 ViewModel ,因此在文档中经常会使用 vm 这个变量名。
在实例化 Vue 时,需要传入一个选项对象,他可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
可以扩展 Vue 构造器,从而用预定义选项创建可复用的组件构造器
var MyComponent = Vue.extend({
//扩展选项
})
// 所有的 ‘MyComponent’ 实例都将以预定义的扩展选项被创建
var myComponentInstance = new MyComponent()
属性与方法
每个 Vue 实例都会代理其 data 对象里所有的属性:
实例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<script>
var data = { a:1 }
var vm = new Vue({
data: data
})
alert(data.a === vm.a); //true
vm.a = 3
alert( data.a ) // 3
data.a = 5
alert( vm.a ) //5
</script>
</body>
</html>
只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,他不会触发视图更新。
除了这些数据属性,Vue 实例暴露了一些有用的实例属性和方法。这些属性与方法都有前缀 $ ,以便于代理的数据属性区分。
实例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<div id="div">
</div>
<script>
var data = { a : 2 }
var vm = new Vue({
el: '#div',
data: data
})
alert(vm.$data === data) //true
alert(vm.$el === document.getElementById('div')) //true
// $watch 是一个实例方法
vm.$watch('a' , function (newVal,oldVal) {
// 这个回调将在 ‘ vm.a ’ 改变后调用 , 运行结果如下图
alert('新值:'+newVal +"---老值"+ oldVal);
})
</script>
</body>
</html>
运行结果图
Vue 实例在创建时有一系列初始化步骤,例如:他需要建立数据观察,编译模板,创建必要的数据绑定。在此过程中,它也将调用一些生命周期钩子,给自定义逻辑提供运行机会。例如 created 钩子在实例创建后调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<script>
var vm = new Vue({
data:{
a:1
},
created: function () {
console.log('a is : ' + this.a) // a is : 1
}
})
</script>
</body>
</html>