超级实用的vue小技巧，用了之后直呼好棒~

实用的vue小技巧，来源于真实企业实战 —— 记得收藏~

1. 原型注入
2. 对象冻结
3.img 加载失败
4. 递归组件
5. 解决繁乱的template —— render函数
6. 延迟更新 —— Vue.nextTick()
7. 自定义指令

1. 原型注入

全局属性和方法可以这么定义
方便调用和获取
一般不定义很多（会污染原型，每次实例Vue都会带上）

// main.js入口文件内
import Vue from "vue";
import router from "./router";
import store from "./store";
import dayjs from "dayjs";
import App from "./App";// 将dayjs注入到Vue原型上，方便vue组件内进行this.dayjs获取
Vue.prototype.dayjs = dayjs;
// 任意组件内 this.fn() 调用即可
Vue.prototype.fn = function(){// do something
}
new Vue({router,store,render: (h) => h(App),
}).$mount("#app");

2. 对象冻结

用于纯列表渲染，数据无交互的情况，可以禁止 vue 劫持绑定，节省内存，提升性能

<script>
import * as Api from "@/common/apiNew.js";
export default {data() {return {dataList: Object.freeze(this.list),};},methods: {},
};
</script>

3.img 加载失败

添加默认图片

<img :src="imgUrl" @error="handleError" alt="">
<script>
export default{data(){return{imgUrl:''}},methods:{handleError(e){e.target.src = reqiure('图片路径') }}
}
</script>

4. 递归组件

tree 组件常用
层级是根据后台数据决定的，不知道是多少级
当前场景需要用到动态组件
概念
组件在它的模板内可以递归的调用自己，只要给组件设置name组件就可
必须给一个条件来限制数量，否则会抛出错误: max stack size exceeded
组件递归用来开发一些具体有未知层级关系的独立组件（比如常见的：联级选择器和树形控件）

<template><div v-for="(item,index) in treeArr">子组件，当前层级值： {{index}} <br/><!-- 递归调用自身, 后台判断是否不存在改值 --><tree :item="item.arr" v-if="item.flag"></tree></div>
</template>
<script>
export default {// 必须定义name，组件内部才能递归调用name: 'tree',data(){return {}},// 接收外部传入的值props: {item: {type:Array,default: () => []}}
}
</script>

5. 解决繁乱的template —— render函数

代码中偶尔会有这种一值多判断的问题

<template><div class="hello"><h1>解救繁乱的template ———— render()</h1><!-- 一值多判断 --><div v-if="value === 1"><button>按钮1</button></div><div v-else-if="value === 2"><button>按钮2</button></div><div v-else-if="value === 3"><button>按钮3</button></div><div v-else><button>按钮4</button></div></div>
</template>

这么写是没错的，但是看起来很不文雅，代码冗余
我们可以使用 render()函数封装一个button组件
只需要传值，就可以得到不同类型的按钮，非常方便

