mmfilesi/index.html

## index.html
<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <title>vue</title>
    <script src="js/vendor/vue.js"></script>

  </head>
  <body>

    <div id="app">
      <parent-component>
      </parent-component>
    </div>

    <script type="text/x-template" id="parent-template">
      <article>
        <h3>Parent</h3>
         <h3>foo in parent</h3>
          {{foo}}
          <child-component v-bind:my-prop="foo" v-on:fooChanged="fooChangedParent"></child-component>
          <button v-on:click="setFoo()">set foo</button>
      </article>
    </script>

    <script type="text/x-template" id="child-template">
      <article>
        <h3>foo in child</h3>
        <p>{{myProp}}</p>
        <button v-on:click="setFooChild()">set foo in child component</button>
      </article>
    </script>

    <script>

      Vue.component('parent-component', {
        template: '#parent-template',
        data: function() {
          return {
            foo: 'Humpty Dumpty'
          }
        },
        methods: {
          setFoo: function() {
            this.foo = 'Tweedledee';
          },
          fooChangedParent: function() {
            this.foo = 'set in parent';
          }
        }
      });

      Vue.component('child-component', {
        props: ['myProp'],
        template: '#child-template',
        methods: {
          setFooChild: function() {
            this.$emit('fooChanged');
          }
        }
      });

      var myApp = new Vue({
        el: '#app'
      });

  </script>


  </body>
</html>
	<!doctype html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<title>vue</title>
	<script src="js/vendor/vue.js"></script>

	</head>
	<body>

	<div id="app">
	<parent-component>
	</parent-component>
	</div>

	<script type="text/x-template" id="parent-template">
	<article>
	<h3>Parent</h3>
	<h3>foo in parent</h3>
	{{foo}}
	<child-component v-bind:my-prop="foo" v-on:fooChanged="fooChangedParent"></child-component>
	<button v-on:click="setFoo()">set foo</button>
	</article>
	</script>

	<script type="text/x-template" id="child-template">
	<article>
	<h3>foo in child</h3>
	<p>{{myProp}}</p>
	<button v-on:click="setFooChild()">set foo in child component</button>
	</article>
	</script>

	<script>

	Vue.component('parent-component', {
	template: '#parent-template',
	data: function() {
	return {
	foo: 'Humpty Dumpty'
	}
	},
	methods: {
	setFoo: function() {
	this.foo = 'Tweedledee';
	},
	fooChangedParent: function() {
	this.foo = 'set in parent';
	}
	}
	});

	Vue.component('child-component', {
	props: ['myProp'],
	template: '#child-template',
	methods: {
	setFooChild: function() {
	this.$emit('fooChanged');
	}
	}
	});

	var myApp = new Vue({
	el: '#app'
	});

	</script>


	</body>
	</html>