最近项目刚完成，手上工作稍微轻松些，准备储备下技术，为未来挑战做好准备。
之前项目用的较多的是angulajs，不过版本较老，还停留在1.5x系，虽然结合了webpack，es2015等前沿技术，但理解并不深入。也做个两个react的项目和一个react-native小东西，都是不懂现查资料，没有系统学习过。三大前端框架就没接触过Vue了，所以打算拿它从小白学起，也顺便写个完整学习心得。
以前学习angularjs是在菜鸟教程学的，看了2天直接上了项目，第一个项目用的还是原始方式，html文件中引入css和js，所以上手比较快。后来项目改进到结合webpack和es2015，自动化构建，热刷新等，不过是在别人基础上搭建的后续开发，边做边学，还算OK。
这次学习Vue打算从官网入手。
以上图片为官网首页点击“起步”进入链接的左侧导航栏，因为有之前的前端经验，所以第一部分觉得还是蛮简单的，基本都看懂了；第二部分就有一些特殊逻辑了，但基本上也都能理解；第三部分内容都较少，但都给到了额外的链接，链接里面的内容都是单独的知识点，后面会重点说；第四部分无关紧要了，没有要迁移升级的项目，看了下与其他框架的对比，大体意思就是，Vue灵感来自angularjs，但要比它进步的多，React能做到的功能Vue基本也都能做，React无非就是比较早，整个生态系统比较完善，但是Vue也不差，而且Vue没有React的那些缺点！虽然语气都比较谦和，但总归是要传递一个信息：Vue是最牛逼的！这也无可厚非，不然谁还学~~ ：）
缩写： v-bind: => : v-on: => @ v-slot: => # var _date = { a : 1 , data : 2}; var app = new Vue({ el:"#app", data: _data }) app.$data != app.data ,app.data 为_data.data app.$data === _data app.a = _data.a Object.freeze(_data); 阻止修改_data //监控 app.$witch("a",function(n,o){}) 生命周期：create -> mount -> update -> destroy 生命周期：init Event -> beforeCreate -> init Injections -> created -> compile -> beforeMount -> create $el -> mounted -> beforeUpdate -> virtual dom -> updated -> beforeDestroy -> destroyed v-html 注意防止xss攻击 表达式 指令 动态参数 v-bind:[] v-on:[] 修饰符 v-on:submit.prevent="onSubmit" 计算属性：computed 缓存 方法：methods 不缓存 监听器：watch 或 app.$watch 自定义控件：Vue.component("name",{ template:`html内容` }) 绑定class使用v-bind:class="[className1,className2]" 绑定style使用v-bind:style="[styleName1,styleName2]" v-if v-else v-else-if 取消复用：独立key v-show不支持<template>元素，也不支持v-else 不推荐同时使用v-if和v-for ，详情查看风格指南：https://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7-%E5%BF%85%E8%A6%81 v-for="(item, index) in items" v-for="item of items" 包含index？ v-for="value in object" 遍历对象object v-for="(value,name) in object" 遍历对象object v-for="(value,name,index) in object" 遍历对象object 建议尽可能在使用v-for时提供key 替换数组match有点懵逼。。。 app.arrayList[2] = "222"，不能检测到变动，貌似ng可以。。。 vue可以使用的方法是：Vue.set(vm.items, indexOfItem, newValue) 或 app.$set(vm.items, indexOfItem, newValue) 或 app.items.splice(indexOfItem, 1, newValue) Vue.set(object, propertyName, value) 方法向"嵌套对象"添加响应式属性。 修饰符： v-on:click.prevent.stop.self.once.capture.passive v-on:keyup.enter @keyup.ctrl.enter v-on:click.ctrl.exact @click.exact v-on:click.left.right.middle v-model.lazy v-model.number v-model.trim 复选框： <input type="checebox" v-model="toggel" true-value="yes" false-value="no" /> 组件中的data必须是函数； 全局注册：Vue.component 局部注册：new Vue({ el:"#el", component:{ "component-name":{} } }) 组件的特殊使用： v-bind:is="已注册组件的名称或一个组件的选项对象" 如用于tab <table> <tr is="组件名称"></tr> </table> 局部注册的组件在其子组件中不可用，但可以在组件中定义再次引用组件。 为了防止大小写敏感，请全部使用xiaoxie_xiaoxie命名。 在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。
以上是做的一些笔记，还跟着传统方式（html引入css和js）测试了几个语法，都很简单。
然后第三部分的内容，先看了路由，因为在之前的项目里也有用到路由。页面的内容看懂了，但是给了一个 vue-router链接文档 又是一堆内容 ↓↓↓
状态管理，React中有Redux作为最流行的Flux实现，一脸懵逼Flux是啥？ 而Vue中有相同功能的Vuex，虽然官网页面的简单实例看懂了，因为之前React项目中知道有store、stage、prop这些东西。但是感觉Vuex没这么简单。。。
服务器渲染目前应该可以先不用看。
单文件组件中又列了几个名词：
其来自 Vue Loader 又是单独的一堆知识点
单元测试你可以先不用看，但里面介绍到Vue自家的单元测试组件 Vue Test Utils
TypeScript 这种前沿技术 Vue也当然不会缺席，好在之前项目有用到，文件后缀是ts的，简单点说就是javaScript的升级版，但假如是新手小白的话，你可能还要去了解下 TypeScript 。
生产部署相关内容可以先不看。
以上多个内容中都提到 Vue CLI 这么个东西，它是啥呢？
简单说Vue CLI就是Vue给自家封装的快速搭建一个Vue项目的工具，甚至可以通过类似桌面视图方式搭建。安装完Vue CLI后通过vue creat 或vue ui 就可以搭建啦，听起来好简单的。但要深入了解下边的内容，就发现远没有那么简单，你熟悉webpack吗？假如你已经知道了webpack，那你了解 webpack-chain 吗？ 静态资源可不是直接html中添加引用那么简单了，你需要知道 url-loader、file-loader、style-loader、css-loader等等loader ；还有插件、预设配置也要了解；环境变量和模式里一堆新名词；构建你也要知道。。。
好了，到现在我还没有开始搭建第一个现代前端的Vue项目，因为我要先看这么多的文档。。。
对于新手来说，现在学习前端已经不再是以前的简单易上手了，即使对于传统的前端程序猿要学习新技术也需要花费不少的功夫，以前可能简单了解过html，js，css的后端开发人员也能上手一些简单前端开发，但是现在就很难了。尤其对于已工作的上班族，可能更没有集中的时间来学习，所以学习的时间会更久一些，难度会更大一些。
但是有一些是相通的东西，比如你在这里学过webpack了，那学习react和angular就可以不用学习这块了。
忽然想起来之前收藏的一篇关于新前端的讨论，笔者用对话的方式诙谐幽默的写出了学习新前端的代价和装逼之处，大家可以一块乐呵乐呵：
在 2016 年学 JavaScript 是一种什么样的体验？
因为之前开发用的版本较低，而学习Vue用的较新版本，本地webpack和node肯定都过时了，为了避免与原有项目冲突，还又安装了虚拟机，然后安装开发环境，vscode是不能少的~~
虽然学的有点累，但是不想放弃，希望大家留言讨论下正确的学习Vue 姿势 （从哪里开始，从哪里进阶，多长时间可以玩转项目）~~感觉官网有点像词典 ㄒoㄒ，最好是有阮一峰老师那种风格的~~