var vm = new Vue({
el: '#app', // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
// 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
data: { // data 属性中，存放的是 el 中要用到的数据
msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
},
methods: {}, // 这个 methods属性中定义了当前Vue实例所有可用的方法
computed:{
// 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；并不会把 计算属性，当作方法去调用；
// 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；
// 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值
// 计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，任何数据都没有发生过变化，则不会重新对 计算属性求值；
'计算属性名称': function(){},
},
filters:{ // 定义私有过滤器
过滤器名称: 处理函数
},
directives: { // 自定义私有指令
'指令名称': {
bind: function(el, binding) { ... }
},
'指令名称': function(el, binding){
// 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
}
},
components: { // 定义实例内部私有组件的
'组件名称': {
template: '模板Id或模板内容',
data(){
return { ... };
},
props: [], // 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的 props 中的数据，都是只读的，无法重新赋值
directives: {},
filters: {},
components: {},
methods: {
方法名(){}
}
}
},
beforeCreate() { // 生命周期函数，表示实例完全被创建出来之前，会执行它
// 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
},
created() { //生命周期函数
// 在 created 中，data 和 methods 都已经被初始化好了！
// 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
},
beforeMount() { // 生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
// 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
},
mounted() { // 生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
// 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
},
// 接下来的是运行中的两个事件
beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？ 数据肯定被更新了】
// 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
},
updated() {
// updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
},
watch:{
// 可监听 data 中指定的数据变化，然后出发这个 watch 中对应的 function 处理函数
'data中定义的变量':function(newVal, oldVal){},
// 可监视路由地址的改变
// this.$route.path
'$route.path':function(newVal, oldVal){},
},
router: router
});
// 创建一个路由对象
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
],
linkActiveClass: '激活相关的类'
});
