作为后端开发人员，偶尔也会接触前端的东西，特别是现在有的项目就只是用UI组件写写表单类的开发。一般这种前端项目要么公司级别封装的ui组件，要么使用开源的ui组件。开发起来的确是只学下UI组件用法就行了，复杂度不高，谁都能上手。历过好几次前端后端一起干的项目。就特意挤出一些零碎时间认真看了一遍VUE的官方文档。
Vue是一个前端框架，同时还有一些生态体系。特别是官方入门文档是相当的友好。所以建议入门看官方文档，投入产出比高。
先从模版框架角度去学习就行。你之前使用过模版组件就更好了。类似模版语法的一些语法点很容易类比入手。
- 首先学习HTML attributes 的绑定、event的绑定、判断，循环、等指令语法差不多入门了。在项目中可以仿照其他功能开始干活了。
- 学习计算属性的用法。计算属性只在依赖属性变化的时候重新触发计算，所以相当于有缓存。能一定程度上优化性能，另外在脚本里写的计算逻辑，相较于在html中写计算逻辑，代码可读性要高很多。
- attributes 的绑定中对样式attribute的处理有一些增强。值的结果可以是字符串，对象或数组。
- event事件处理有一些细节的东西Vue也有支持。比如事件冒泡、按钮监听。需要去了解 事件修饰符 和 按钮修饰符。
- 表单处理是开发中最常遇到的一个问题。v-model的一些知识点不太多，值得先看下。这样会减少一些小问题让你调试或者理解上有偏差。我遇到过，都是泪。
模版语法差不多学到这里已经满足后端写界面的要求了。
接下来看 VUE 组件的知识……
- 先编写一个简单的组件。不要急，还没学更多知识前，可以写简单的组件。学习下组件怎么注册，通过 prop 来向组件传递数据等等基础知识。组件注册有些细节，比如全局注册，局部注册的写法。一些通用组件方便注册的处理等。组件通过prop传参这个，主要是关注类型校验。
- 有了上面这个基础，马上要学习组件的事件监听处理逻辑。即$emit的用法。不然你的组件没法响应一些事件，组件的实际用处就有限。如下，父组件定义了一个 sayHi 函数，在子组件点击触发 welcome 事件，父组件监听了welcome事件，进而触发sayHi函数。虽然有点拗口，差不多就是子组件能触发符组件定义的函数的意思体现了。 (在子组件直接对外暴露了一个事件函数的场景下代码比较简单，不用emit关键字了)。
子组件绑定一个事件 v-on:click="$emit('welcome')。
父组件监听事件 v-on:welcome="sayHi" 。
- 组件要灵活支持局部内容定制化渲染，必须要有一种简单通用的机制。VUE中对这个的支持叫做内容分发，用插槽 slot 语法来支持。这里的几个重要知识点；包括：编译作用域、插槽 prop，插槽命名，编写插件或者排错的时候这个理解不透彻就会有坑。
后端过来的同学被分配写界面的开发任务时不太注重用户交互友好性。有时候简简单单加个过渡效果就很棒了。VUE对这个提供了有限的支持。比如过渡(比如组件显示和隐藏)和CSS动画提供渲染支持。
- transition组件是官方提供的一个组件，用于包裹要添加动画的元素。在元素离开，进入，列表等他能根据规则自动嗅探目标元素是否有CSS的过渡动画，javascript动画钩子函数等，然后在合适的时机触发。这里对于初学者要做的还是看官方文档，看这里所说的规则到底是什么就行了。
- 学习上面知识点的过程中发现早有开发者共享的一些css动画库和javascript动画库，这个后面专门找一些库来学习看看。当前这里我想关心的是这些库能和现有的这个组件是咋整合一起使用的。
- 上面说的是元素的动画处理，其实还有一类就是数据本身要添加效果呢？比如数字运算，颜色显示等等。这个就需要结合动画库来写逻辑了，VUE 提供了少许的支持。
好了，组件到此为止。
组件之后，最需要学习的就是了解生态有关的东西。虽然VUE还有很多东西要学，比如底层响应式原理，自定义指令，JSX等等。但是了解一些生态组件更有助于我们日常的工作。生态的知识目前个人还要一段时间来消化。
-
Devtools：VUE官方的一个浏览器插件。在浏览器上调试代码使用。
-
vue-cli: 是vue项目脚手架工具。现在vue3又新出现了一个脚手架。这个现在官方估计要放弃了。
-
vue-router：也是官方的一个路由组件。我还正在学习中。4.0是支持VUE3的一个不兼容版本更新。
-
vuex：官方提供的一个公共状态管理组件。要充分理解 state，mutation，action 的概念和用法。VUE3建议用的pinia。
其他的一些生态的东西可以有时间了多了解些，比如Vuepress。
