vue的dom更新、事件绑定、数据读写都由vue实例对象vm负责。

options选项

options有哪些大类属性：

数据
    data/props/propsData/computed/methods/watch
DOM
    el(挂载点)/template(html内容)/render(渲染)/renderError
生命周期钩子(钩子：是指切入点，就像火车的连接点一样)
    beforeCreate/created(创建元素)/beforeMount/mounted(挂载，就是将元素放入到页面)/beforeUpdate/updated/activated/deactivated/beforeDestroy/destroyed/errorCaptured
资源
    directives/filters/components
组合
    parent/mixins/extends/provide/inject
其他

插一条：方法是面向对象的，函数是数学的。obj.sayhi()叫方法，sayhi()叫函数。

el挂载点

el挂载点的语法：

new Vue({
    el:'#app'
})

也可以写成这样的形式

new Vue({
}).$mount('#app')

data内部数据

一种是对象形式，这种是有bug的

data:{
}

一种是函数形式，优先使用！

data:function(){
}
//可以缩写为
data(){
}

如果data是在一个vue组件中，例如demo.vue，那么这个data必须是函数。为什么要使用函数形式而不是对象形式？？？
因为Demo是个对象，Vue会自动把它传给new Vue()。render中，相当于new Vue(Demo)。
用一次没问题，但如果用两次，像下面这样，等于传了两次Demo给new Vue()。
造成问题，两个组件，其中一个改了data数据，另一个也变了，因为引用的是同一个data。

import Demo from './Demo.vue'
new Vue({
    ...
  render:h=>h(X,[h(Demo),h(Demo)]) //new Vue(Demo),new Vue(Demo)
})

如果写成函数形式，相当于每次都会调用Demo.data()，两次都是全新的对象，不存在共用data的问题了。
Vue官方文档也说明了，只接受function。

methods方法

methods可以代替filters，methods内用普通函数filter就可以了。

components组件

一种是文件组件，后缀是.vue。
用法1，import引入Demo组件。建议.vue的文件名写成全小写，因为有的古老操作系统分不清大小写
而import后面的组件名最好是大写，避免和原生标签重名。

import Demo from './demo.vue'
new Vue({
    components:{
      Frank:Demo
  }
})
//Demo又被命名为Frank感觉很奇怪
//可以将Frank换成Demo
new Vue({
    components:{
      Demo:Demo
  }
})
//于是可以缩写成
new Vue({
    components:{
      Demo
  }
})

用法2，直接在vue实例外用js方式创建，然后实例中直接引用：

Vue.component('Demo2',{
    template:`
        <div></div>
    `
})
new Vue({
  template:`
        <div>
            <Demo2 />
        </div>
    `
})

用法3，是用法1和用法2的结合

new Vue({
    components:{
      Frank:{
        template:`
                <div></div>
            `
    }
  }
})

到底什么叫组件？？？可以组合的物件。

四个钩子

created

这里面的内容是出现在内存中的

mounted

这里的内容出现在页面中

updated

这里是更新了，拿到了最新的

destroyed

从页面中消失了

props外部属性

prop是用来接收外部属性的

传字符串

接收方文件Demo.vue

<template>
  {{message}}
</template>
<script>
    export default{
        props:['message']
    }  
</script>

实例中，给接收方传值：

new Vue({
    template:`
        <Demo message="你好props" />
  `
})

界面会显示：你好props

传js代码，在自定义的message前面加上:号

这时， n是js代码

new Vue({
    template:`
        <Demo :message="n" />
  `
})

如果想在js代码中加入字符串,就加引号，这里n就是字符串

new Vue({
    template:`
        <Demo :message="'n'" />
  `
})

所以可以传函数给子组件去调用
子文件中：

<template>
  {{message}}
  <button @click="fn"></button>
</template>
<script>
    export default{
        props:['message','fn']
    }  
</script>

实例中：

new Vue({
  data(){
    return:{
        n:0
    }
  },
  template:`
        <div>
            {{ n }}
            <Demo :message="n" :fn="add" />
        </div>
    `,
    methods:{
      add(){
        this.n += 1
    }
  }
})

点击button，触发add()，会给vue实例中的n加1，也就是子组件对父级的属性进行了操作。