Vue的基本概念介绍

来自CloudWiki
跳转至： 导航， 搜索

开发思想

前端工程化

前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程

前端工程化保证了：

  • 如何进行高效的多人协作？
  • 如何保证项目的可维护性？
  • 如何提高项目的开发质量？
  • 如何降低项目生产的风险？

链接：https://www.jianshu.com/p/88ed70476adb

组件化开发

Vue2022080903.png

组件系统是 vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树：

组件化开发,这大大加速了项目的重构

传统的开发模式中我们需要把代码统一放在前端进行处理，如果需要变更的话可以对整个应用更新最新的版本进行升级，也可以对部分文件进行升级和增加。但这些需要很多工作量。有些场景下我们只是为了某一个活动或者某一件事情临时进行的调整，而这种调整有时是比较频繁的，那么全量升级和补丁升级都太重了，我们需要更轻量级的方案。

组件化是一种非常合适的解决方案。组件化即是对某些可以进行复用的功能进行封装的标准化工作。组件一般会内含他的内部UI元素、样式和JS逻辑代码，它可以很方便的在应用的任何地方进行快速的嵌入。组件内部可以使用其他组件来构成更复杂的组件。

参考文档：http://newdocx.appcan.cn/modular-develop

数据双向绑定

MVVM : model view view model

Vue21012601.png

  • M：即Model，模型，包括数据和一些基本操作
  • V：即View，视图，页面渲染结果
  • VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）


关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来！这就是MVVM的设计思想。

  • 单向绑定非常简单，一旦把Model绑定到View，MVVM框架自动把Model的变化映射到DOM结构上，这样，用户看到的页面内容View就会随着Model的变化而更新。这就是单向绑定。
  • 有单向绑定，就有双向绑定。如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。

什么情况下用户可以更新View呢？填写表单就是一个最直接的例子。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定：

Bd20-3-26.png

https://www.liaoxuefeng.com/wiki/1022910821149312/1109527162256416

vue 做表格:https://www.liaoxuefeng.com/wiki/1022910821149312/1109629058676224

vue开发的几个概念

Webpack

js的第三方工具，将所有的东西写入js文件

Vue,vuex,vue-router ,axios

  • Vuex :用于组件间通信
  • Vue-router : 前端vue组件之间的跳转
  • Axios：在vue里替代ajax的一种方法

ES6,babel

  • vue基于ES6的语法
  • Babel :转换器，将ES6语法转化为ES5,使得兼容各自浏览器
取自“http://www.openbrains.net/mediawiki/index.php?title=Vue的基本概念介绍&oldid=31346”