Vue.js入门第二篇

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/u011073212/article/details/78568057

在第一篇中做了一个非常简单的界面，现在要在在那个基础上继续开发。

暂时打算做一个以下布局的界面：

布局

组件系统是 Vue 的另一个重要概念，允许我们使用小型、独立和通常可复用的组件构建大型应用。在这里我们先把整个页面分为三个组件：

1. 顶部导航栏 top-bar

2. 侧边导航栏 side-pane

3. 内容展示区 content-area

定义组件代码如下：

定义组件

然后将原先的页面代码替换为：

页面代码

class 是定义的CSS效果，具体见代码，在此不详述，有问题可在评论区讨论。

运行代码，得到如下结果：

结果

可以从代码看到，随着组件的增加，在一个文件里编写所有代码显得很混乱，从下一篇开始，我们开始将所有组件拆分为 单文件组件 ，即每个组件单独成一个文件，可以分开管理各个组件的逻辑以及样式代码。

代码 http://pan.baidu.com/s/1nvtDQ6t 密码 snzh