基础知识

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

var vm = new Vue({
    el: "#example",
    // 每个 Vue 实例都会代理其 data 对象里所有的属性，只有这些被代理的属性是响应的，也就是说值的任何改变都是触发视图的重新渲染
    data: {
        a: 123
    },
    // 此实例的混合对象
    mixins:[],
    // 此实例的方法
    methods:{ 
        aaa:function(){
            alert("普通函数可以访问到this，箭头函数不可以访问到this")
        }
    },
    // 此实例用到的指令
    directives:{},
    // 此实例用到的组件
    components{},

    // 所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。
    // 这意味着 你不能使用箭头函数来定义一个生命周期方法 
    beforeCreate: function () {
        console.log(this + "实例初始化之后");
    },
    created: function () {
        console.log(this + "实例已经创建完成，已完成 数据观测，属性和方法的运算，watch/event 事件回调");
    },
    beforeMount: function () {
        console.log(this + "挂载开始之前,相关的 render 函数首次被调用");
    },
    mounted: function () {
        console.log(this + "el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子");
    },
    beforeUpdate: function () {
        console.log(this + "数据更新时，导致虚拟 DOM 重新渲染和打补丁之前调用该钩子");
    },
    updated: function () {
        console.log(this + "数据更新导致的虚拟 DOM 重新渲染和打补丁，之后会调用该钩子");
    },
    activated: function () {
        console.log(this + "keep-alive 组件激活时调用");
    },
    deactivated: function () {
        console.log(this + "keep-alive 组件停用时调用");
    },
    beforeDestroy: function () {
        console.log(this + "实例销毁之前调用，此时，实例仍然完全可用");
    },
    destroyed: function () {
        console.log(this + "Vue 实例销毁后调用");
    },

    render: function (createElement) {
        return createElement(
            'div',  // {String | Object | Function}  一个 HTML 标签字符串，组件选项对象，或者一个返回值类型为String/Object的函数，必要参数
            { // {Object}  一个包含模板相关属性的数据对象 这样，您可以在 template 中使用这些属性。可选参数。(https://cn.vuejs.org/v2/guide/render-function.html#深入data-object参数)
                attrs: {
                    id: 'foo'
                },
                props: {// 组件 props
                    myProp: 'bar'
                }
            },
            [ // {String | Array} 子节点 (VNodes)，由 `createElement()` 构建而成， 或简单的使用字符串来生成“文本结点”。可选参数。
                '先写一些文字',
                createElement('h1', '一则头条'),
                createElement(MyComponent, {
                    props: {
                        someProp: 'foobar'
                    }
                })
            ]
        )
    }
});

// Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 `vm.a`  改变后调用
})