何为构造器

对于Vue.js 项目来说，每个应用的起步都需要使用Vue.js的构造器函数创建一个根实例，如下

// 逻辑部分代码，建立Vue实例
var vm = new Vue({
    // 选项
})

在实例化Vue.js 的时候，需要传入一个选项对象，它包含数据模板，挂载元素，方法和生命周期钩子等选项，全部的选项可以在api中查看。

对于已经创建的相关的构造器，可以扩展为其他构造器，相当于对某一构造器的继承，从而达到可复用组件构造器的目的，代码如下

var MyComponent = Vue.extend({

})

// 所有的 MyComponent 实例都将会以预定义的扩展选项被创建
var MyComponentInstance = new MyComponent()

实例属性和方法

每个Vue实例在被创建的时候，都需要经过一系列的初始化的过程，而在初始化的过程中，加入一些data属性，即表示此实例的一些响应事件或者数据属性等，例如，需要设置数据监听，编译模板，和挂载实例到DOM，在数据变化时更新DOM，在这个过程中也会执行一些叫做生命周期的函数，给予用户在一些特定场景下的执行其他代码的机会。
data对象中既定的值发生改变，视图会自动产生响应并及时匹配值，产生响应的效果，例如可以初始化如下的代码。

// 我们的数据对象
var data = {a:1}
// 该对象被加入到一个Vue.js 的实例中
var vm = new Vue({
    data: data
})
// 他们引用相同的对象
vm.a === data.a // true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// 反之亦然
data.a = 3
vm.a // => 3

当这些数据改变的时候，视图会重新渲染。

生命周期

当出现数据监听，编译模板，挂载实例到DOM和在数据变化时更新DOM等操作，会在此时允许插入开发者添加到特定的代码，比如以下的代码，created钩子事件可以用来在一个实例创建之后执行代码段

// 逻辑部分代码，建立Vue实例
new Vue({
    data: {
        a:1
    }
})
// 相关方法定义
created: function() {
    // this 指向vm实例
    console.log("a is:" + this.a)
}
// => "a is: 1"

为什么叫做钩子，主要是针对于某个实例事件发生后需要响应已经预设好的代码，即某一个钩子，勾住了一个实例的状态和事件。
也有一些钩子，在实例生命周期的不同场景下调用，如mounted，updated和destroyed，钩子的this指向调用它的Vue.js 实例。

Vue.js 路由

动态路由

编写src/router/index.js 设定一条新的路由

// 引入相关的代码包
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWOrld'
import User from '@/components/User'

// 使用引入的包
Vue.use(Router)
export default new Router({
    // 定义路由
    routers: [
        {
            path: '/'
            name: "helloWorld"
            component: HelloWorld
        }
    ]
})

上述配置，/ 路由会映射到相同的路由上，也就是说，会访问到HelloWorld页面