其实可以把它看做一个对象，一个有点牛逼的对象，这个对象中有很多属性，这些属性就会把html和js联系起来，完成一些数据的交互等等。
首先看它有哪些属性：
el挂载点：对应DOM中的哪个标签地址
template模板：对应挂载点内部的内容
data：vue实例中的数据
methods：vue实例中的方法
computed：计算属性
watch：监听器
filters：自定义过滤器（新增）
components：存放局部组件

        //创建vue实例，传递参数给这个实例，
        //并让这个实例去接管id=root这个元素里面的内容
        //这样这个vue实例就和id=root的这个dom节点进行了绑定
        new Vue({
            el:'#root',                           //挂载点：el参数对应的dom标签
            // template:'<h1>hello {{msg}}</h1>',    //模板：挂载点内部的内容
            components:{
              'todo-item': TodoItem
            },
            data: {                               //vue实例里面的数据
                msg:'hello ffff',
                num:123,
                list:['第一个','第二个','第三个'],
                inputValue:'',
                inputList:[]
            },
            methods:{
                commit:function(){
                    this.inputList.push(this.inputValue);
                    this.inputValue = '';
                }
            }
        })

生命周期

image.png