日常工作中,使用vue进行项目开发居多,因此把一些vue项目常见问题进行总结,在此记录,避免以后开发中做过多的重复工作。
而掌握一些有用的技巧,使用一些更高级的技术点,也能让我们成为更好的 Vue 开发者
Watch immediate
当 watch 一个变量的时候,初始化时并不会执行,如下面的例子,你需要在created的时候手动调用一次。
// bad
created() {this.getsearchText();
},
watch: {searchText: 'getSearchText',
}
你可以添加immediate属性,这样初始化的时候也会触发,代码也就可以简化成这样
// good
watch: {searchText: {handler: 'getSearchText',immediate: true,}
}
vue路由跳转打开新窗口
使用 this.$router.resolve
const openNewUrl=(url) => {let routeData = this.$router.resolve({path: url})window.open(routeData.href, '_blank')}
el-input 限制输入框只能输入数字
<el-input v-model.number="num"onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"></el-input>
el-input 过滤特殊字符或身份证脱敏
v-model拆分为:value和@input
<el-input :value="input" @input='e => input = idCardValid (e)' placeholder="请输入内容"></el-input>
methods:{idCardValid(val){const idCard= val.replace(/^(\d{6})\d+(\d{4})$/, "$1******$2")console.log(idCard)return idCard}
},
使用a标签下载本地静态资源文件
- 1、public目录下存放要下载的静态资源
- 2、a 标签下载
<a href="/demo.rar" download="demo.rar">点击下载</a>
检测元素外部(或内部)的单击
例如我们检测一个id为 target 的 div 目标元素
let el= document.querySelector('#target')
window.addEventListener('mousedown', e => {
// 获取被点击的元素
const clickedEl = e.target;
if (el.contains(clickedEl)) {
//在 "el "里面点击了
} else {
//在 "el "外点击了
}
});
iframe框架内页面控制父框架页面跳转到某地址
const { href } = this.$router.resolve({ path: "/index", query: { key: key } });
// iframe 控制父页面跳转
window.parent.window.location.href = href
hookEvent
组件内使用
开发中用到定时器时我们一般这样
// bad
mounted() {// 创建一个定时器this.timer = setInterval(() => {// ......}, 500);},// 销毁这个定时器。
beforeDestroy() {if (this.timer) {clearInterval(this.timer);this.timer = null;}
}
而借助 hook,可以更方便维护
// good
mounted() {let timer = setInterval(() => {// ......}, 500);this.$once("hook:beforeDestroy", function() {if (timer) {clearInterval(timer);timer = null;}});}
监听子组件生命周期函数
原本
//父组件
<child
:value="value"
@childMounted="onChildMounted"
/>
method () {
onChildMounted() {
// do something...
}
},
// 子组件
mounted () {
this.$emit('childMounted')
},
hooks:
//父组件
<child:value="value"@hook:mounted="onChildMounted"
/>
method () {onChildMounted() {// do something...}
},
在Vue组件中,可以用过$on,$on