从新捡起来vue你还会吗?

178 阅读3分钟

当你从新捡起vue的时候,你还知道从哪开始下手吗?

在我们长时间不接触vue的情况下我们有需要到了这个东西的时候,我们总会说为什么会把他忘了。 所以我们会从新去查找资料,从新学习。

在你以前接触过vue的情况下你是有自己的思路的。应该先去了解那个先去查找那个?

一、vue及相关网站

  1. vue.js
  2. vue cli
  3. vue Router
  4. vuex

二、当我们找到了相关的网站我们就可以去寻找相关的资料

二、vue.js

1.安装

在机器上创建vue脚手架 使用以下命令创建项目确认(不要带上*>*)

QQ截图20220812145236.png

执行完以上命令然后会出现许多可选功能进行配置操作

QQ截图20220812145311.png

当你项目创建完之后就可以执行启动命令启动项目了

QQ截图20220812145322.png

三、vue cli

vue cli 是一个基于 vue.js 进行快速开发的完整系统,就是通过@vue/cli实现的交互式的项目脚手架。 通过@vue/cli+@vue/cli-service-global实现的零配置原型开发。

1.cli

cli是一个npm包,它提供了一系列的vue命令。可以通过vue create快速搭建一个新项目,也可以通过vue serve构建新想法的原型

2.插件

vue插件就是在项目中vue提供的可选功能的npm包 例如babel/typeScript转译

当你在项目中使用npm-cli-service时,它会自动解析并加载到package.json中,为你提供便捷的操作。

四、vue router

router就是在项目中可以使用地址栏进行跳转/传值一系列操作的方式,

1.router-link

简单来说router-link就是在创建项目的时候进行安装的一个插件,方便你在跳转路由的时候使用。

QQ截图20220812151855.png

2.动态路由

很多时候我们都会使用到相同的子组件,但是需要的数据是不一样的所以就会传递一个参数进行区分。传递的参数决定你需要的是什么数据。

QQ截图20220812154453.png

五、vuex

vuex就是在store仓库里面进行存储的一个仓库

vuex存储是响应式的,如果在仓库中的状态发生改变那么显示也会得到相应的更新。

而且你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation

1.状态管理模式

QQ截图20220812162715.png

2.单向数据流

store是一个单项数据流,数据流的流程比较简单

  • 状态 就是驱动应用的数据源
  • 视图 就是映射到页面的视图
  • 操作 在视图上面需要操作状态改变

QQ截图20220812155450.png

总结

vue简单来说就是对页面进行一系列的操作,页面的显示,数据的操作。

vue中的基础已经给大家介绍完了,深度的操作可以在官方网站里面查找。如果有什么解释的错了或者说的是不完全希望大家可以补充一下。