Vue的options

Vue的属性

el:挂载点
data:数据

data: {
        n:0
}

data: function(){
        return {
            n: 0
        }
    }

import Demo from './demo.vue'
new Vue({
    data: function(){
        return {
            n: 0
        }
    },
    render: h=>h(X, [h(Demo), h(Demo)]) 
})

文档建议data用function形式，通过上述举例，import得到一个组件，再render这个组件，h(Demo)相当于new Vue(Demo)。
1.如果data是对象，两次调用使用同样的data
2.如果data是函数，两次调用返回不同的对象，不会出现两个组件公用一个data
组件
创建一个组件有三种方式

1. 创建一个文件 demo.vue
2. Vue.component('demo3', {definition})
3. 把1和2结合起来

import Demo2 from './demo2.vue'  // 第一种方式

Vue.component('Demo3', {   // 第二种方式
    template:`
    <div>demo3333</div>
    `
})

用new Vue({})生成的对象是实例，我们可以在实例里使用组件：
new Vue({
    components: {
        Demo2: Demo2
        Demo4: {   // 第三种方式
        template:`
       <div>demo4444</div>`

    },
    template: `
      <div>
        <Demo2></Demo2>   // 在这里插入组件
        <Demo3></Demo3>
     </div>`,
}).$mount('#app')

我是入口，我就是实例； 我用别人，别人就是组件 我们可以组合多个组件

组件可以看做是实例中的实例

new Vue({
    components: { // 组件内部的定义和实例的定义是一模一样的
        Frank: {
            data: function () {
                return {
                    n: 0
                }
            },
            template: `<div>Frank's n : {{n}}</div>`
        }
    },
    data: function () {
        return {
            n: 0,
        }
    },
    template: `
      <div class="red">
        {{n}}
        <button @click="add">+1</button>
        <hr>
        <Frank></Frank>
      </div>`,
    methods: {
        add() {
            this.n += 1
        },
    },

}).$mount('#app')

优先使用第一种，体现了模块化的思想

import Demo from './demo.vue'
new Vue({
    components: {
       Demo: Demo  
    },
})

可以简写为

import Demo from './demo.vue'
new Vue({
    components: {Demo},
})

四个钩子：created，mounted，updated，destoryed

props：外部属性。传值，传字符串

console控制台输出结果：
这里是demo内部 你好 外部传进去的props
这里是demo内部 0
除了传message还可以传函数

下面的代码实现了：
点击组件demo的按钮, 外部的n+1, 更新的n用 :message再传进去内部组件，于是内部组件的n也同步更新

demo.vue

<template>
  <div class="red">
    这里是demo内部
    {{message}}
    <button @click="fn">call fn</button>
  </div>
</template>

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

<style scoped>
.red {
  background: coral;
  border: 1px solid red;
}
</style>

main.js

const Vue = window.Vue
Vue.config.productionTip = false
import Demo from './demo.vue'

new Vue({
    data: function () {
        return {
            n: 0
        }
    },
    components: {Demo},
    template: `
      <div>
               这里是外部的实例：{{n}}
        <Demo :message="n" :fn="add"></Demo>
      </div>
    `,
    methods: {
        add() {
            this.n += 1
        }
    }

}).$mount('#app')