Vue2.0 入门实战三(页面及组件)

一、Login页面

为什么要从Login页面开始，两个理由：

1、单页应用正常逻辑，大多都是一登录页面开始

2、登录页最简单，没有引入其他公用的组件

页面的样式，js都是直接写在单文件组件中，这样方便对代码的维护，至少日后有任何修改，只需要在一个文件中操作就好了，相较于以前样式，js分离的做法要睿智的多。。， 文中项目样式使用sass以提高css的编写效率， 如果我们的项目需要使用sass， 需要安装对应的loader, 安装也比较简单 直接命令行输入  npm install sass-loader ， 然后再webpack.base.config 文件中添加相应的编译规则，如下图：

之后在页面组件创建<style lang='scss'></style>, 所有页面的样式都是在此标签里面编写，lang 属性时必要的，否则编译会报错。。另外你也可以添加scoped 属性，这样做就使得编写的样式只对当前页面有效，即使其他页面组件也有相同的class名标签。

在这里贴上页面的大致结构.

二、客户信息页面(Customers.vue)

客户信息页面包含了Header.vue (页头组件)、Filter.vue(筛选组件)、Statistic.vue(数据汇总组件)以及List.vue(列表组件)， 这些组件都是事先写好了的，我们只需通过import 方法引入即可..,然后在Vue 实例中注册，代码片段如图:

组件的命名多采用驼峰命名法，而在使用的时候，驼峰改为‘a-b’， 这么做是为了避免与原生html标签冲突，比如你有个header组件，然后组件命名是Header, 这样你在页面中使用的组件<Header></Header> 最后解析出来的就是<header></header> ，这样就会与原生html 冲突，有可能导致不可预知的错误。。因此组件的命名是需要注意的地方。

另外注意，图片有一处被编辑器以红色波浪线标注，给他绑定一key属性并且赋值 v-bind:key = 'item.id', 具体原因可以参照官方说明

文中项目的其他几个页面就不做细说了，大致跟这个一样模式。。下面就说一下页面一些公用的组件编写。。。

三、公用组件

公用组件主要讨论一下头部组件（Header.vue）已经筛选组件（Filter.vue）, 原因是会涉及到组件常用的一些细节. 

首先来看Header.vue 组件

Header组件分为三个部分(有的复杂项目可能更多), 返回上一页、页面标题以及返回首页。返回上一页以及返回首页并不是所有页面都会有，页面的标题也是变化的, 因此Header,组件需要指定三个属性，代码片段如图

Vue 父组件使用 prop 传递数据给子组件， 这里对hasback， hashome 属性做了一个初始化，并且data属性中的iconback, iconhome 绑定，Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。

Filter.vue 组件

Filter.vue 组件主要是父组件监听子组件事件触发并获得数据更新结果，领用$emit 可以做到这一点, 代码片段如下

点击‘确定’， 将日期值通过$.emit 绑定一个自定义事件 filting， 传递个父组件，父组件就可以利用v-bind:filting 获得子组件传递过来的返回值 data, 

整个项目基本上就这样，总的来说是相当简单的 项目，由于是公司的项目，源码就不方便放到github了，以后文章主要已自用demo为主.