Vue-笔记（1）

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: '激活相关的类'
});