浅谈VUE全家桶(Vue、VueX、Vue-Router、axios、Vue-cli)的理解与认识

1、Vue

       veu是一个渐进式的 、专注于视图层的前端开发框架,通过数据驱动组件化的方式实现了高效的前端开发 ,既可以通过文件引入的方式在普通页面中被引入使用,也可以基于webpack等构建系统 结合veu-router vuex进行前后端分离方式的项目开发,vue是当今企业当中使用比较多的开发框架 不仅是直接使用 vue还衍生出了很多基于vue封装后的框架。

2、 Vue-router

     Vue-router是一个路由组件,它适用于在vue中构建单页面应用。

     单一页面应用程序:只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容。

     vue-router在实现单页面前端路由时,提供了两种方式:Hash模式和History模式;

        Hash模式:

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 hash(#)是URL 的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页,也就是说 #是用来指导浏览器动作的,对服务器端完全无用,HTTP请求中也不会不包括#;同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置;所以说Hash模式通过锚点值的改变,根据不同的值,渲染指定DOM位置的数据

        History模式:

由于hash模式会在url中自带#,如果不想要很丑的 hash,我们可以用路由的 history 模式,只需要在配置路由规则时,加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

3、Vuex

        Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。这意味着本来需要共享状态的更新是需要组件之间的通讯,而现在有了vuex,组件就都和store通讯了Vuex常用于在大型项目中管理不同组件之间的状态。

        Vuex中的核心概念:State、Getter、Mutation、Action、Module。

state里面就是存放的我们上面所提到的状态

mutations就是存放如何更改状态

getters就是从state中派生出状态,比如将state中的某个状态进行过滤然后获取新的状态。

actions就是mutation的加强版,它可以通过commit mutations中的方法来改变状态,最重要的是它可以进行异步操作。

modules顾名思义,就是当用这个容器来装这些状态还是显得混乱的时候,我们就可以把容器分成几块,把状态和管理规则分类来装。这和我们创建js模块是一个目的,让代码结构更清晰。

4、Vue-cli

vue-cli是 vue 官方提供的、快速生成 vue 工程化项目的工具。

特点:可以快速创建Vue项目

  1. # 全局安装 vue - cli

  2. npm install - g @vue / cli

  3. vue create 项目名称

5、axios

        axios是一个基于promise  的网络请求库,作用于node.js和浏览器中, 简单来说和jq的ajax是一个道理,不过比ajax更加完善。

安装axios在cmd中执行:npm install axios

然后还可以对axios进行二次封装,使它更符合我们项目的需求。

你可能感兴趣的:(vue.js,javascript,前端)