2019-03-08Vue-初谈

在很多文章和技术书籍中，对为什么要用一种语言、一种框架，一种数据库都会做如下分析：

1、历史：

技术的衍生，比如最开始的程序是单机运行，然后再局域网中运行，再后来在广域网中运行。。。在不同的时期，有不同的环境，不同的环境有不同的需求，于是需求诞生了，我们的主角（在这儿是Vue)诞生了。

2、优势：

比起同类的工具，有哪些优势。

3、目前的发展。

。。。

OK,以上这些都不是我开始使用Vue的原因，事实上原因是最近公司接了一个重要客户的开发任务，对于前端客户指定使用Vue，就这么简单！！！

好吧，客户就是上帝。让我们开始吧。。。。。

通过官方文档地址：/Vue官方文档看到介绍：简单小巧的核心，渐进式的技术枝，足以应付任何规模的应用。

1、模式（MVVM）

Vue.j s 在设计上使用的是MVVM ( ModelView-View Mode l ）模式。

Model ： 负责数据存储。

View：负责页面展示

View-Model : 负责业务逻辑处理，对数据进行加工后交给试图展示。

（MVVM 模式要解决的问题是将业务逻辑代码与视图代码完全分离，使它们各自的职责更加清晰，后期代码维护工作更加简单。）。

2、需要掌握的其他知识。

JavaScript(ecs6)、Html、Css

3、.vue文件

Vue. 自定义了一种.vue 文件，可以把HTML 、css 、JS 代码写到一个文件中，从而实现对一个组件的封装， 一个.vue 文件就是一个单独的组件。由于.vue 文件是自定义的，浏览器不能识别，因此在Webpack 构建中，需要安装vue- loader 对. vue 文件进行解析。在Visual Studio Code 编辑器中，书写. vue 文件前也需要安装对应的插件（如Vetur)来增加对文件的支持。

一个典型的vue文件如下

<template>
  <div class="customer-list">
      <el-table :data="tableData.items">
        <el-table-column label="账号" prop="mobile" show-overflow-tooltip></el-table-column>
        <el-table-column label="会员昵称" prop="nickName" show-overflow-tooltip></el-table-column>
        <el-table-column label="真实姓名" prop="realName" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="240px">  </el-table-column>
      </el-table>
   </div>
</template>
<script>
....
</script>
<style>
</style>