学习 Vue 一段时间的总结

2016-07-27

字数统计: 1.9k字 | 阅读时长≈ 6分

最近钻进 vue 学习了一段时间，总算对 vue 有了大致的了解。

学习 vue 应该了解或者要知道的东西

1.html、css、js 的全部基础知识

这点毋庸置疑，但凡学习 web 编程你不完全掌握这个基础能行？

2.webpack 或者 browerify

这是前端自动化工具，知道其中一个或者两个都去了解下都可以。

如果都不知道（比如我），如果不使用 vue 中的构建大型应用，一般来说不影响我们学习使用 vue 的基础功能。

3.Ecmascript2015(或者叫ES6)

这是 js 新定的语法格式，包括很多 js 的新特性和新的写法。

同样的，如果不了解（比如我），一样不影响学习使用 vue 的基础功能。

注：以上2和3两点最好还是去学习下，不然在后期看别人代码学习的时候会碰到比较多的麻烦，具体麻烦后面会有说明。

学习 vue 碰到的诸多以前没了解的知识(学习障碍)

1.npm 或者 NodeJS

由于本人对 NodeJS 只是粗略知道，基本能看懂，毕竟咱是 PHPer，但是 Vue，或者说现在绝大部分前端框架，都是使用
npm 做包管理的，因此需要知道 npm 包管理的各种基本命令。

注：由于 npm 服务器在国外，虽然这个还没被墙阻挡，但是那速度… 因此此处推荐使用淘宝 npm 镜像，足可以应付绝大部分项目。

2.MVVM框架

由于本人原先并没有接触过比如 AngularJS 或者 ReactJS 等前端 MVVM框架，导致很多参考资料中经常出现类似以下的文字：

就像 ReactJS 中的xxxx; 和 AngularJS 中的 xxxx 有共通之处; 借鉴了 ReactJS 中的 xxxx …

我想说，碰到这些文字，我只想说：我(mei)学(xue)的(guai)不(wo)够(lou)！

然后我就只能回去饿补一下对应的知识点，起码了解文档中说的 xxx 的 xxx 到底是个啥玩意。

3.基于数据驱动

这一点真的很重要，很重要，很重要！！！

由于写惯了 JQuery，导致现在写这种“基于数据驱动”的框架很多地方会转不过弯来。

那么 JQuery 和 Vue 到底什么区别呢？

首先，JQuery 主要是操作 DOM 结构的，这一点相信写 JQuery 或者写纯 JS 比较多的人都知道；然后，Vue 是通过操作“数据”来改变 DOM 结构的(当然它也能直接操作 DOM，但这不是它所提倡的，如果你一定要这样写，我劝你还是回去写 JQuery 好了)。

举个例子：如果要写一个手风琴效果的列表。

一般 JQuery 的思路是：给 ul 下的 li 标签添加 child 这样的 class，然后给这个 class 绑定click方法，写法一般如下：

-- html 
<ul>
  <li class="child">你好</li>
  <li class="child">我好</li>
  <li class="child">大家好</li>
</ul>

-- JQuery
$('.child').click(function(){
  $('.child').hide();
  $(this).show();
});

而 Vue 的思路是：定义一个“数据”比如 show,然后监听用户点击，通过改变show的值来改变 DOM 的显示和隐藏，写法一般如下：

<template>
  <ul>
    <li v-for="item in list" @click="show=$index" v-show="show==$index">
  </ul>
</template>

<script>
  export default {
    data () {
      return {
        list: [
          { label: '你好' },
          { label: '我好' },
          { label: '大家好' },
        ],
        show: 0
      }
    }
  }
</script>

4.各种 js 的写法，css 写法

vue 在构建大型项目时由于使用了前端自动化工具（webpack 或 browerify），自动化工具中能够自动转 ES6 的语法成 ES5 的语法，使得现在的浏览器能够完全兼容你写的 ES6 的代码，因此而带来的一个学习障碍是，对 ES6 不熟悉的同学（包括我），又必须去学习一下 ES6 的语法（有人说不学，就用 ES5 的语法，自己做东西完全可以，但是如果你去看别人的代码呢，所以，兄弟，学吧！）。

另外，Vue 还支持各种 CSS预编译语言（比如：LESS、SASS等），还支持各种 HTML 模版模版引擎（比如 Jade、EJS、Swig等），只要有对应的 loader 插件，都支持。这东西是好东西，但要让我们奋(qing)发(he)图(yi)强(kan)啊!

注：奉劝各位，这些前端的知识咱不可能全部都弄的清清楚楚明明白白，一般我的建议是学习其中一种，弄明白其中一种，另外的其他的就触类旁通了，只是可能语法上有细微差别。千万别看到就跳过啊亲们，以后看别人代码时会骂娘的。

5.webpack 和 browerify 的配置

vue 支持前端自动化处理，因此了解这两个中的一个是必须的。

注：说实话，到目前为止，本人还只是了解了 webpack 具体是干啥的，能看懂，但是很多配置参数怎么配还是懵里懵懂，这里面的水很深…好在使用 vue-cli 初始化出来的模版已经能够完成绝大部分项目了。

6.各种常见的外部组件

基本上你去看别人写的 vue 项目（github 一搜一大把了已经），肯定会看到使用了很多外部组件的，这里讲几个很常用的组件。

vue-router

这个是写单页应用（SPA）或者说做路由用的，简单来讲就是用来做页面跳转的，但大多数时候是用在单页应用中。

vue-resource

这个是用来获取接口数据的，简单来说就是接收服务端数据的东西，和 Ajax 获取后台数据功能类似。

vuex

这个是用来管理全局状态的，举个例子，如果你的项目需要用户登录，然后你的很多组件下面都要用到用户信息的数据，如果没有这个东西，你势必需要给每个组件都传递用户信息的数据，然后组件嵌套就得嵌套传递，但是使用了 vuex 你就有了一个全局的存储信息的容器，这个容器可以保存用户信息，然后你想在哪个组件下调用就在哪里调用。

vue-devtools

这个东西就像 chrome 浏览器下的调试工具，当然它也是集成在 chrome 浏览器的调试工具下的，使用它可以看到你的项目的 vue 的组件树，各个组件使用的数据，以及如果使用 vuex 的话，vuex 的状态。总之，这个工具对于项目开发比较大，即 vue 组件比较多的情况还是很有用的。

注：虽然该插件是 chrome 的，但是国内很多 chromium 内核的浏览器即使安装了插件也没用（比如：360极速），此处推荐不准备用原 Chorme 的同学使用QQ浏览器（真的不是安利…），QQ浏览器应该是国产浏览器中唯一一个基于 chromium 内核并且可以不需要翻墙直接搜索到 chrome 商店插件的浏览器！

kriss