vue双击事件_我总结了12个Vue.js开发技巧和窍门
我真的很喜欢使用Vue.js,每次使用框架时,我都会喜欢深入研究其功能和特性。通过这篇文章,我向你介绍了12个很酷的提示和技巧,你可能尚未意识到这些技巧和窍门,以帮助你成为更好的Vue开发人员。
更漂亮的插槽语法
随着Vue 2.6的推出,已经引入了插槽的简写方式,可用于事件(例如,@click 表示 v-on:click 事件)或冒号表示方式用于绑定(:src)。例如,如果你有一个表格组件,你可以使用这个功能如下:
.../* 一些内容,你可以在这里自由使用“item” */ ...
$on(‘hook:’) 可以帮助你简化代码
删除事件监听器是一种常见的最佳实践,因为它有助于避免内存泄露并防止事件冲突。
如果你想在 created 或 mounted 的钩子中定义自定义事件监听器或第三方插件,并且需要在 beforeDestroy 钩子中删除它以避免引起任何内存泄漏,那么这是一个很好的特性。下面是一个典型的设置:
mounted () { window.addEventListener('resize', this.resizeHandler);},beforeDestroy () { window.removeEventListener('resize', this.resizeHandler);}
使用 $on('hook:') 方法,你可以仅使用一种生命周期方法(而不是两种)来定义/删除事件。
mounted () { window.addEventListener('resize', this.resizeHandler); this.$on("hook:beforeDestroy", () => { window.removeEventListener('resize', this.resizeHandler); })}
$on 还可以侦听子组件的生命周期钩子
最后一点,生命周期钩子发出自定义事件这一事实意味着父组件可以监听其子级的生命周期钩子。
它将使用正常模式来监听事件(@event),并且可以像其他自定义事件一样进行处理。
使用 immediate: true 在初始化时触发watcher
Vue Watchers 是添加高级功能(例如,API调用)的好方法,该功能可以在观察值发生变化时运行。
默认情况下,观察者不会在初始化时运行。根据你的功能,这可能意味着某些数据不会完全初始化。
watch: { title: (newTitle, oldTitle) => { console.log("Title changed from " + oldTitle + " to " + newTitle) }}
如果你需要 wather 在实例初始化后立即运行,那么你所要做的就是将 wather 转换为具有 handler(newVal, oldVal) 函数以及即时 immediate: true 的对象。
watch: { title: { immediate: true, handler(newTitle, oldTitle) { console.log("Title changed from " + oldTitle + " to " + newTitle) } }}
你应该始终验证你的Prop
验证 Props 是 Vue 中的基本做法之一。
你可能已经知道可以将props验证为原始类型,例如字符串,数字甚至对象。你也可以使用自定义验证器——例如,如果你想验证一个字符串列表:
props: { status: { type: String, required: true, validator: function (value) { return [ 'syncing', 'synced', 'version-conflict', 'error' ].indexOf(value) !== -1 } }}
动态指令参数
Vue 2.6的最酷功能之一是可以将指令参数动态传递给组件。假设你有一个按钮组件,并且在某些情况下想监听单击事件,而在其他情况下想监听双击事件。这就是这些指令派上用场的地方:
......
而且,这实际上也很整洁-你可以将相同的模式应用于动态HTML属性,props等。
重用相同路由的组件
开发人员经常遇到的情况是,多个路由解析为同一个Vue组件。问题是,Vue出于性能原因,默认情况下共享组件将不会重新渲染,如果你尝试在使用相同组件的路由之间进行切换,则不会发生任何变化。
const routes = [ { path: "/a", component: MyComponent }, { path: "/b", component: MyComponent },];
如果你仍然希望重新渲染这些组件,则可以通过在 router-view 组件中提供 :key 属性来实现。
把所有Props传到子组件很容易
这是一个非常酷的功能,可让你将所有 props 从父组件传递到子组件。如果你有另一个组件的包装组件,这将特别方便。所以,与其把所有的 props 一个一个传下去,你可以利用这个,把所有的 props 一次传下去:
代替:
把所有事件监听传到子组件很容易
如果子组件不在父组件的根目录下,则可以将所有事件侦听器从父组件传递到子组件,如下所示:
......
如果子组件位于其父组件的根目录,则默认情况下它将获得这些组件,因此不需要使用这个小技巧。
$createElement
默认情况下,每个Vue实例都可以访问 $createElement 方法来创建和返回虚拟节点。例如,可以利用它在可以通过 v-html 指令传递的方法中使用标记。在函数组件中,可以将此方法作为渲染函数中的第一个参数进行访问。
使用JSX
由于Vue CLI 3默认支持使用JSX,因此现在(如果愿意)你可以使用JSX编写代码(例如,可以方便地编写函数组件)。如果尚未使用Vue CLI 3,则可以使用babel-plugin-transform-vue-jsx获得JSX支持。
自定义 v-model
默认情况下,v-model 是 @input 事件侦听器和 :value 属性上的语法糖。但是,你可以在你的Vue组件中指定一个模型属性来定义使用什么事件和value属性——非常棒!
export default: { model: { event: 'change', prop: 'checked' }}
总结
这绝不是VueJS技巧的完整列表,这些只是我个人认为最有用的一些,其中一些技巧使我花了很长时间才在Vue中进行实践,因此我认为我可以与大家分享这些知识。
希望他们像我一样对你有帮助!
你最喜欢的VueJS技巧和窍门是什么?我也很想向你学习!
如果对你有所启发和帮助,可以点个关注、收藏,也可以留言讨论,这是对作者的最大鼓励。
作者简介:Web前端工程师,全栈开发工程师、持续学习者。
现在关注《前端外文精选》微信公众号,还送某网精品视频课程网盘资料啊,准能为你节省不少钱!
vue双击事件_我总结了12个Vue.js开发技巧和窍门相关推荐
- 2020年的12个Vue.js开发技巧和窍门
微信搜索[前端全栈开发者]关注这个脱发.摆摊.卖货.持续学习的程序员的公众号,第一时间阅读最新文章,会优先两天发表新文章.关注即可大礼包,送某网精品视频课程网盘资料,准能为你节省不少钱! 我真的很喜欢 ...
- vue nodejs 构建_如何使用nodejs后端打字稿版本开发和构建vue js应用
vue nodejs 构建 There are so many ways we can build Vue.js apps and ship for production. One way is to ...
- pyqt5 treeview鼠标右键菜单事件_【动手实践】使用 Vue 自定义指令实现右键菜单...
本文来自于 神奇的程序员 前言 浏览器里右键时会有一个默认的菜单,在我的开源项目中正好有自定义右键菜单的需求,在npm库找了下与之相关的包,发现都是以组件形式实现的,感觉那种做法太过繁琐. 于是,我就 ...
- vue 播报警报声_启发了一个简单的Vue 2警报组件SweetAlert
vue 播报警报声 vue2-简单 (vue2-simplert) Vue 2 Simple Alert Component (SweetAlert Inspired) Vue 2简单警报组件(受Sw ...
- vue族谱架构_一步步带你做vue后台管理框架(一)——介绍框架
系列教程<一步步带你做vue后台管理框架>第一课 线上体验地址:立即体验 Features 特性
- 基于vue前端框架_基于前端访问控制框架的Vue
基于vue前端框架 权限访问控制 (vue-access-control) Vue-Access-Control is a solution of front-end user rights cont ...
- h5应用 vue 钉钉_钉钉企业内部H5微应用开发
企业内部H5微应用开发 分为 服务端API和前端API的开发,主要涉及到进入应用免登流程和JSAPI鉴权. JSAPI鉴权开发步骤: 1.创建H5微应用 登入钉钉开放平台(https://open-d ...
- node.js 静态属性_如何使用静态站点和Node.js开发和部署第一个全栈式Web应用程序
node.js 静态属性 This tutorial will show you how to convert a static website that uses HTML, CSS and Jav ...
- NodeJ+Express+Vue+ElementUI+multer 实现upload文件上传(纯JS开发后台功能),记住不是java的哦
本帖子用于本人开发过程中,开心了想记录的一些知识点,转载请附上原文链接 ^V^ 啾咪啾咪 1. .vue 页面的代码,什么引入啥啥的略过喏 template里的代码块 <el-form-item ...
最新文章
- 2018AI最佳应用回顾
- 进阶篇第十一期:高德地图的使用
- IE6/7/8/9中Table/Select的innerHTML不能赋值
- 【十问十答】粒子群算法(PSO)
- Linux01-BASH的while流程控制41
- 常用 API 函数(10): 硬件与系统函数
- Solr Facet 查询
- 统计字符串中每种字符类型的个数demo
- php join a.id b.id,mysql求助 请问where a.id=b.id 和join on a.id=b.id 在效率上的区别
- 使用浏览器获取网页模板(HTML+CSS)
- 2亿用户背后的Flutter应用框架Fish Redux
- float去掉小数点之后_float类型的存储方式
- Vue2.0项目安装Mint-UI - cmd篇
- 关于手机端适配的问题(rem,页面缩放)
- vnpy软件架构分析
- 集合:在我的世界里,你就是唯一 - 零基础入门学习Python027
- excel_applications
- Java常用工具类总结
- 【高等数学】多元函数f(x,y...)的泰勒(Taylor)展开式
- 千兆以太网在国产FPGA(智多晶)上的实现