Vue实例

构造器

html

<div id="app8">
    {{message}}
</div>

js

//创建一个可复用的组件构建器
var MyComponent = Vue.extend({
    data:function () {
        return {
            message:"ddddddd"
        }
    }
})
//实例化
var myComponentInstance = new MyComponent();
//绑定到id为app8的DOM节点上
myComponentInstance.$mount('#app8');

属性与方法

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

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`  改变后调用
})

生命周期

引用官网的生命周期图

下面来个例子：
html

<div id="app2">
    <span v-bind:title="message">2、v-bin绑定title</span>
</div>

js

var app2 = new Vue({
    el: "#app2",
    data: {
        message: '页面加载于 ' + new Date()
    },
    beforeCreate:function () {
        console.log('beforeCreate a is: ' + this.message)
    },
    created:function () {
        console.log('created a is: ' + this.message)
    },
    beforeMount:function () {
        console.log('beforeMount a is: ' + this.message)
    },
    mounted:function () {
        console.log('mounted a is: ' + this.message)
    },
    beforeUpdate:function () {
        console.log('beforeUpdate a is: ' + this.message)
    },
    updated:function () {
        console.log('updated a is: ' + this.message)
    },
    activated:function () {
        console.log('activated a is: ' + this.message)
    },
    deactivated:function () {
        console.log('deactivated a is: ' + this.message)
    },
    beforeDestroy:function () {
        console.log('beforeDestroy a is: ' + this.message)
    },
    destroyed:function () {
        console.log('destroyed a is: ' + this.message)
    }
});
setTimeout('app2.message="setTimeout 3秒后更换message的值，绑定的title会对应的改变"', 3000);
app2.$watch('message', function (newVal, oldVal) {
    console.log("swatch到message改变");
    alert("\"2、v-bin绑定title\"绑定的title改变了");
    alert("从："+oldVal+"，变成："+newVal);
})

控制台结果

beforeCreate a is: undefined
helloVue.js:24 created a is: 页面加载于 Wed Jul 12 2017 15:55:51 GMT+0800 (中国标准时间)
helloVue.js:27 beforeMount a is: 页面加载于 Wed Jul 12 2017 15:55:51 GMT+0800 (中国标准时间)
helloVue.js:30 mounted a is: 页面加载于 Wed Jul 12 2017 15:55:51 GMT+0800 (中国标准时间)
helloVue.js:33 beforeUpdate a is: setTimeout 3秒后更换message的值，绑定的title会对应的改变
helloVue.js:53 swatch到message改变
helloVue.js:54 "2、v-bin绑定title"绑定的title改变了
helloVue.js:55 从：页面加载于 Wed Jul 12 2017 15:55:51 GMT+0800 (中国标准时间)，变成：setTimeout 3秒后更换message的值，绑定的title会对应的改变
helloVue.js:36 updated a is: setTimeout 3秒后更换message的值，绑定的title会对应的改变

在created事件后，message的值才在Vue实例中创建。
在beforUpdate事件时，Vue实例中的message已经被改变。
在swatch监听到Vue实例中的message改变了之后再修改DOM的内容。
更新完DOM的内容后执行updated函数。