今天完成的事：今天把vue的增删查功能基本实现，同时派发时间也学过了。

明天计划的事：把改的功能也实现，然后一定要实现增删改查表格的demo。

遇到的问题：

1、今天遇到的问题主要是对dialog的子模板和父模板的数据实现原理不太理解，现在贴出来，暂时还没想明白，明天再好好想想

<div id="app">

            <modal-dialog v-bind:show.sync="show" v-bind:class="dialogClass">

                <header class="dialog-header" slot="header">

                    <h1 class="dialog-title">提示信息</h1>

                </header>

                <div class="dialog-body" slot="body">

                    <p>你想在对话框中放什么内容都可以！</p>

                    <p>你可以放一段文字，也可以放一些表单，或者是一些图片。</p>

                </div>

                <footer class="dialog-footer" slot="footer">

                    <button class="btn" @click="closeDialog">关闭</button>

                </footer>

            </modal-dialog> 

            <button class="btn btn-open" v-bind:class="dialogClass" @click="openDialog">打开对话框</button>

        </div>

        <template id="dialog-template">

            <div class="dialogs">

                <div class="dialog" v-bind:class="{ 'dialog-active': show }">

                    <div class="dialog-content">

                        <div class="close rotate">

                            <span class="iconfont icon-close" @click="close">关</span>

                        </div>

                        <slot name="header"></slot>

                        <slot name="body"></slot>

                        <slot name="footer"></slot>

                    </div>

                </div>

                <div class="dialog-overlay"></div>

            </div>

        </template>

        <script src="vue.js"></script>

        <script>

            Vue.component('modal-dialog', {

                template: '#dialog-template',

                props: ['show'],

                methods: {

                    close: function() {

                        this.show = false

                    }

                }

            })

            new Vue({

                el: '#app',

                data: {

                    show: false,

                    dialogClass:'dialog-success'

                },

                methods: {

                    openDialog: function() {

                        this.show = true

                        // this.dialogClass =dialogClass

                    },

                    closeDialog: function() {

                        this.show = false

                    }

                }

            })

        </script>

2、slot部分的内容不是太理解

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个处理称为内容分发，Vue.js 实现了一个内容分发 API，使用特殊的 <slot> 元素作为原始内容的插槽。

如果不理解这段话，可以先跳过，你只要知道<slot>元素是一个内容插槽。

收货：

1、今天的主要收货就是把增删该查的demo理解了一大半，明天顺利的话，应该能够全部理解并尝试写出来

2、就是vue的组件编译原理如下：