vue

一、文件目录结构

二、项目初始化

首先我们需要去下载（因为主要关注vue的使用，所以这里我们直接使用 <script> 引入的方式 ）

vue官网：https://cn.vuejs.org/v2

vue源码下载：https://cn.vuejs.org/v2/guide/installation.html

引入了样式和vue.js文件以后，我们就可以来初始化vue项目了，我们通过 new Vue() 来创建一个vue对象，同时传入一个配置对象，vue对象会与我们的html（模板）进行绑定，根据配置对象参数进行解析处理，形成应用

三、el 选项

四、data 选项

数据驱动视图：使用vue构建应用的一个核心就是数据驱动，意思就是页面的表现以及行为都是通过数据来反映的，比如当前案例中的文件/文件夹的展示、当前选中的文件、创建的新文件……，都是通过数据的体现的，所以我们需要分析应用，进行数据的抽象，然后通过操作这些数据最终通过vue同步渲染到页面。

经过分析，此案例中，我们需要有一个用来存储文件/文件夹信息的数据，每一个文件或文件夹我们用一个对象来描述，然后把多个这样的数据存储到一个数组中，如果我们需要在vue（或vue模板）中使用这个数据，我们还需要把这个数据存储到vue专门用来存储数据的 data 配置选项中：

数据渲染

有了数据以后，我们需要把 data 中数据渲染到页面指定的位置中。

我们先来看下html的结构

上面这段 html 代码就是我们要显示的结构了，现在我们通过data来生成对应的这段代码

v-for 指令

因为要渲染的数据有多条，所以我们现在需要通过 vue 提供的 v-for 的指令来循环生成

{{}} 插值语法

在模板文件中，我们可以通过 {{}} 这个语法来输出数据，{{}} 中写表达式 [注：表达式运算数、运算符组成的能得到结果的公式，比如 1 + 1、变量、函数调用等]，所以我们通过 v-for 再配合 {{}} 输出完整数据与结构

computed 计算属性

仔细观察我们会发现，文件夹的显示与文件的显示是分开的，页面上半部分显示文件夹，下半部分显示文件，那么这个时候，我们需要把数据进行分开处理，提取出对应类型的数据，然后分开显示在模板的不同地方，那么这个时候我们就需要使用到 vue 中提供的 computed - 计算属性，来完成我们这个需求了。

computed ：在某个已存在数据中，根据某种规则过滤出来的数据，也称为派生数据，一般情况下，data 中保存原始数据，computed 中提供派生数据。

那么下面，我们就需要提供两个不同的派生数据，folderFiles：文件夹，otherFiles：文件

过滤出数据以后，修改我们的模板

左侧按照文件类型分类查看

在左侧还有一个菜单，是按照文件的类型来查看的，分别有：全部、文档、图片、视频、音乐，那下面来看下实现。

首先我们需要给他们分别绑定 click 事件，处理当前点击的菜单高亮显示的效果

给每一个 li 的 click 绑定 changeShowType 函数，并传入对应的 showType 参数

methods 选项

在 vue 的配置对象中，有一个 methods 配置项，该配置项中存储 vue 中需要使用的各种调用函数，现在我们就在 methods 中创建一个 changeShowType 方法，在这之前，我们还需要在 data 中定义一个新的数据showType，该数据就是用来表示当前正在显示的模式，也就是 all,doc,pic,video,music 其中某个值

内容的分类显示

处理完了左侧导航，那么再来处理右侧内容的展示，当 showType 为 ‘all’的时候，显示文件夹和文件，其他值的时候是不显示文件夹，同时也只会显示 showType 中对应的类型的文件，所以在这里我们可以对 computed 的过滤数据进行改写：

显示模式：缩略图 / 列表

接着继续，下面我们来处理内容的显示模式：缩略图模式 / 列表模式，其原理与上面的分类类似

绑定事件

数据、逻辑处理

至于显示问题，因为数据我们已经在前面处理好了，这里我们只需要在模板中通过 v-if 指令，把数据显示在不同的结构中即可

选择、全选、全不选

继续，继续！现在，我们要为每一个文件，文件夹绑定选择的功能，为了表示选中与不选中的状态，我们需要在数据中给每一个文件数据定义一个新的属性来表示选中状态

拖拽

在微云项目中有一个拖拽文件夹的功能，那么这个又如何实现呢，是否还可以像前面那写功能一样做呢，这里我们就来看下拖拽的功能在vue中可以如何去实现
拖拽的功能如果还通过这种数据事件绑定这样的形式去实现的话，会比较麻烦，最好的处理方式就是封装成组件或者指令，下面我先来看下使用指令的方式如果和实现拖拽的功能

首先，我们在页面中创建一个元素，并设置其基础样式

接着，我们来创建 vue 的指令，并通过该指令实现对元素的拖拽