Vue -渐进式JavaScript框架的创建和使用

vue.js的介绍

• 1、vue.js是一套构建用户界面(UI)的渐进式JavaScript框架；vue是单页面应用：在一个页面跳来跳去，不重新加载页面；而且具有双向数据流的特点；视图改变 数据自动更新；数据更新 视图自动改变。

• 2、学习Vue要转化思想：不要在想着怎么操作DOM，而是想着如何操作数据！！！

Vue是一种MVVM模式的框架；为什么叫做MVVM模式？

• MVVM ===> M / V / VM（简单理解就是数据双向绑定）

  • M：model数据模型（专门用来操作数据的）
  • V：view视图（对于前端来说就是页面）
  • VM：ViewModel 视图模型
  • 这里视图可以改变数据；数据又可以改变视图

• MVC

  • M:model数据模型
  • V:view视图模型
  • C：Controller控制器
  • 这里是Controller控制数据和视图；目前主流很好用MVC模式；都是用MVVM模式；了解即可

库与框架的区别

• 库：本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者。代表：jQuery；jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

• 框架：是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码。框架里有很多包装好的功能，例如Swiper都可以调用，方便快捷
• MVC和MVVM的优势对比：
  • MVC模式，将应用程序划分为三大部分，实现了职责分离 在前端中经常要通过 JS代码 来进行一些逻辑操作，最终还要把这些逻辑操作的结果现在页面中。也就是需要频繁的操作DOM
  • MVVM通过数据双向绑定让数据自动地双向同步 1、V（修改数据） -> M 2、M（修改数据） -> V 3、数据是核心

vue创建项目步骤

一、安装node

• 1、先到node官网下载node
• 2、按照提示安装好node

二、创建项目

• 1、先创建一个文件夹
• 2、在这个文件输入cmd切入当前文件夹
• 3、安装vue-cli13： 在cmd中输入npm i g @vue/cli
• 4、使用脚手架搭建项目：vue create 项目文件名
• 5、选择自己想要的配置；敲完回车之后，回自动安装vue的依赖，静待安装完成
• 6、安装完成之后跑动项目：npm run serve

修改配置文件

• 打开node_modules =>@vue=>cli-service=>lib=>options.js
  将第121行代码改为false
• 如果存在丢包则把node_modules删除掉重新装依赖

转载于:https://juejin.im/post/5c8ce391518825573a5e6a56