组件和路由

这次想介绍的是组件和路由

1.组件

组件有两种注册方式，一个是全局注册，另一个是局部注册。

# 全局注册

要注册一个全局组件，可以使用 Vue.component(tagName, options)，tagName是组件名，options是模板。

例如Vue.component('my-component', {template:'

A custom component!

'})  //注册

//创建根实例 new Vue({ el:'#exanple"})

组件在注册之后，便可以作为自定义元素  在一个实例的模板中使用。注意确保在初始化根实例之前注册组件.

#局部组件定义

一般有三个步骤：

a.import引入组件

b.export default 注册子组件

c.template模板加入子组件

举个例子

在工程目录/src下创建component文件夹，并在component文件夹下创建一个 firstcomponent.vue并写仿照 App.vue 的格式和前面学到的知识写了一个组件。

然后在App.vue使用组件

第一步，引入。在标签的第一行写import firstcomponent from './component/firstcomponent.vue'

第二步，注册。在标签内的data代码块后面加上components:{firstcomponent}.

第三步，使用。在内加上

然后我们来讲一哈路由

vue你要用什么你就要下载，所以我们先安装vue-router

cnpm install vue-router –save

然后按之前的方法写了另一个组件secondcomponent.vue

这时修改main.js,引入并注册vue-router

1.import VueRouter from"vue-router";

2.Vue.use(VueRouter);

并且配置路由规则和 app 启动配置项加上 router

在App.vue中

1.使用 router-link 组件来导航；

2.通过传入‘to’ 属性指定链接(与router/main.js的path属性相一致)；

3. router-link 默认会被渲染成一个 标签；

4.路由匹配到的组件将渲染在 router-view 中。

然后打开的页面我点击第一页，它就会跳转到first这个路径

之后我在secondcomponent.vue加了一点动态数据调用了豆瓣的接口，我们要引用动态数据必须要引入vue-resource，界面优化用的element.ui

下面是secondcomponent.vue的内容

在 data 里面加入数组 articles 并赋值为[]

然后在 data 后面加入加入钩子函数 mounted(详细请参照官方文档关于 vue 生命周期的解析)，data 和 mount 中间记得记得加逗号

然后我点击第二页