Vue
哈娄
前端开发
展开
-
为什么v-if和v-for不建议用在同一标签
如下列代码:<div v-for="item in [1, 2, 3]" v-if="item == 1"> {{item}}</div>在vue2中,v-for的优先级比v-if高,所以会先循环出来,然后再进行item每个 v-if判断。这样就无用的多渲染好多次dom。解决办法:用computed写法代替<div v-for="item in list"> {{item}}</div>computed() .原创 2021-12-03 11:20:14 · 745 阅读 · 0 评论 -
Vue 路由钩子
路由钩子分为三种:全局钩子:beforeEach、 afterEach、beforeResolve 单个路由里面的钩子: beforeEnter 组件路由:beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave 全局钩子:beforeEach:全局前置守卫 进入路由之前 beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用 afterEach 全局后置钩子 进入路由之后路由...原创 2021-09-14 10:18:36 · 8333 阅读 · 0 评论 -
Vue 自定义指令 directive
指令的钩子函数bind:只调用一次,指令在第一次绑定到元素时调用。这里可以进行一次性的初始化设置 inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中) update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 componentUpdated: 组件在组件的VNode和子组件的VNode全部更新后调用 unbind:只调用一次,指令与元素原创 2021-08-25 10:52:11 · 391 阅读 · 0 评论 -
vue子组件修改父组件的传值
1 .sync 修饰符// 父组件<home :title.sync="title" />//编译时会被扩展为<home :title="title" @update:title="val => title = val"/>// 子组件// 所以子组件可以通过$emit 触发 update 方法改变mounted(){ this.$emit("update:title", '这是新的title')}2.传入引用类型数据,进行修改// 父.原创 2021-07-29 08:40:36 · 383 阅读 · 0 评论 -
前端 xlsx 读取excel文件转成json数据给接口
1.安装依赖yarn add xlsx2.项目引入import * as XLSX from 'xlsx';3.在上传文件函数内执行 ( 根据场景自定义处理时机 )const uploadChange = (uploadFile) => { // 通过FileReader对象读取文件 const fileReader = new FileReader(); // readAsArrayBuffer之后才会启动onload事件 fileRea原创 2021-07-15 12:22:56 · 2273 阅读 · 3 评论 -
vue 简单实现双向数据绑定mvvm
<input id="input"/>const data = {};const input = document.getElementById('input');Object.defineProperty(data, 'text', { set(value) { input.value = value; this.value = value; }...原创 2018-11-20 16:01:23 · 960 阅读 · 0 评论 -
Vue路由懒加载与组件懒加载
为了提升首屏加载速度,我们在项目中可以使用路由的懒加载来优化,解决加载过程中 白屏时间长问题路由懒加载代码:异步组件懒加载方式( component:resolve=>(require(['需要加载的路由的地址']),resolve) )import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { pat.原创 2021-05-21 10:13:32 · 344 阅读 · 0 评论 -
element-ui 动态表单规则,初始化规则报红提示解决
今天在做一个动态表单规则的需求, 但是赋值给rules规则值之后,初始化的时候,表单就会检验报红。解决办法如下:const ruleObj = { date1: [ { required: val, message: '请选择开始日期', trigger: 'change' } ], date2: [ { required: val, message: '请选择截止日期', trigger: 'change' } ],}this.rules =原创 2021-04-14 09:22:03 · 6876 阅读 · 7 评论 -
elementUI 使用dialog upload组件上传不回显问题
问题:dialog中进行上传图片并进行回显需求, 上传是成功了,就是回显不出来。原因:上传之后dialog中没有触发页面渲染解决办法: 在上传成功 --> 赋值给data图片url值 之后,调用this.$forceUpdate()方法, 直接调用vue的强制刷新机制,就可以解决了。代码如下:// 上传成功后的回调 handleAvatarSuccess(res, file) { this.dialogPartAdd.imageUrl = URL.createOb.原创 2021-03-30 14:13:31 · 1473 阅读 · 1 评论 -
vue watch监听对象对应值变化
今天做需求,遇到一个问题。vue的watch无法监听对象的某个属性改变。也是看了一个博主的博客,找到了解决办法。在此感谢! 在此写出来,希望可以帮助更多的小伙伴。如果简单使用watch去监听一个对象的value改变是不会触发watch的。例如:函数改变了data中的form某个属性,也不会触发打印。watch: { form(val) { console.log(val) } },解决办法:computed搭配watch使用。先用computed计算原创 2021-03-10 09:36:50 · 1755 阅读 · 0 评论 -
Vue混合机制mixins使用
1.和正常父子组件引用区别父子组件引用:(是相互独立的, 通过props传值调用) 父组件 + 子组件 ==>父组件 + 子组件mixins:(集合成一个新的组件,在同一个作用域内,直接使用) 父组件 + 子组件 ==>new父组件2.mixins使用1. 写一个mixins文件,mixins/common.js。暴露出对象结构export default { methods: { testMix...原创 2021-03-01 15:20:08 · 215 阅读 · 0 评论 -
Vue插槽slot使用
1.匿名插槽// 子组件 Child1<div> <slot></slot> // 此时插槽区域内显示文案hello</div>// 父组件<Child1>hello</Child1>2.具名插槽用途:让内容显示到组件内的指定位置// 子组件 Child1<div> <slot></slot> // 显示默认的插槽 <slot name="原创 2021-01-04 20:34:31 · 358 阅读 · 1 评论