Day03-Vue进阶

• • 1、局部组件

• 2、全局组件

• 三、路由

• • 1、引入js

• 2、编写html

• 3、编写js

一、组件（重点）

=======================================================================

组件（Component）是 Vue.js 最强大的功能之一。

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

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

1、局部组件

---

定义组件

使用组件

效果图：

2、全局组件

---

定义全局组件：新建components文件夹，在该文件夹下创建Navbar.js文件

Navbar.js文件下的代码如图

// 定义全局组件

Vue.component(‘Navbar’, {

template: ‘

• 首页
• 学员管理
• 讲师管理

’

})

创建全局组件文件 02-全局组件.html

02-全局组件.html文件解释：

效果图：

三、路由

===================================================================

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库

1、引入js

---

需要先引入vue.min.js，再引入vue-router.min.js

2、编写html

---

Hello App!

首页

学生管理

讲师管理

3、编写js

---