![](https://img-blog.csdnimg.cn/20191106135543113.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
分享Vue基础语法及项目实战练习
chenyongzhi1218
入门程序员
展开
-
Vuex中的Module
Vuex中的Module一、认识ModuleModule是模块的意思, 为什么在Vuex中我们要使用模块呢?由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决这个问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚...原创 2019-12-03 18:27:45 · 798 阅读 · 0 评论 -
Vuex中的Action
Vuex中的Action一、Action的基本定义我们强调, 不要再Mutation中进行异步操作.但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.Action 提交的是 mutation,而不是直接变更状态。Action 可以包含任...原创 2019-12-03 18:27:03 · 1049 阅读 · 0 评论 -
Vuex中的Mutations
Vuex中的Mutations状态更新参数传递提交风格响应规则常量类型同步函数一、Mutation状态更新更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就...原创 2019-12-03 18:23:56 · 525 阅读 · 0 评论 -
Vuex中的Getters
Vuex中的Getters使用场景Getters的基本使用Getters的属性访问和方法访问一、 使用场景有时候,我们需要从store中获取(派生)一些state变异后的状态,比如下面的Store中:问题:获取学生年龄大于20的个数。const store = new Vuex.Store({ state: { counter: 1000, s...原创 2019-12-03 18:21:53 · 318 阅读 · 1 评论 -
Vuex中的State
State单一状态树一、什么是单一状态树Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (Single source of truth)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。但是,它是什么呢?我们来看一个生活...原创 2019-12-03 18:20:39 · 214 阅读 · 0 评论 -
Vuex详解
Vuex详解认识VuexVuex的基本使用Vuex的核心概念Vuex的项目组织结构一、认识Vuex(一)Vuex是做什么的?官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理 应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools ext...原创 2019-12-03 18:18:59 · 327 阅读 · 1 评论 -
Vue中keep-alive的使用
keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。它们有两个非常重要的属性:1.include - 字符串或正则表达,只有匹配的组件会被缓存2.exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存router-view 也是一个组件,如果直接被包在 keep-alive 里面,所有路径匹配到的视图组件都会被缓存,不会重复的创...原创 2019-11-30 17:44:21 · 134 阅读 · 0 评论 -
vue-router导航守卫
为什么使用导航守卫?1.我们来考虑一个需求: 在一个SPA应用中, 如何改变网页的标题呢?网页标题是通过<title>来显示的, 但是SPA只有一个固定的HTML, 切换不同的页面时, 标题并不会改变.但是我们可以通过JavaScript来修改<title>的内容window.document.title = '新的标题'那么在Vue项目中, 在哪里修改? 什么时...原创 2019-11-30 14:26:18 · 160 阅读 · 0 评论 -
$route和$router的区别
$route和$router是有区别的1.$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法2.$route为当前router跳转对象里面可以获取name、path、query、params等...原创 2019-11-30 14:05:28 · 256 阅读 · 1 评论 -
vue-router参数传递
vue-router参数传递一、传递参数的方式1.传递参数主要有两种类型: params和queryparams的类型:配置路由格式: /router/:id传递的方式: 在path后面跟上对应的值传递后形成的路径: /router/123, /router/abcquery的类型:配置路由格式: /router, 也就是普通配置传递的方式: 对象中使用query的ke...原创 2019-11-28 22:05:04 · 158 阅读 · 0 评论 -
vue-router动态路由实现方式(一)
vue-router动态路由在某些情况下,一个页面的path路径可能是不确定的,比如我们进入用户界面时,希望是如下的路径:/user/aaaa或/user/bbbb除了有前面的/user之外,后面还跟上了用户的ID这种path和Component的匹配关系,我们称之为动态路由(也是路由传递数据的一种方式)。...原创 2019-11-27 22:02:22 · 876 阅读 · 0 评论 -
vue-router嵌套路由、默认路由
vue-router嵌套路由嵌套路由是一个很常见的功能比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件.路径和组件的关系如下:实现嵌套路由有两个步骤:创建对应的子组件, 并且在路由映射中配置对应的子路由.在组件内部使用<router-view>...原创 2019-11-27 22:00:17 · 995 阅读 · 0 评论 -
vue-router路由的懒加载
1.懒加载定义:官方给出了解释:当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了理解:首先, 我们知道路由中通常会定义很多不同的页面.这个页面最后被打包在哪里呢? 一般情况下, 是放在一个js文件中.但是, 页面这么多放在一个js文件中, 必然会...原创 2019-11-27 21:57:53 · 121 阅读 · 0 评论 -
router-link属性
router-link属性在前面的<router-link>中, 我们只是使用了一个属性: to, 用于指定跳转的路径。<router-link>还有一些其他属性:tag: tag可以指定<router-link>之后渲染成什么组件, 比如上面的代码会被渲染成一个<li>元素, 而不是<a><router-link ...原创 2019-11-26 22:36:57 · 328 阅读 · 0 评论 -
vue-router路径
vue-router默认路径默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容.但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以。如何可以让路径默认跳到到首页, 并且渲染首页组件呢?非常简单, 我们只需要配置多配置一个映射就可以了。配置解析:我们在routes中又配置了一个映射。path配置的是根路径: /redi...原创 2019-11-26 22:34:23 · 1358 阅读 · 0 评论 -
vue-router详解
Vue-router一、认识路由二、vue-router基本使用三、vue-router嵌套路由四、vue-router参数传递五、keep-alive(一)什么是路由?说起路由你想起了什么?路由是一个网络工程里面的术语。路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. — 维基百科额, 啥玩意? 没听懂在生活中, 我们有没有听说过路由的...原创 2019-11-24 21:26:28 · 372 阅读 · 0 评论