vue
文章平均质量分 68
一朵盆栽
「朝菌不知晦朔,蟪蛄不知春秋」
展开
-
路由导航分析和三后台框架路由导航横向对比(没写完)
。原创 2023-03-13 18:24:18 · 337 阅读 · 0 评论 -
String字符串方法
如果只是对一个具体字符串来查找,那么使用indexOf()的系统资源消耗更小,效率更高;如果是查找具有某些特征的字符串(比如查找以a开头,后面是数字的字符串),那么indexOf()就无能为力,必须要使用正则表达式和search()方法了。很多时候用indexOf()不是为了真的想知道子字符串的位置,而是想知道长字符串中没有包含这个子字符串。首先要明确search()的参数必须是正则表达式,而indexOf()的参数只是普通字符串。indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。原创 2022-11-17 17:14:04 · 383 阅读 · 0 评论 -
记录Vuex学习
const state = () => ({ currentBox: 3,})//state保存了组件的数据//模板中{{$store.state.msg}}//函数中this.$store.state.msg//想要好看,则//computed: {// msg () {// return this.$store.state.msg // 其他地方就可以直接使用msg// }//}const getters = { currentBox: (state) =>原创 2021-08-02 09:34:18 · 228 阅读 · 0 评论 -
ES6解构赋值
解构赋值转载 2022-09-07 17:01:30 · 86 阅读 · 0 评论 -
@hook扩展分析
hook监听实践应用原创 2022-08-30 23:10:58 · 937 阅读 · 0 评论 -
uView折叠面板修改版
写了一个折叠面板,代码如下<template> <view> <u-collapse> <u-collapse-item name="guide" v-for="(item,i) in collapseList" :key="i"> <text slot="value" class="u-page__item__title__slot-title clickAllBtn" @click.stop="clickAll(item)"&.原创 2022-05-27 15:13:14 · 1323 阅读 · 1 评论 -
合并el-table相同行为一列
<el-table :data="tableData" border :span-method="objectSpanMethod"> <el-table-column prop="province" label="省" width="auto" align="center"></el-table-column> <el-table-column prop="city" label="市" width="auto" align="center"><原创 2022-05-12 10:58:10 · 775 阅读 · 0 评论 -
组件通信总览
文章目录组件通信常用方式propseventbusvuex自定义事件边界情况$parent$children$root$refsprovide/inject非prop特性$attrs$listeners组件通信常用方式propseventbus解决无关系组件之间的交互问题,比如兄弟如何使用?//main.jsVue.prototype.$bus = new Vue()//a组件mounted() { this.$bus.$on('isCalled', this.isCalled) /原创 2021-09-13 16:14:58 · 216 阅读 · 0 评论 -
数字翻牌器例子
<tr> <th class="width-10" style="border-top: none">录取比对结果</th> <td v-if="tempData.rqbd" :colspan="tempData.flag !== '0' ? 1 : 3" style="width: 29.7%; border-top: none"> {{ tempData.rqbd }} ..原创 2021-09-09 11:13:18 · 114 阅读 · 0 评论 -
一个下拉单选全部
<el-select v-model="selectDept" collapse-tags multiple @change="changeDept($event)"> <el-option label="全部" value="全部" /> <el-option v-for="(item, i) in deptLists" :key="i" :label="item.xymc" :value="item.xymc" /> &l..原创 2021-09-07 10:09:29 · 73 阅读 · 0 评论 -
写了个父子组件的例子
缺点是父组件参数写太多,我同事说传一个最好后台页面前台页面共用对话框,后台无按钮,前台有//共用组件代码<template> <div> <el-dialog title="申请详情" :visible.sync="disabled" width="60%"> <el-row :gutter="20"> <el-col :span="16"> <div class="原创 2021-08-31 11:04:49 · 388 阅读 · 2 评论 -
vue问题
mockjs模拟数据mock文件夹两处,api文件夹一处,自行了解报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “showDial原创 2021-08-28 17:28:14 · 669 阅读 · 1 评论 -
computed和watch例子
<p>课程总数:{{ total1 }}</p>watchvar app = new Vue({ el: '#app', data(){ return{ total:8, total1:9 } }, watch:{ total:{ immediate:true, handler(newVal,oldVal){原创 2021-08-26 15:03:07 · 169 阅读 · 0 评论 -
Vue-性能优化
优化分打包体积优化和运行时优化,以下都是运行时优化。使用key对于通过循环生成的列表,应给每个列表项一个稳定且唯一的key,这有利于在列表变动时,尽量少的删除、新增、改动元素使用冻结的对象冻结的对象不会被响应化使用函数式组件参见函数式组件使用计算属性如果模板中某个数据会使用多次,并且该数据是通过计算得到的,使用计算属性以缓存它们非实时绑定的表单项当使用v-model绑定一个表单项时,当用户改变表单项的状态时,也会随之改变数据,从而导致vue发生重渲染(rerender),这会带来一些性能原创 2021-04-30 16:34:30 · 677 阅读 · 0 评论 -
Vue-diff算法
面试题:请阐述vue的diff算法参考回答:当组件创建和更新时,vue均会执行内部的update函数,该函数使用render函数生成的虚拟dom树,将新旧两树进行对比,找到差异点,最终更新到真实dom对比差异的过程叫diff,vue在内部通过一个叫patch的函数完成该过程在对比时,vue采用深度优先、同层比较的方式进行比对。在判断两个节点是否相同时,vue是通过虚拟节点的key和tag来进行判断的具体来说,首先对根节点进行对比,如果相同则将旧节点关联的真实dom的挂到新节点上,然后根据需要更.原创 2021-04-29 15:11:25 · 329 阅读 · 0 评论 -
Vue-数据响应式原理
什么是数据响应式?数据变化,页面重新渲染。×不准确数据是在对象里面,就是改变了对象的一个属性,运行了render函数。√稍微准确改变了对象,运行了某些函数。√准确响应式数据的最终目标,是当对象本身或对象属性发生变化时,将会运行一些函数,最常见的就是render函数。以上两张图证明了对象改变,运行了某些函数。在具体实现上,vue用到了几个核心部件:0bserverDepWatcherScheduler0bserver我们先来思考,对象改变,怎么联动地运行某些函数?ES5数据劫持原创 2021-04-25 16:29:57 · 1067 阅读 · 1 评论 -
Vue-虚拟dom
对于虚拟dom我们分以下四个问题来阐述:一、什么是虚拟dom二、三、四、一、什么是虚拟dom?虚拟dom本质上就是一个普通的JS对象,用于描述视图的界面结构原创 2021-04-05 19:47:33 · 648 阅读 · 3 评论