VUE
VUE.js
Silencer_1
这个作者很懒,什么都没留下…
展开
-
Axios取消请求ajax请求
应用场景用户需要快速请求,比如抢购,前一次的请求数据是毫无意义的,直接取消就完事了接口返回数据占用同一个dom,比如快速切换tab后,前一次请求比后一次请求响应慢,这时的tab页已经切过去了,可是数据却是前一个tab页的Axios中的使用/** index.js */// 如果有前一次请求在,先取消this.cancel && this.cancel('message')this.$axios({ url, method, // 实原创 2020-07-02 15:23:08 · 11933 阅读 · 0 评论 -
Vue的基础总结和进阶思路
生命周期breforeCreate:实例创建前,这个阶段实例的 data 和 methods 是读不到的。created:实例创建后,这个阶段已经完成数据观测,属性和方法的运算,watch/event 事件回调,mount 挂载阶段还没有开始。$el 属性目前不可见,数据并没有在 DOM 元素上进行渲染。created 完成之后,进行 template 编译等操作,将 template 编译为 render 函数,有了 render 函数后才会执行 beforeMountbeforeMount:在原创 2020-06-04 14:57:03 · 12028 阅读 · 0 评论 -
Vue的组建通信 总结
$refs父组件调用子组件的方法<child ref="child" />this.$refs.child.emitEvent(this.msg)$emit子组件调用父组件的方法this.$emit('method', ...arguments)$on兄弟组件// 接受方:发送方.$on('method', ...arguments)// 发送方:接受方.$emit('method', ...arguments)$children返回一个数组,无原创 2020-06-04 14:56:22 · 11984 阅读 · 0 评论 -
VueCli的一点经验
一点操作# --modern 会构建两个版本,分别做兼容和速度的,而且直接部署就完事了,爱了爱了# 构建的另一个版本是为了在支持新特性的浏览器上跑得更快vue-cli-service build --modern原创 2020-06-04 14:55:38 · 11848 阅读 · 0 评论 -
Vuex的一点总结
Stateimport { mapState } from 'vuex'computed: {...mapState(['']) }this.$store.stateGetter接受 state 作为其第一个参数,接受其他 getter 作为第二个参数// 通过属性访问getters: { getterName: (state, getters) => { return }}store.getters// 通过方法访问getters: { getterNam.原创 2020-06-04 14:54:32 · 11917 阅读 · 0 评论 -
Vue-Router(前端路由)进阶
流程before... 最后的参数是 next() ,必须调用导航被触发。在失活的组件里调用离开守卫。调用全局的 beforeEach 守卫。在重用的组件里调用 beforeRouteUpdate 守卫。在路由配置里调用 beforeEnter 。解析异步路由组件。在被激活的组件里调用 beforeRouteEnter 。调用全局的 beforeResolve 守卫。导航被确认。调用全局的 afterEach 钩子。触发 DOM 更新。用创建好的实例调用 beforeRout原创 2020-06-04 14:53:43 · 11979 阅读 · 0 评论 -
Vue-Router(前端路由)基础
Router安装npm i vue-router -Simport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)动态路由模式匹配路由$route.params/user/:username/user/evean{ username:'evan' }/user/:username/post/:post_id/user/evean/post/123{ username:'e原创 2020-06-04 14:50:44 · 12653 阅读 · 0 评论 -
Vue开发中的一点技♂巧
路由参数解耦设置路由的 props 参数在组件内用 props 接收 params 参数// 设置为 trueconst router = new VueRouter({ routes: [{ path: '/user/:id', component: User, props: true }]})// 用函数返回const router = new VueRouter({ routes: [{ path: '/user/:id', co原创 2020-06-04 14:47:47 · 11983 阅读 · 0 评论 -
Vue的一些底层实现原理
ProxyProxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming)const obj = new Proxy({}, { get(target, key, receiver) { console.log(`getting ${key}`) return Reflect.get(target, key, receiver) }, set(target, key, value, rec原创 2020-06-04 14:46:59 · 12082 阅读 · 0 评论 -
JS工程化中模块的优雅导入
注意点require 不能直接导入用变量命名的路径字符串,可以用 require.contextrequire.context 有三个参数:匹配的路径目录,(从当前目录开始算起)是否深层遍历正则匹配,匹配出你需要的路径例子import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const routes = []const context = require.context('./router',原创 2020-06-04 14:38:05 · 11966 阅读 · 0 评论