這次想介紹的是組件和路由

1.組件

組件有兩種注冊方式，一個是全局注冊，另一個是局部注冊。

# 全局注冊

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

例如Vue.component('my-component', {template:'<div>A custom component!</div>'})? //注冊

//創(chuàng)建根實例 new Vue({ el:'#exanple"})

組件在注冊之后，便可以作為自定義元素? 在一個實例的模板中使用。注意確保在初始化根實例之前注冊組件.

#局部組件定義

一般有三個步驟：

a.import引入組件

b.export default 注冊子組件

c.template模板加入子組件

舉個例子

在工程目錄/src下創(chuàng)建component文件夾，并在component文件夾下創(chuàng)建一個 firstcomponent.vue并寫仿照 App.vue 的格式和前面學到的知識寫了一個組件。

然后在App.vue使用組件

第一步，引入。在<script></script>標簽的第一行寫import firstcomponent from './component/firstcomponent.vue'

第二步，注冊。在<script></script>標簽內(nèi)的data代碼塊后面加上components:{firstcomponent}.

第三步，使用。在<template></template>內(nèi)加上

然后我們來講一哈路由

vue你要用什么你就要下載，所以我們先安裝vue-router

cnpm install vue-router –save

然后按之前的方法寫了另一個組件secondcomponent.vue

這時修改main.js,引入并注冊vue-router

1.import VueRouter from"vue-router";

2.Vue.use(VueRouter);

并且配置路由規(guī)則和 app 啟動配置項加上 router

在App.vue中

1.使用 router-link 組件來導航；

2.通過傳入‘to’ 屬性指定鏈接(與router/main.js的path屬性相一致)；

3. router-link 默認會被渲染成一個 標簽；

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

然后打開的頁面我點擊第一頁，它就會跳轉(zhuǎn)到first這個路徑

之后我在secondcomponent.vue加了一點動態(tài)數(shù)據(jù)調(diào)用了豆瓣的接口，我們要引用動態(tài)數(shù)據(jù)必須要引入vue-resource，界面優(yōu)化用的element.ui

下面是secondcomponent.vue的內(nèi)容

在 data 里面加入數(shù)組 articles 并賦值為[]

然后在 data 后面加入加入鉤子函數(shù) mounted(詳細請參照官方文檔關(guān)于 vue 生命周期的解析)，data 和 mount 中間記得記得加逗號

然后我點擊第二頁