BraveWangDev

一,前言本编简单介绍Vuex热重载,使用webpack提供的HMR实现先将搜罗到的配置列出来,后续在做补充二,热重载使用webpack的热模替换(HMR)插件(Hot Module Replacement API)Vuex支持在开发过程中热重载mutation、module、action和getter对于mutation和模块,需要使用store.hotUpdate()方法...

一,前言这一篇介绍vuex严格模式和表单处理二,vuex的严格模式在Vue严格模式下,所有不是由mutation函数引起状态变更,将会抛出错误这就保证了所有状态变更都能被调试工具跟踪到开启严格模式，仅需在创建 store 的时候传入 strict: true：const store = new Vuex.Store({ // 开启Vuex严格模式 stri...

一,前言截止到上一篇,Vue的5个核心概念就介绍完了,其中大部分介绍多来自于官网这一篇介绍Vuex的插件功能二,插件的创建和使用Vuex的store接受plugins选项,这个选项暴露出每次mutation的钩子Vuex插件是一个函数,它接收store作为唯一参数：const myPlugin = store => { // 当store初始化后调用 ...

一,前言上一篇介绍了Action,了解了vuex如何进行异步操作处理这一篇介绍Vuex最后一个核心概念:Module二,Vuex-Module问题:应用中所有状态都集中在单一状态树中,当应用变得复杂时,store对象可能会变得臃肿解决:Vuex允许将store分割成模块每个模块都拥有自己的state、mutation、action、getter、甚至是嵌套子模块...

一,前言上一篇在介绍mutation时,提到了mutation中必须是同步函数这篇就来介绍Vuex-核心概念-Action,Action用来处理异步操作二,Vuex-ActionAction和mutation很相似,两者的区别在于:Action提交的是mutation，而不是直接变更状态Action可以包含任意异步操作三,Action的使用注册一个简...

一,前言在前面计数器程序的改写中,我们抛出了一个问题:调用vuex中的mutation,为什么不是直接store.mutation.xxx而是要store.commit('xxx')来实现下面就来介绍vuex的又一个核心概念Mutation二,vuex-Mutation更改Vuex-store中状态的唯一方法就是提交mutationVuex中mutation类似于事件：...

一,前言上一篇对Vuex-State做了介绍,在对State有一定了解的基础上,Vuex-Getter将会变得很简单下面就来介绍Vuex-核心概念-Getter二,Vuex-Getter简单的说,vuex中的getter类似于vue中的computed和computed一样,getter的返回值也会根据依赖被缓存起来,只有当依赖值发生改变才会重新计算三,Gett...

123

一,前言上一篇简单介绍了vuex,这一篇介绍vuex的安装和简单使用二,Vuex-store一个Vuex应用的核心是store, store是存放应用的中大部分状态 (state)的一个容器但Vuex并不只是将数据存放到全局对象这么简单Vuex和全局对象的区别:1,Vuex是响应式状态存储当Vue组件从store中读取状态时,若store中的状态发生变化,相...

一,前言前面介绍了vue-router和axios,这篇开始介绍全家桶最后一位成员Vuex--状态管理之前说Vue.JS借鉴了angularJs和ReactJs的优点,ReactJs中有Redux做状态管理Vue的状态管理Vuex正是借鉴了Redux的思想,下面开始介绍Vuex二,Vuex介绍Vuex是Vue应用程序的状态管理插件,采用集中式存储,管理应用中所有组件的状态...

一,前言如果访问一个接口长时间没有返回,不管是服务还是网络问题,用户都有权取消等待axios提供了使用cancel token取消请求的功能这篇介绍如何实现axios的取消操作二,取消请求方法一:使用CancelToken.source工厂方法创建cancel token//使用CancelToken.source工厂方法创建cancel tokenvar C...

一,前言axios提供了拦截器,用于在请求或响应被then或catch前进行拦截,可以在拦截器做些事情,例如记录日志等二,使用拦截器// 请求拦截器axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { ...

123123

一,前言本篇介绍创建请求时可以用的配置选项,多数例子来自文档二,请求配置创建请求时可用配置选项中,只有url是必需的若没指定method，默认使用get方法{ // url:请求的服务器URL url: '/user', // method:请求使用的方法,默认get method: 'get', // baseURL:自动在url前添加...

一,前言本篇介绍Axios的API,大多数来自于官网,后期会针对使用进行补充二,axios API1,向axios传递配置创建请求1)axios(config)// 发送POST请求axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName...

一,前言vue1.x时,官方推荐HTTP请求工具是vue-resource,但vue2.0将推荐工具改成了axios加上Vue2.0之后vue-resource不再更新,所以HTTP请求这部分针对axios进行介绍axios和vue-resource的使用方式相似,需要注意：axios接口返回的res并不直接是返回的数据，而是经过axios处理过的json对象。真正的数据在res.d...

一,前言项目开发中,会有从列表跳转到详情,在回到列表的场景这时通常都要记住列表页滚动条的位置,否则返回后列表回默认回到顶部Vue-router提供了滚动行为的管理,这篇就来介绍一下二,scrollTo()方法控制滚动条滚动到某一固定位置，使用scrollTo()方法scrollTo(xpos,ypos)xpos：必需。要在窗口文档显示区左上角显示的文档的 x 坐标...

一,前言这篇介绍一下路由元信息的使用路由元信息和导航守卫配合使用可以起到类似权限校验的作用二,路由元信息介绍路由器中routes配置中的每个路由对象为路由记录路由记录可以嵌套,所以,当一个路由匹配成功后，可能同时匹配多个路由记录以上篇Demo中的嵌套路由为例:商品:/product商品列表:/product/productList商品详情:/product/produ...

一,前言在使用angularJs时.可以实现路由的懒加载,即按需加载,对应用进行优化Vue也可以实现按需加载,即路由的懒加载这种方式,配置了懒加载的路由单独打包成文件,只有当依赖此组件时才会被下载这就解决了当项目过大,组件过多时,导致初始化下载的文件较大耗时较长的问题这一篇简单介绍一下vue-router路由懒加载的实现二,路由的懒加载这篇还是使用之前的例子,由于懒加...

一,前言一早继续更新了,昨天vue-router的各种使用,今天继续这篇要介绍的是vue-router-导航守卫导航守卫就是在发生导航变化的各个阶段,一些让开发者能做些事情的钩子有点儿像是vue-router生命周期这么个概念例如: 1)在导航刚刚开始变化,但此时页面还未变化时,预先将下个页面的数据拿到 2)页面先跳转过去,再根据传递的id获取页面数据 3)当...

