Vue.js前端框架技术学习心得

新学期正式进入大二，代码学习也进入更专业的学习，一开始觉得课程很难，但经过一个学期的努力学习，慢慢的觉得可以接受，所谓世上无难事，只怕有心人。

这门必修专业课是Vue.js开发教程，Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

通过这种方式，Vue.js实现了数据和视图之间的双向绑定，当数据发生变化时，视图会自动更新；反之，当用户与视图进行交互时，数据也会相应地进行更新。

• Vue.js 是目前最火的一个前端框架，除了可以开发网站，还可以开发手机App；Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架；Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合；Vue.js 是一套用于构建用户界面的渐进式框架 。

• Vue的特点

• 遵循 MVVM 模式；

• 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发；

• 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目。

• Vue与其他前端框架的关系

• 借鉴 angular 的模板和数据绑定技术

• 借鉴 react 的组件化和虚拟 DOM 技术

• Vue的现有插件

• vue-cli: vue 脚手架，用于搭建项目的骨架

• vue-resource(axios): ajax 请求

• vue-router: 路由

• vuex: 状态管理

• vue-lazyload: 图片懒加载

• vue-scroller: 页面滑动相关

• mint-ui: 基于 vue 的 UI 组件库(移动端)

• element-ui: 基于 vue 的 UI 组件库(PC 端)

• Vue.js的双向绑定是如何实现的？原理是什么？

• Vue.js的双向绑定是通过响应式系统实现的。其原理可以概括为以下几个步骤：

• Vue.js会在初始化时，通过Object.defineProperty()方法将数据对象中的属性转换为getter和setter。
• 当数据对象中的属性被访问时，会触发getter函数。Vue.js会将该属性关联的Watcher对象添加到依赖列表中。
• 当数据对象中的属性被修改时，会触发setter函数。Vue.js会通知依赖列表中的Watcher对象进行更新。
• Watcher对象收到更新通知后，会触发更新函数。更新函数会重新计算虚拟DOM并与实际DOM进行对比，找到差异并进行更新。

无论是简单还是复杂的界面，Vue 都可以胜任。作为一名 Web 前端开发工程师，其主要职能就是将网站的界面更好地呈现给用户。随着互联网技术的爆发，越来越多的前端开发技术如雨后春笋般出现，在众多的 JavaScript 前端框架中，Vue.js 无疑是最出色的(曾经一项针对 JavaScript 的调查表明，Vue.js 有着 89%的开发者满意度)。相比其他前端框架，如 Angular 和 React，Vue.js 框架在实现上更容易，程序员上手更快。使用 Vue.js 技术不仅提高了开发的效率，也改善了开发的体验，因此，熟练掌握Vue.js 前端框架已经成为 Web 前端开发工程师的必备技能。本章将介绍 Vue.js 有关的一些概念和技术，并帮助读者了解它们背后的工作原理，同时构建第一个 Vue.js 应用。Vue.js 不仅改善了前端的开发体验，还极大地提高了开发效率。为了更好地理解并掌握 Vue.js 的使用方法，本章将对 Vue.js 的基础特性进行介绍，主要包括 Vue 实例的创建、模板、data 初始数据的定义、methods 方法的定义、Vue 实例的生命周期、常用指令、事件修饰符、v-model 双向数据绑定以及计算属性与监听属性等内容。vue实例常用到的构造选项:el,唯一根标签，决定Vue实例会管理哪一个DOM节点、data，Vue实例对应的数据对象、methods，定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用、computed，定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号、components，定义Vue实例的子组件、filters，定义Vue实例的过滤器、watch，监听数据变化，观察和响应 Vue 实例上的数据变动。指令是Vue.js 模板中最常用的一项功能，主要职责是当其表达式的值改变时，将其产生的连带影响响应式地作用域 DOM 元素。Vue.js 提供了很多内置指令，可以用简洁的代码来实现一些复杂的功能。这些内置指令是以 v-开头的，它们作用于 HTML 元素，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，可以将指令看作特殊的 HTML 特性。在这一章中将学习到v-for、v-if、v-show、flter 过滤器、按键修饰符、v-model 修饰符、自定义指令等 Vue.js 的内置指令。本章主要介绍内置指令的相关内容，并通过若干实例熟练使用 Vue.js 的内置指令。组件(Component)是 Vue.is 最核心的功能，也是整个框架设计最精彩的地方，当然相对来说也最难掌握。组件是Vue.js最强大的功能之一，组件可以扩展HTML元素，也可以封装可重用的代码，组件系统让开发人员可以用独立可复用的小组件来构建大型应用。组件的出现，能够让开发人员以不同的组件，来划分不同的功能模块，将来需要什么样的功能，去调用对应的组件即可。为什么使用组件呢？1、方便重复使用；2、减少代码重复冗余；3、便于多人协同开发；4、有助于提高开发效率；5、提升整个项目的可维护性。

在前后端分离的的项目开发中，为了均衡前后端的工作量，在前端也有了路由操作这样一来，前端做好了路由分发之后，后端就只需要专注于写 API接口来进行数据交互以及逻辑处理。Vue.is 中的路由允许使用不同的 URL来访问不同的内容，we-router 是 Vue.is 官方的路由管理器，它是根据路由状态来切换组件的一个插件。路由：其实就是指向的意思，当点击页面的Home按钮时，页面就显示Home页面的内容，点击about按钮时，就显示about页面的内容，这可以说是一种映射。路由传参：简单的页面跳转是无法满足用户需求的，在进行页面跳转的时候经常需要传递一些参数，并在新的页面接受参数。例如点击某个商品进入商品详情页，此时需要传递当前被点击商品的id到商品的详情页以便获取商品的详情数据。

随着网络技术的不断发展，Web 技术日新月异。在早期的互联网时代，用户访问网页时，一次向服务器请求一个完整的页面，于是，当从一个页面跳转到另一个页面时，浏览器窗口就会出现一段时间的“白屏”，影响用户体验。另外，即使页面中只有一小部分内容发生改变，也需要将整个页面一起更新，效率很低。后来，业内逐渐产生了 AJAX 技术，实现了页面的局部刷新，使 Web 应用的用户体验得到了大幅提升。随着Vue.js 等框架的出现，SPA(单页应用)逐渐普及，AJAX 更成为 Web 项目中不可缺少的重要组成部分。

Axios 是一个专门用来处理 AJAX 相关工作的库。将Axios 和 Vue,js 结合后，即可方便地在 Web项目中使用AJAX技术。

以下是本学期的一些作品：