这次想介绍的是组件和路由
1.组件
组件有两种注册方式,一个是全局注册,另一个是局部注册。
# 全局注册
要注册一个全局组件,可以使用 Vue.component(tagName, options),tagName是组件名,options是模板。
例如Vue.component('my-component', {template:'<div>A custom component!</div>'}) //注册
//创建根实例 new Vue({ el:'#exanple"})
组件在注册之后,便可以作为自定义元素 在一个实例的模板中使用。注意确保在初始化根实例之前注册组件.
#局部组件定义
一般有三个步骤:
a.import引入组件
b.export default 注册子组件
c.template模板加入子组件
举个例子
在工程目录/src下创建component文件夹,并在component文件夹下创建一个 firstcomponent.vue并写仿照 App.vue 的格式和前面学到的知识写了一个组件。
然后在App.vue使用组件
第一步,引入。在<script></script>标签的第一行写import firstcomponent from './component/firstcomponent.vue'
第二步,注册。在<script></script>标签内的data代码块后面加上components:{firstcomponent}.
第三步,使用。在<template></template>内加上
然后我们来讲一哈路由
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 中间记得记得加逗号
然后我点击第二页