构造器

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动

var vm = new Vue({
  //选项
})

在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

属性与方法

每个 Vue 实例都会代理其 data 对象里所有的属性

我们做一个测试：

var data1 = {
    name:'liyang'
}
var vm1 = new Vue({
    el:'#app1',
    data:data1
});

然后检查data1.name是否等于vm1.name

console.group('data1.name === vm1.name');
console.log(data1.name === vm1.name);
console.groupEnd();

检查设置属性和原始数据之间的联系

vm1.name = 'hello';
console.group('data1.name');
console.log(data1.name);
console.groupEnd();

data1.name = 'world';
console.group('vm1.name');
console.log(vm1.name);
console.groupEnd();

注意只有被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

VUE自带的实例属性与方法测试

HTML

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="app2">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">自带的属性</h3>
        </div>
        <div class="panel-body">
            <input type="text" class="form-control ma-b-10" v-model="val">
            <button type="button" class="btn btn-primary">{{val}}</button>
        </div>
    </div>
</div>

JavaScript

var data2 = {
    val:'Hello'
}
var vm2 = new Vue({
    el:'#app2',
    data:data2
});

测试：

console.group('vm2.$data === data2');
console.log(vm2.$data === data2);
console.groupEnd();

console.group('vm2.$el');
console.log(vm2.$el);
console.groupEnd();

console.group('vm2.$el === document.getElementById(\'app2\')');
console.log(vm2.$el === document.getElementById('app2'))
console.groupEnd();

输出结果：

测试$watch

写如下的测试程序：

vm2.$watch('val', function (newVal, oldVal) {
  console.log('val发生了改变 旧值是' + oldVal + ' 新值是' + newVal);
})

实例的生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。例如，created 这个钩子在实例被创建之后被调用

JavaScript

var vm3 = new Vue({
    el:'#app3',
    data:{
        button:'我是一个按钮'
    },
    created:function(){
        console.log('vm3被创建了');
        console.log(this);
    }
});

官网给出的的生命周期示例：

推荐一下自己的公众号，基本每天都会发一些自己的学习笔记，还有关于设计一类的文章(其实我个人对设计也很感兴趣，比如UI，3D之类的)，欢迎大家关注，多多交流

扫描二维码关注我哦~