![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 53
wytraining
平平无奇的前端搬砖小能手~
展开
-
lottie-web 前端动画类库的使用
lottie-web 前端动画类库的使用原创 2023-02-17 21:30:36 · 2343 阅读 · 0 评论 -
vue动态修改标签页的icon、系统名称
vue动态修改标签页的icon、系统名称原创 2023-01-13 12:01:09 · 3639 阅读 · 0 评论 -
vue使用beforeRouteLeave实现路由的监听,在跳转前出现确认弹窗
vue实现路由的监听,在跳转前出现确认弹窗原创 2022-08-02 17:41:30 · 4091 阅读 · 3 评论 -
vue页面中实现锚点的功能,平滑移动至被定位处
vue页面中实现锚点的功能,平滑移动至被定位处原创 2022-08-02 17:03:30 · 598 阅读 · 1 评论 -
iview实现表格的全选、反选、清空、统计、单选等功能
iview实现表格的全选、反选、清空、统计、单选等功能原创 2022-03-29 17:07:34 · 4445 阅读 · 0 评论 -
vue中的动态组件:使用is
vue 可以通过 component 元素加一个特殊的 is 来实现组件的动态切换html:<ul class='tabs'> <li v-for='item in tabList' :key='item.name' :class='{actived: currentTab===item.value}' @click='changeTab(item)' > {{ item.name }原创 2022-03-16 18:00:25 · 1579 阅读 · 0 评论 -
vue的路由守卫与axios的请求拦截
vue的路由守卫与axios的请求拦截原创 2021-07-30 15:18:15 · 792 阅读 · 0 评论 -
前端配置多个后台地址: baseUrl
1.vue.config.js 中配置不同的前缀,以及所对应的后台地址devServer: { proxy: { "/api": { target: "http://172.xx.x.xxx:xxxx", // 地址1 //表示/api替换成该地址 changeOrigin: true, pathRewrite: { "^/api": "", //重写api为空原创 2021-07-15 18:16:45 · 4664 阅读 · 0 评论 -
知识梳理——vue
1.Vue模板编译的原理就是将template(模板)转化为render(渲染函数)的过程。会经历以下阶段:1.解析器: 将模板解析成AST(abstract syntax tree 抽象语法树)2.优化器: 遍历AST标记静态节点(生成渲染函数之前这个阶段,需要做一个优化操作:遍历一遍AST,给所有静态节点做一个标记,这样在虚拟DOM中更新节点时,如果发现这个节点有这个标记,就不会重新渲染它。)3.代码生成器: 将优化后的AST树转换为可执行的代码(渲染函数)...原创 2021-03-22 15:47:36 · 786 阅读 · 0 评论 -
vue单页面的首屏优化
一:缩小webpack打包生成体积1.尽量按需引入,不要在main.ts里全局引入2.webpack-bundle-analyzer可以知道生成的包中哪个依赖占据着空间,哪个库占用的空间最多二:使用cdn使用cdn把一些必要的库在index.html里面引入进去,这样也能加快加载速度。三:动态路由分块加载这种优化,就是将每个组件的js代码独立出来,在使用到这个组件时,才向服务器请求文件,并且请求过一次后就会缓存下来,再次使用到这个组件时,就会使用缓存,不再发送请求。import Vue fro原创 2021-03-09 16:46:46 · 259 阅读 · 0 评论 -
vue中针对7个数组方法的重写
vue通过原型拦截的方式重写了数组的7个方法,首先获取到这个数组的Observer。如果有新的值,就调用observeArray对新的值进行监听,然后调用notify,通知render watcher,执行update// src/core/observer/array.js// 获取数组的原型Array.prototype,上面有我们常用的数组方法const arrayProto = Array.prototype// 创建一个空对象arrayMethods,并将arrayMethods的原型指原创 2021-03-03 18:34:02 · 9188 阅读 · 5 评论 -
vue中的key
一:什么是key二:对key的理解key 是给每一个 vnode 的唯一 id,依靠 key,我们的 diff 操作可以更准确、更快速key会用在虚拟DOM算法(diff算法)中,用来辨别新旧节点。不带key的时候会最大限度减少元素的变动,尽可能用相同元素。(就地复用)带key的时候,会基于相同的key来进行排列。(相同的复用)带key还能触发过渡效果,以及触发组件的生命周期三:为什么存在不带key速度更快不带key的省略了销毁和创建dom的开销,只需要替换文本节点就ok了,而带key原创 2021-02-21 23:24:31 · 196 阅读 · 0 评论 -
Vue.nextTick
一:什么是Vue.nextTick在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。 methods: { updateMessage: function () { this.message = '已更新' console.log(this.$el.textContent) // => '未更新' this.$nextTick(function () { console.log(this原创 2021-02-21 18:31:07 · 108 阅读 · 0 评论 -
MVVM、响应式、数据的双向绑定
一.实现双向绑定的方法可以实现双向绑定的方法有很多,KnockoutJS基于观察者模式的双向绑定,Ember基于数据模型的双向绑定,Angular基于脏检查的双向绑定,基于数据劫持的双向绑定(常见的基于数据劫持的双向绑定有两种实现:Object.defineProperty和Proxy)二:基于数据劫持实现的双向绑定的特点什么是数据劫持vue.js采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 getter/setter , 在数原创 2020-12-11 17:00:58 · 608 阅读 · 0 评论 -
vue的虚拟DOM以及Diff算法
1.什么是虚拟DOM用JS按照DOM结构来实现的树形结构对象2.为什么需要虚拟DOM既然已经有了DOM,为什么还需要额外加一层抽象?1.为了尽可能少的操作DOM,不仅仅是DOM相对较慢,更因为频繁操作DOM会造成浏览器的重绘或者回流,这些都是性能的杀手。因此,我们需要这一层抽象,在patch过程中尽可能的一次性将差异更新到DOM中。2.虚拟DOM最初的目的,就是更好的跨平台,比如Node.js就没有DOM,如果想实现SSR(服务端渲染),那么一个方式就是借助Virtual DOM,因为Virtua原创 2020-12-07 20:30:59 · 213 阅读 · 1 评论 -
APP
1.安装cordovanpm install -g cordova2.创建项目cordova create testdemo com.yourname.testdemo TestDemo3.进入项目cd testdemo4.添加平台cordova platform add android5.调试运行cordova run android6.打包生成wwwcordova build android7.在MyApp中写vue项目8.修改文件:修改Vue项目config/i原创 2020-10-23 14:01:07 · 116 阅读 · 0 评论 -
vue中$router.push打开新窗口
//点击排口rowClick(params: any) { let url = this.$router.resolve({ path: '/main/portInfo', query: { sbid : params.sbId } }); window.open(url.href, '_blank');}原创 2020-08-24 15:48:41 · 950 阅读 · 0 评论 -
element表格
element表格1.html: 用v-for循环表头<el-table :data="tableData" stripe style="width: 100%"> <el-table-column v-for="item in tableColums" :prop="item.prop" :label="item.label" wid原创 2020-08-21 14:03:09 · 1279 阅读 · 0 评论 -
iview表格设置表头: 使用 renderHeader在表头渲染按钮
1.表头显示的是一个按钮,可以使用 renderHeader 渲染:{ renderHeader: (h, params) => { return h('span', [ h('Button', { props: { type: 'success', size: 'small' } }, '按钮1'), h('But原创 2019-12-25 16:33:06 · 5054 阅读 · 0 评论 -
vuex的学习
1.state在组件的 computed 中引用store中的值:2.getter1.store 中的 getters :相当于是组件中的 computed(对已有的变量的操作)2.在组件的 computed 中引用getters中的值3.mutation1.store 中定义 mutations 方法(是对 state 的操作)2.在组件的 metho...原创 2019-10-21 21:43:26 · 120 阅读 · 0 评论 -
vue生命周期
beforeCreate: 表示刚初始化了一个 Vue 空的实例对象,在这个对象上,只有默认的一些生命周期函数和默认的事件,其他的东西都未创建。 注意:在 beforeCreate 生命周期执行的时候,data、methods 和 el 中的数据都还没被初始化,所以上述显示两个 undefined。created: 表示 data、methods 已经初始化好了,所以 this.msg ...原创 2019-03-18 22:25:50 · 167 阅读 · 0 评论