head部分：

    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="bower_components/vue/dist/vue.min.js"></script>

body的html代码：

<div id="app">
        <p>{{theMessage}}</p>
        <!--这里绑定的方法要和子组件里绑定触发的子组件事件的方法一致,方法名不建议驼峰命名法-->
        <!--这里父组件绑定的theMessage被子组件改变后返回到父组件-->
        <newcomponent :message="theMessage" v-on:addcount="executeadd"></newcomponent>
    </div>

script部分代码：

<script>
        //import 是es6支持且需要node环境支持
        //import newcomponent from "../components/newcomponent";
        
        new Vue({
            el:"#app",
            data:{
                theMessage:0
            },
            components:{
                newcomponent:{
                    props:["message"],
                    template:'<button @click="add">{{message}}</button>',
                    methods:{
                        //这里是子组件里的方法绑定父组件的方法，即父组件的addCount方法触发子组件的add方法
                        add:function(){
                            this.$emit('addcount');
                        }
                    }
                }
            },
            methods:{
                executeadd:function(){
                   this.theMessage+=1; 
                }
            }
        });
    </script>

总结：其实这一部分的最大的困惑点就是父组件和子组件的概念，我个人的理解如果简单来说的话，就类似与父子元素差不多，不过我们抽象的这么来看:

<我们自定义的组件，即父组件 我有个属性值=value>
　　<!--下面是子组件-->
　　<div>{{value}}</div><!--我拿到了父组件的属性值，它可以通过这个属性值给我传输数据-->
</我们自定义的组件，即父组件>
<!--在这里再补充一下啊，子组件不是说就是基本数据元素，很多的是我们自定义的组件，比如有个登陆页面，我们单独定义一个含有input的组件<shuru></shuru>，然后定义一个有name，password等label的<loadpage></loadpage>,组成大致如下-->
<div>
　　<label>name</label><shuru></shuru>

　　<label>password</label><shuru></shuru>
</div>


这样的话，<loadpage>就是<shuru>的父组件，比如input的placeholder就可以通过父组件传给子组件