随笔分类 - Vue框架（VUE Cli 2 ）
是真的多....好散的知识！！！
摘要：我们知道 JS 函数 settimeout 是异步操作 函数，我们尝试用Mutation 执行，然后看看结果： 运行发现 一秒后确实改变为了BiHu ，但打开调试工具发现虽然渲染改变了 ，但是数据 name 还是 'Null' ,截图查看详情： 所以我们总的来说，异步操作别用在Mutation中改变
阅读全文
摘要：在mutation中, 我们定义了很多事件类型(也就是其中的方法名称).当我们的项目增大时, Vuex管理的状态越来越多, 需要更新状态的情况越来越多, 那么意味着Mutation中的方 法越来越多.方法过多, 使用者需要花费大量的经历去记住这些方法, 甚至是多个文件间来回切换, 查看方法名称, 甚
阅读全文
摘要：现在我的state中的变量user 有一个人： 我需要添加一个属性给他，即：【这里不用JS函数】 运行发现 页面并没有添加这个address，但是肖丽雅的属性中是包含address的，说明这没有做到响应式： 所以这种方式是做不到响应式的，除了JS函数 还可以这样： VUE.set(xx,yy,zz)
阅读全文
摘要：Mutation 之前说过是用来改变state中的值的，那么他本身就有一个变量叫 state ，就是state对象，那么现在可以给他添加参数： 现在的state有个变量num 是100 我们自定义给他改变X： 看代码即可： <template> <div id="app"> <h1>简单计数器：</
阅读全文
摘要：getters 是用来存放state更换后的状态的，是用来定义函数的，目前我知道的 : 每个函数都有两个参数，第一个是state，第二个是本身getters 【多一个都不行的 ！】。 案例：我state中有一个num是9，有几个组件想取num的平方，如果直接修改是不可观的，因为有些取有想对它做其他操
阅读全文
摘要：Vuex提出使用单一状态树, 什么是单一状态树,英文名称是Single Source of Truth，也可以翻译成单一数据源. 类似你的各种信息 是被各部门收集的，这样分开虽然很安全，但是不好维护管理。【如果你的状态信息是保存到多个Store对象中的，那么之后的管理和维护等等都会变得特别困难】 V
阅读全文
摘要：附图1. 现在我有一个计数器，是在 state里面定义的count，初始是1000，这样的话 所有的组件都可以 直接访问$store.state.count 即可访问到，但是+和-逻辑是这样写的： import Vue from 'vue' import Vuex from 'vuex' Vue.u
阅读全文
摘要：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用 集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快
阅读全文
摘要：为什么要用promise ，为了代码的健壮性？？？ 【防止递归地狱】可能吧： Promise是一个构造函数，所以可以 new 出一个Promise的实例,然后里面有一个参数，这个参数里面有 两个参数 都是回调函数，分别是： resolve (成功之后的回调函数)和 reject (失败后的回调函数)
阅读全文
摘要：如果你是vuecli2 的，直接在build 里的 webpack.config.js文件中取即可： 其中 @ 是无论什么版本都配置好的，，，，如果不是vuecli2 是3 或4 那么你就得去下面的文件看看设的是什么，具体怎么修改我也不知道.... vuecli3 and vuecli4 的webp
阅读全文
摘要：如果组件需要引入样式，直接： @import即可。 一般tabbar的控件高度是49px 是专门研究过的？？ 总之49px即可！ 开发阶段， 分解TabBar，结合插槽（div 因为插槽会覆盖），所有代码如下 注释已写出： 这里是项目结构，， APP.vue: <template> <div id=
阅读全文
摘要：keep-alive 这是个标签，了解vue生命周期的话，我们知道组件也是一样，会执行一遍生命周期，组件每次都要创建/销毁 和一系列的操作 ，损耗肯定会变很大，所以我们这里的<keep-alive>标签可以使我们之前的组件缓存下来，不会执行很多次 生命周期，只会执行一次。 我们只需要把 <route
阅读全文
摘要：就是 如果你想跳转路由的时候干点什么 那么就用导航守卫，例如更换标题，当然你可以用生命周期函数，在我看来不切实际。 点击首页标题换首页 ，点击个人 标题换个人： 全局导航守卫 vue-router提供的导航守卫主要用来监听路由的进入和离开的. vue-router提供了beforeEach和afte
阅读全文
摘要：route 我们之前用来取值 router 我们之前用来作路径跳转 所以我们打印一下： 运行截图： 不难发现 其实他们的区别就是： 一个是总路由对象 所以才可以实现路由更新 一个是活跃路由对象 所以才可以实现从中获取值 获取参数等... 有兴趣可以看下源码 其实....前段就是那么烦人
阅读全文
摘要：传递参数主要有两种类型: params和query 第一种就是在配置路由映射路劲path后面添加 :/变量 那种就是 params 主要携带单个参数，传递后形成的路径: /router/123, /router/abc。 第一种也成为动态路由，之前讲过 这里主要讲第二种： 第二种可以携带多参数的，在
阅读全文
摘要：比如在home页面中, 我们希望通过/home/news 访问新闻 而 /home/message访问一些内容，即：一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件. 思维分析： 那么其实就是分两步走： 1.创建对应的子组件, 并且在路由映射中配置对应的子路由. 2.在组件内部使用标签 先
阅读全文
摘要：当打包构建应用时，Javascript 包会变得非常大，影响页面加载，正常会打这几个包：【执行打包命令可以看】： 可以发现 他是 css、js、html 分开打包，我们看看他的JS有什么： 一般来说 是这样的3个基础文件： 一个是 自己写的业务代码JS， 【一般叫 app.xxxxx.js】 一个是
阅读全文
摘要：在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径： https://xxx/YYY/XXX/Username ， 即：后面还跟上了用户名 或 ID 这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。、 对于这种写
阅读全文
摘要：1.tag 属性 router-link 这个标签如果我们不想让他渲染成 a标签 ，那么我们就可以 tag 属性 ，可以自定义渲染成自己想要的组件： 可以发现 a 标签渲染成了 按钮。 2.replace属性 我们发现 你点击了router-link 标签 然后跳转切换视图的时候，他默认保留历史的
阅读全文
摘要：使用路由大概步骤： 1.新建一个包含路由组件的vue项目，当然你也可以用命令安装： 命令安装路由【个人推荐直接新建脚手架的时候选中即可】： npm install vue-router --save 2.在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能) 导入路由
阅读全文