组件：

组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。(通俗点讲，如果你在页面上需要显示4个物品窗口，那么我只需要创建1个窗口组件，然后4次调用这个组件即可，这样是不是很节省效率)。下面展示Vue组件的示例：

// 定义一个名为 button-counter 的新组件Vue.component('button-counter', {  data: function () {    return {      count: 0    }  },  template: 'You clicked me {{ count }} times.'})

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">  <button-counter>button-counter>div

new Vue({ el: '#components-demo' })

※※※※※※

为什么突然要用星号提醒呢，以前实例化的时候，data里面是什么玩意，都是一个对象，但是现在你发现组件里面的data是什么玩意，特喵的竟然是个function，而且我告诉你，你不return一个对象就会报错，why？这样写是不是开发人员脑子瓦特了，答案是否定的。举个例子，在页面上显示两个计数器，点击一下计数+1,组件里面data的数据就会+1，试想一下，如果data里面是个对象，那么每次改变都是这个对象里面的数据，你点击第一个计数器会影响到第二个计数器里面的数据，显然这样是不合理的，如果组件返回是一个新的对象的话，那么每个组件的数据就不会受到它人的影响了。

※※※※※※

当然组件也可以定义全局组件或者每个vm自己的组件，同以前的过滤器很相似的。还有个比较重要的是子组件怎么获取父组件的data和methos，Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个props选项将其包含在该组件可接受的 prop 列表中：

Vue.component('blog-post', {  props: ['title'],  template: '

{{ title }}

'})一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。一个 prop 被注册之后，你就可以像这样把数据作为一个自定义 attribute 传递进来：

<blog-post title="My journey with Vue">blog-post><blog-post title="Blogging with Vue">blog-post><blog-post title="Why Vue is so fun">blog-post>

显示的结果如下：

还有就是使用父组件的方法：用$emit 可以使用。路由：        路由，也许在我们生活中经常听见，但是百度上的解释又很晦涩，其实从程序员角度来看的话，路由分为前端路由和后端路由。前端路由：        对于单页面程序来说，主要通过URL的hash(#号)来实现不同页面之间的切换，同时，hash有个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现。后端路由：        对于普通网站来说，所有的链接都是URL地址，所有的URL地址都对应服务器上对应的资源。来个从零开始的路由：

const NotFound = { template: '

Page not found

' }const Home = { template: '

home page

' }const About = { template: '

about page

' }const routes = { '/': Home, '/about': About}new Vue({ el: '#app', data: { currentRoute: window.location.pathname }, computed: { ViewComponent () { return routes[this.currentRoute] || NotFound } }, render (h) { return h(this.ViewComponent) }})看完后，您是不是学废了