学习vue.js的心得体验

什么是Vue?Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

在Vue实训中，我深刻体会到了Vue框架的优秀性能和方便易用的特点。通过实际操作，我学习了Vue的基本语法、组件化开发、路由、状态管理等方面的知识。

在项目实战中，我更深入地了解了如何利用Vue框架构建完整的应用程序，从前端的设计、开发到后端的数据处理和交互，都得到了充分的实践锻炼。同时，我也发现了一些Vue框架的局限性和需要注意的地方，例如在组件的嵌套使用中需要考虑到数据传递和维护的问题。

总的来说，通过Vue实训，我获得了对Vue框架的更深入了解，掌握了前端应用开发的基本技能和经验，同时也提高了自己的问题解决能力和团队合作能力。我相信这些技能和经验将对我的未来发展产生积极的影响。

脚手架结构剖析

再开始写项目之前，我们需要弄清什么地方写什么代码。

build文件夹

webpack配置文件。此处配置webpack规则。整个项目是通过webpack支持的。比如你要使用less，你需要在webapck规则里使用less。

src 文件夹

撸码的地方～基本你所有的代码都在这一块完成。

assets文件夹

存放web中引用的图片 媒体资源。

components文件夹

主要存放可复用组件，你可以在任意页面中复用这些组件。

router文件夹

index.js 路由配置文件。在此处配置各个页面的跳转引用关系。

APP.vue

这里看一看做页面的根部。我们可以在这个页面进行一些css reset 操作。

main.js

根逻辑，页面加载首先会加载这份js文件。

static文件夹

主要存放外部引用资源。比如xxx.min.js

index.html

vue是spa应用，所以只有一个入口，也就是index文件，这里我们进行一些不可更改资源（比如某某库）的引用，和html页面meta 、title之类的设定。

vue核心概念

vue的核心概念是‘数据驱动’，假如我们需要切换view层，我们应该修改的是数据。下面我会分享一些我自己在学习vue中收获的一些实例，大家自行感受。

实例展示的是方法论，概念性一样的东西，不要被例子局限，要将思维扩散出去。知识点学习还是看官方文档为主。

vue如何处理dom显示，样式切换，动态样式

watch 和 computed的 简析

vue提供了2个动态监测data的函数，一个是watch，一个是computed。

watch： 主要监测已经存在的data，处理data变化后的钩子

computed： 处理一个已存在的data，返回一个data

vuex 是一个比较好的例子，可以用来学习监测，什么时候用什么方法去处理这些变化

v-for 列表渲染机制

v-for 是我认为vue中一个非常非常强大的指令，所有规律性动态数据的展示，都可以用for指令来完成。
v-for是非常强大，可以追踪循环体内任意一个值的变化，针对变化来单独渲染。

v－for 建议仔细阅读官方文档，而不是通读。在项目中，我们应该养成习惯。对于可变化的，规律性数据都采用for指令渲染。 我之所以又把for指令写了一遍，是因为我在开始写vue时，根本就没有活用for指令的简便和强大，还是古老的ul li 循环，繁杂的事件绑定委托。估计人类本性对一个东西还不太了解的时候会习惯性的用自己熟悉的方式去操作的原因。

vue中引入组件以及父子组件的数据交互

关于组件，任意vue文件你都可以看做一个组件。 在项目中我们一般使用的应该都是单文件组件，单文件组件与页面结构无异，是具有完整功能的一个模块。比如一个评论框，你就可以剥离成一个组件，在任意页面文件中引入这个组件。

vue过滤器

在有一些业务场景需要对数据进行一些转换，比如后端图片地址的前缀匹配，这个时候filters就派上大用场了。看个例子感受一下。

vue路由

路由对于spa应用的重要性不言而喻，整个应用的页面关系都是通过路由定义的。我们先来看看一个路由文件大致是什么样子

vue 使用history模式，我们就可以去使用history的API，需要在路由配置中启用。默认hash模式，history模式也是一般应用的常用模式。

总的来说，通过Vue实训，我获得了对Vue框架的更深入了解，掌握了前端应用开发的基本技能和经验，同时也提高了自己的问题解决能力和团队合作能力。我相信这些技能和经验将对我的未来发展产生积极的影响。