vue你不知道的奇淫绝技
1.placeholder与computed巧用
表单开发肯定是日常开发中必不可少的环节,可是设计图经常会有表单默认值的设计,比如:
需求方的需求点是:在没有输入值的时候显示默认值,在输入值的时候显示输入值。
通常就能想到用placeholder
来解决这个问题,并且通常会用v-model
来绑定data
中的值。然后,data
的值再设定默认值为空
//script
data(){return {index:0,name:''}
}
//template
<input type="number" placeholder="默认值index" v-model="index"/>
<input type="text" placeholder="默认值name" v-model="name"/>
以上这种效果是,第一个input的placeholder的值显示不出,显示了index的值:0,不符合需求
第二种能显示placeholder的值,需求满足。
但是一些复杂的需求,比如,让用户选择城市名(city)和国家名(country),最后在一个变量(countryAndCity)上显示,这个时候就要用computed
//template
<input type="text" placeholder="城市" v-model="city"/>
<input type="text" placeholder="国家" v-model="country"/>
<input type="text" placeholder="国家+城市" v-model="countryAndCity"/>//script
data(){return {city:'',country:''}
},
computed:{countryAndCity () {let str = ''if(this.city && this.country){str = `${this.city}+${this.country}`}return str}
}
在上面就需要做个判断,当city和country有值的情况才显示结果,否则显示placeholder的值。
2.单选选中和多选选中的设计
诸如经过设计师设计的单选和多选按钮
单选按钮就比较简单了
//template
<li v-for="item, index in list" :class="{"active":currentIndex === index}" @click="select(index)">{{item}}</li>//scriptdata(){return {currentIndex:0,list:['aa','bb','cc','dd']}
},
methods:{select(index){this.currentIndex = index}
}
上面很简单,大概看看就懂了,这是单选的情况,那要是多选的情况呢,那就要换个思路了
首先换个数据格式
data(){return {list:[{text:'aa',isActive:false},{text:'bb',isActive:false}{text:'cc',isActive:false}']}
},
methods:{select(index){this.list[index].isActive = !this.list[index].isActive}
}
然后template就要变成这样
<li v-for="(item, index) in list" :class="{"active":item.isActive}" @click="select(index)">{{item.text}}</li>
3.动态组件和异步组件的使用
动态组件一般很少用到,但是要做动态引入组件的时候真的超级好用。之前做过的组件配置系统核心就是它。我用的是一个动态组件循环,然后用is获取组件名,用props获取各个组件的自定义props
<components :is="item.name" v-for="item, index in componentList" :props="item.props"></components>componentList:[{ name:'index',props:{title:'title'}}]
4.created和mounted的服务端渲染
created和mounted在客户端渲染时期window对象都是存在的,所以可以直接操作。
但是在服务端渲染时期,它们两者的window都是不存在的,所以要加一句判断,在所有逻辑前面
if(typeof window !== 'object') return ;
5.this.$emit的妙用
基于组件化思维,很多时候我们会把一个页面拆分成几个组件,然后会提取一些公用的组件,比如dialog弹窗组件,他的打开和关闭,都是根据引用组件页面的data的一个值来决定,
//app.vue
<dialog v-if="isDialog"></dialog>data(){return {isDialog:false}
}
methods:{showDialog(){this.isDialog = true}
}
但是关闭按钮通常是写在dialog组件内部的,也就是说,在引用组件页面是没有这个按钮可以点击的,
所以,可以在dialog里面将点击时间的信号传递出来,引用组件页面接收到了信号,再控制关闭
//dialog.vue<div @click="close"> 点击关闭 </div>methods:{close() {this.$emit('close')}
} //app.vue
<dialog v-if="isDialog" @close="closeDialog"></dialog>data(){return {isDialog:false}
}
methods:{showDialog(){this.isDialog = true},closeDialog(){this.isDialog = false}
}
大致的思路就是把真正关闭的操作,放在isDialog
的页面,方便操作。
后续还会出一个不这样引用,直接在methods的方法中引用的公用组件写法,敬请期待
6.css的scoped
vue中的css可以用scoped这个关键子来限制css的作用域
<style scoped>...</style>
这个日常就会用到,因为这样就不用考虑class的命名会重合,加上使用sass、less、stylus、postcss等css处理器,效果简直杠杠的。
但是如果你想改动到body这个元素的css样式,但是又不想改动公用layout模板。那你就可以在一个vue文件写两个style
标签
<style> body{...} </style>
<style scoped> .. .</style>
大概就先写这么多啦,之后再补充,欢迎关注
vue你不知道的奇淫绝技相关推荐
- 你可能不知道的 docker 命令的奇淫怪巧
你可能不知道的 docker 命令的奇淫怪巧 Intro 分享一些可能会用到的一些简单实用却可能是你不知道的 docker 命令 dangling images build 自己的 docker 镜像 ...
- 【JavaScript】转载:JS高端奇淫技巧
转自 : https://blog.csdn.net/github_38885296/article/details/91038735 感谢作者(流浪的狗和一坨屎)分享 众所周知, JavaScrip ...
- JS高端奇淫技巧(持续更新)
众所周知, JavaScript是一门很骚的语言, 写一句话有很多种表达方式, 语法怪异而风骚, 自由而散漫, 或许这就是JS成为最流行语言的原因吧. 本文收集了JS开发中常用的各种奇淫技巧, 一句话 ...
- 前端js奇淫技巧(一)
很多前端只会谢谢页面,一让他们接触js,就非常害怕. 我想有的东西,你越害怕,就越要了解它,读懂它,就会发现它还有你不知道的那一面美好. 好的,直入主题,直接说说js相关的一些奇淫技巧. 一.运算相关 ...
- Javascript高阶 奇淫巧技
向下取整最快方式 向下取整有很多方法, Math.floor, parseInt都可以, 不过两个非(~)运算符来取整是最方便的, 而且逻辑运算很快. 还可以用~~再加1来向上取整. ~~3.14 & ...
- 【C#冷知识系列】(一)那些你知道或者不知道的奇淫巧技
引子 正如我在个人介绍中所写,我是一个仍然坚持.NET的头铁高级软件工程师,研究C#,.NET已经六年多,一直坚持认为自己的能力不足以教授别人,所以一直没有想法写博客.工作几年,内容涵盖了.NET框架 ...
- 开发奇淫巧技Tips(Android篇)
没事会记录下开发的奇淫巧技,每个tips前都会标明开发语言,有更多更好的奇淫巧技可以发评论或者私聊,可以添加进来 1.Kotlin:View调用此方法传入url加载网络图片,如果是ImageView则 ...
- 多行文本注视 php,多行文本进行截断的奇淫巧技
本篇文章给大家带来的内容是关于多行文本进行截断的奇淫巧技,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 单行文字的截断非常简单,但是多行文字的截断可谓是非常头疼,刚学css时候就为了 ...
- asa防火墙升级固件_奇淫巧技 | 在路由器中添加策略,阻止电视系统升级
上一篇文章「长虹智能电视刷机降级,实现U盘安装第三方应用」中提到系统升级后会出现无法随意安装第三方应用的情况,当完成刷机后为了避免系统自动更新,你需要通过路由器阻止系统更新. 用openwrt类路由器 ...
- idea new对象后自动补全_IDEA的quot;奇淫巧技quot;
本期吉大浪潮俱乐部给大家带来了IDEA的快捷键用法总结.废话不多说,让我们赶紧开始吧!!! IDEA的奇淫巧技 前言 奇淫巧技是第一生产力 -鲁迅 玩笑归玩笑,掌握IDEA的常用功能,不仅能提高开发效 ...
最新文章
- 解题报告:AcWing 1165. 单词环(01分数规划、hash、经验优化)
- andoid x项目的优化 1
- VTK:Filtering之PerlinNoise
- Mercurial(Hg)基本操作
- java泛型——桥方法
- 排序算法 —— 计数排序
- python笔记之强制函数以关键字参数传参
- elasticsearch数据备份还原
- 智能家居告别荒蛮:机会与挑战并存
- 用ajax获取淘宝关键字接口
- 如果安卓和linux融合,今年手机厂商大吹特吹的内存融合技术,其实十年前网友就玩腻了...
- 一个壮观的雨瀑布视频
- 82_Linux检测指定ip指定端口是否开放
- [e袋购APP]高校物业管理的特点
- 移动硬盘损坏,文件系统变为RAW的恢复
- python朋友圈自动点赞_基于airtest的朋友圈自动点赞
- How to get admin priviledge in Vista using ziguang holes
- 5G工业路由器与4G无线路由器各自有何优缺点
- HTML实现图片切换
- 友元(友元函数、友元类、类成员函数的友元)
热门文章
- Android的JNI【实战教程】4⃣️--C调用Java代码
- 昨晚家里停网后,我动了邪念用Python破解了隔壁小姐姐的wifi密码
- 插件开发之360 DroidPlugin源码分析(一)初识
- linux的tar命令压缩26g文件,如何使用Linux上的tar命令压缩和解压缩文件 | MOS86
- python 打包_Python 打包指南
- spring 获取一个包下的所有bean_面试官问我:为什么 Spring 中的 bean 默认为单例?...
- 循环结果添加到集合_Excel VBA 8.4 Python中有集合直接获取唯一值,那Exce中可以吗?...
- java案例代码19--二分查找排序
- json中保存数据与解析数据与python中json模块做对应关系
- mac os虚拟机镜像_为旧型Mac电脑配置支持OS 9的网络启动