一,前言之前说了<router-link>设置跳转,<router-view>进行路由组件显示这篇介绍vue-router提供可以在js中实现路由跳转的编程式路由导航二,编程式路由导航介绍除了使用<router-link>创建a标签来定义导航链接，还可以使用router的实例方法，通过编写js代码来实现跳转router.push:...

一,前言介绍组件时,知道可以使用props选项向传入对应的参数,也就是父到子通信本篇介绍vue-router提供的通过路由进行参数传递方式本篇相关代码基于前篇修改而来,和本篇无关的注释将被删除,请查看前篇二,向路由组件传递参数为了测试路由组件传递参数的功能,在商品模块->商品列表下,添加一个商品详情路由组件通过点击商品列表下的商品显示对应的商品详情商品详情...

一,前言一些组件需要通过接口请求数据来进行显示,请求数据会造成一定的等待时间如果反复切换组件,那就需要反复进行数据请求,并且这部分数据返回时相同的那么可以在组件第一次加载时,将组件对象缓存起来当切换路由显示时,组件对象被缓存起来,不被销毁,以提升再次查看时的用户体验如:Tab页制作的各种状态的订单列表切换当然,这取决于你的数据是否需要较高的实时性二,验证使用上一篇的例...

嵌套路由优化路由器配置iinkActiveClass:’active’ // 指定选中的路由链接的class总结 编写使用路由的3步 1,定义路由组件 2,注册路由 3使用路由 嵌套路由:路由组件包含路由1,定义路由组件 新闻 商品 2,注册路由 嵌套路由注册方式缓存路由组件为什么默认不缓存: about是新的,要是在应该是老的 为什么...

SPA单页面应用 一个界面上作业面变化 路有链接 点击路由链接不会向后台发请求而只是更新显示不同的路由组件 路由组件内部会想后台发送ajax请求动态获取数据官网: https://router.vuejs.org/zh/npm下载vue-routernpm install vue-router –save路由是path和组件对外暴露了一个路由器的构造函数,用来创建路由...

一,前言前面使用Vue-cli创建了Vue工程脚手架并启动访问项目 在这个脚手架工程中,具备了Vue项目开发许多工程化的设置 例如: 使用了npm包管理工具及各种其他工具, 如eslint 通过node.js创建一个Vue项目服务供外部访问 使用了工程打包构建工具webpack,添加了工程需要的webpack插件 创建了标准的项目目录,初始化了标准配...

一,前言这篇介绍如何配置IDE支持Vue项目,开发工具IDE:webStorm二,配置IDE支持ES6脚手架项目虽然可以正常运行,但项目目录下文件存在很多报错 需要配置IDE对ES6的支持进入Setting设置Languages&Frameworks/JavaScript,配置为支持ES6应用修改后,报错消失三添加对.vue文件的支持和创建...

