<script src='https://unpkg.com/vue@2.1.10/dist/vue.js'></script>
<div id="app">
<message content="hello boy"></message>
</div>
<script>
var Message=Vue.extend({
	props:['content'],
	template:'<h1>{{content}}</h1>'
});
Vue.component('message',Message);
var vm=new Vue({
	el:'#app'
});
</script>
<!--标签和js分离-->
<div id="app2">
  <p>123</p>
</div>
<script id="tpl" type="x-template">
  <div class='tpl'>
　　 <p>This is a tpl from script tag</p>
  </div>
</script>
<script type="text/javascript">
var vm = new Vue({
　　 el : '#app2',
　　 template : '#tpl'
  });
</script>
<!--component的标准简单使用-->
<div id="app3">
<my-component title="这个标题" content="这个内容"></my-component>
</div>
<script>
var simplecon=Vue.component('my-component',{
	props:['title','content'],
	data:function(){
		return {
			desc:'123'
		}
	},
	template:'<h1>{{title}}{{content}}{{desc}}</h1>'
	
});
var vm3=new Vue({
	el:'#app3'
});
</script>
<!--父组件和子组件测试-->
<div id="app4">
	父组件：<input type="text" v-model="msg" />
<my-bind :msg.sync="msg"></my-bind>
</div>
<script>
	Vue.component('my-bind',{
		props:['msg'],
		template:'<div>子组件：<input type="text" v-model="msg" /></div>'
	});
	var vm4=new Vue({
		el:"#app4",
		data:{
			msg:'123465'
		}
	});
</script>
<!--方法触发事件-->
<div id="app5">
<button @click="onClick">点击</button>
</div>
<script>
	var vm5=new Vue({
		el:'#app5',
		events:{
			add:function(msg){
				console.log(msg);
			}
		},
		methods:{
			onClick:function(){
				//this.$emit('add','there is add');//$emit测试
				this.$dispatch('add','there is dispatch');
			}
		}
	});
</script>