<script>
export default {props: {type: {type: String,default: 'normal'},text: {type: String,default: 'normal'}},render(h){// h: createElement()return h('button', {// v-bind:classclass: {btn: true,'btn-success': this.type === 'success','btn-danger': this.type === 'error','btn-warning': this.type === 'warning','normal': !this.type},// dom属性domProps:{innerText: this.text || '默认按钮'},// v-on 事件可以绑定在这里on:{} })}
}
</script>
<style scoped>
.btn{width: 100px;height: 40px;color: white;transition: all .5s;
}
.btn:hover{background: chartreuse;cursor: pointer;
}
.btn-success{background: green;
}
.btn-danger{background: red;
}
.btn-warning{background: orange;
}.normal{background: blue;
}</style>

调用

// 1. 引入
import Button from '../views/button.vue';
// 2. 在components中注册
components:{Button
}
// 3. 就可以在模板使用了，传入对应的值
<Button:type = "type":text = "text">
</Button>

6. 延迟更新 —— Vue.nextTick()

在下次 DOM 更新循环结束之后执行延迟回调
在修改数据之后立即使用这个方法，获取更新后的 DOM
一般用于，父组件调用子组件的方法时，需要等其更新完毕

//因为 mounted 阶段 dom 并未渲染完毕,所以需要$nextTick
mounted(){ this.$nextTick(() => {// 通过 $refs 获取dom 并绑定 send 方法this.$refs.msg.send('浙江温州江南皮革厂') })
}

7. 自定义指令

自定义一个指令，让页面上的input框自动获取焦点

Vue.directive('focus', {inserted: function(el){el.focus();}})

使用

<input placeholder="请输入你的电话" v-model="tel" v-focus />

1. 希望本文能对大家有所帮助，如有错误，敬请指出

2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我

超级实用的vue小技巧，用了之后直呼好棒~相关推荐

ps背景不变换字_分享五个超级实用的PS小技巧
今天西瓜给大家分享五个PS的小技巧,特别容易上手操作而且很实用! 1.利用剪切蒙版给衣服加图案首先第一步我们打开素材,使用快速选择工具,把裙子选出来,然后Ctrl+J复制出来打开花纹背景素材,Ct ...
分享：几个超级实用的excel小技巧
在excel中输入m³,大部分同学会想到设置上标,但如果被单元格引用,它就会被打回原形. 也可以用Alt+179输入,但需要在小键盘上输入数字,有的同学笔记本没有小键盘.绕了一圈,兰色是要说最简单方法 ...
超级实用的电脑小技巧大全
技巧一: 一些用户正在经历缓慢和间歇性的下载速度. 解决方案: 比如小编在下载界面做了温馨提示,要求用户在使用本软件前,退出电脑上安装的任何杀毒软件(360安全卫士.QQ管家.金山卫士.百度卫士等), ...
办公技巧：分享12个实用的word小技巧，欢迎收藏！
今天给大家分享12个实用的word小技巧,希望对大家能有所帮助! 1. Word表格自动填充序号在Word表格里选中要填入相同内容的单元格,单击"格式→项目符号和编号",进入&q ...
计算机办公软件的使用技巧,实用的Word小技巧集锦(1)办公软件知识 -电脑资料
一,把文字替换成图片首先把图片复制到剪贴板中,然后打开替换对话框,在"查找内容"框中输入将被替换的文字,接着在"替换为"框中输入"^c" ...
python实用大全pdf_超级实用干货|九大技巧，带你用Python玩转PDF
原标题:超级实用干货|九大技巧,带你用Python玩转PDF 尽管PDF最开始是由Adobe发明的,但它现在已经成为国际标准组织ISO维护的公开标准了.大家可以在Python中通过PyPDF2包来处理 ...
我的世界java版控制键_我的世界：教你几个实用的快捷键小技巧，萌新可能对此一无所知！...
#我的世界# 作为一位经常打字的作者,CTRL+C(复制)和CTRL+V(粘贴)是用得最为频繁的(当然伪萌新可不是搬运工,纯原创!). 想要让打字变得更快,用好键盘快捷键是非常必要的!游戏也是如此!掌 ...
前端人必备的Vue小技巧|建议收藏
Vue是一套响应式的 JavaScript 开发库,是当下非常流行的 JavaScript 技术开发框架之一.vue 作为目前前端三大框架之一,对于前端开发人来说是一项必备技能.相比于其他大型框架, ...
推荐几个实用的Excel小技巧给你
技巧一:使用快捷键[CTRL+ Enter]来快速对不连续的空白单元格进行数据匹配函数公式:=VLOOKUP(I3,B:C,2,0) 操作步骤如下: 第一步:首先我们选中需要匹配的数据区:J2:J8 ...

超级实用的vue小技巧，用了之后直呼好棒~

实用的vue小技巧，来源于真实企业实战 —— 记得收藏~

1. 原型注入

2. 对象冻结

3.img 加载失败

4. 递归组件

5. 解决繁乱的template —— render函数

6. 延迟更新 —— Vue.nextTick()

7. 自定义指令

超级实用的vue小技巧，用了之后直呼好棒~相关推荐

最新文章

热门文章