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
- 如果存在丢包则把node_modules删除掉重新装依赖