vue框架--组件以及路由的使用

一、组件可以扩展 HTML 元素，封装可重用的代码。

Vue.component(tagName, options)
<tagName></tagName>

1、全局组件的使用

  	 HTML:
<div id="app">
	<runoob></runoob>
</div>
	 JS:
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
new Vue({
  el: '#app'
})

2、局部组件

	var Child = {
 		 template: '<h1>自定义组件!</h1>'
	 }
  components: {
    'runoob': Child
    }

3、prop 是父组件用来传递数据的一个自定义属性。

<child message="hello!"></child>
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{
  { message }}</span>'
})

4、Prop 实例
将 v-bind 指令将 todo 传到每一个重复的组件中：

<div id="app">
    <ol>
    <