一,前言截止到这一篇之前的内容,都算是对Vue的基本介绍从这篇开始,所介绍的只是更接近于实际项目开发的标准在对Vue有了基本了解的情况下,后续将介绍关于Vue项目工程化的内容,例如:使用Vue-cli创建脚手架工程webpack+常用插件+dev,prd环境的配置优化Vue-router前端路由(按需加载的应用)Vuex状态管理vue-resource/axios数据请求常...

一,前言实际开发中,大多都是使用插件,而不会去自定义插件这里只是作为简单介绍,目的在于了解二,插件插件的功能:为Vue添加全局功能插件的范围:添加全局方法或者属性，如: vue-custom-element添加全局资源：指令/过滤器/过渡等，如 vue-touch通过全局mixin方法添加一些组件选项，如: vue-router添加Vue实例方法，通过...

一,前言前边介绍了Vue内置的各种指令,如:v-if,v-show,v-for等大多数情况下Vue提供的指令是可以满足日常开发需要的但是有些时候我们需要针对特殊功能进行自定义指令,在内部进行DOM操作二,自定义指令的注册自定义指令的注册方式和组件相似,Vue提供了两种注册指令的方法:1,全局注册Vue.directive('指令名', { // 指...

一,前言在一些特殊情况下,需要动态进行Vue实例的创建,这时需要手动进行实例的挂载这一篇介绍Vue如何手动挂载实例二,Vue生命周期之挂载回顾一下,在介绍Vue生命周期时,Vue初始化有一个阶段就是寻找el选项或template选项进行挂载从图中可以看到:如果没有找到el选项,当vm.$mount(el)时会继续向下执行三,手动挂载实例如果Vue...

一,前言在定义组件时,可使用组件的template选项在javaScript中通过拼接字符串完成模板定义但如果模板的内容比较复杂,比起写Html,这种做法的效率就很低了这是可以使用X-template方式进行模板定义二,使用X-template定义组件模板Vue提供了通过text/x-template类型的<script>标签,使用时只要将<scri...

一,前言这一篇介绍有关异步更新队列的知识,通过异步更新队列的学习和研究能够更好的理解Vue的更新机制二,什么是异步更新队列先看一个例子:<div id="app"> <div id="div" v-if="show">测试文本(默认隐藏)</div> <Button @click="toggle&

一,前言当一个项目中使用了大量组件时,在一开始就将所有组件都加在完成并不是一件必须的事情更何况这样做会影响应用的性能和用户体验,这是可以考虑使用动态组件对应用进行优化二,动态组件Vue允许将组件定义为一个工厂函数,在组件需要渲染时才触发工厂函数动态地解析组件而且,Vue能够将动态组件解析的结果进行缓存,用于组件再次渲染<div id="app"> ...

一,前言这一篇介绍一下Vue动态挂载组件的实现二,动态组件Vue提供了<component>元素,配合is特性选择要挂在的主键,实现动态挂载不同组件<div id="app"> <component :is="dynamic"></component></div><scrip

一,前言前端写CSS样式有两种方式:类式样式和内联样式之前介绍的Vue组件模板都是封装在组件定义内部的template选项中Vue也提供了在父组件中(组件外部)定义组件模板的方式,这种模板称为内联模板这一篇就来介绍一些内联模板的使用二,内联模板在定义Vue组件时,我们可以将组件模板设置在组件的template选项中,Vue提供了一个内联模板功能,使组件模板可以设置在组件...

一,前言日常开发中,经常会用到一些递归组件,如:省市区的三联滚动,商品的多级分类等这一篇介绍如何创建递归组件二,递归组件常见的递归组件一般有级联选择器和树形控件,他们都具有层级关系利用组件递归就可以开发出具有层级关系的独立组件例如:在创建组件时,为组件设置name之后,就可以在组件模板中递归使用,创建递归组件了<div id="app"> ...

一,前言前面介绍了插槽的使用和作用域插槽,Vue还能访问clot分发的内容,虽然在实际开发中很少会使用到这个功能,但在组件中很重要这一篇简单介绍如果访问插槽二,访问slot在Vue1.x中,想要获取一个slot是很困难的,Vue2.x提供了一个可以访问插槽内容的方法:$slots,使用也非常简单通过$slots可以访问指定的具名slotthis.$slots.de...

一,前言作用域插槽是一种特殊的slot,使用一个可复用的模板替换已渲染元素由于作用域插槽相对较难理解,所以在这一篇进行单独介绍二,作用域插槽先看一个作用域插槽的例子,并和普通插槽对比:<div id="app"> <child-component> <template scope="props"> ...

一,前言Vue组件的三个API来源:props传递参数,events触发事件,slot内容分发前两个来源已经介绍过了,这一篇就来介绍slot内容分发二,什么是slot实际开发中,一些复杂的布局需要多个组件组合来实现混合父组件的内容与子组件的模板时,需要用到slot进行内容分发,slot也被称作插槽三,slot的编译作用域以下这段代码就包含一个插槽:...