小白致力于成为前后端开发程序员
小白有个烦恼,做前端项目的时候,遇到两种情况
一种是在vue框架下,使用HTML写页面,script部分代码里面的方法基本上使用JS来写;
一种同样在vue框架下,通过安装的框架来构建页面,script中使用的方法也多是安装的框架中封装好的方法。
小白是个倒霉催的孩子,负责的项目比较多,常常在两种情况下切来切去,以至于在写JS处理数据时,常常用不对方法,
再加上小白JS基础本来就不雄厚,常常花费很长时间处理一个JS问题,这还是通过搜索解决的。
于是小白就想写一点总结的内容,把遇到的点滴问题记录下来,逐步增加处理VUE中JS的方法
那么第一个问题就写JS对象处理吧。
1.对象属性的删除
1 let object = {key:value,key1:value1} 2 this.$delete(this.object, 'key') 3 或者 delete this.object[key]
2.判断是否存在某属性
1 let object = {key:value,key1:value1} 2 this.object.hasOwnProperty('key')
第二个问题写JQuery数组处理
1.数组对象的删除
1 let array = [] 2 delete this.array[index]
2.数组对象的查找
1 let array = [{field:v1},{field:v2}] 2 let index = this.array.findIndex(a => a.field == 'v2') 3 let item = this.array.find(a => a.field == 'v1')
这边需要注意一个方法:remove,remove方法应该是JQuery用于处理删除html元素的,在处理数据时不应考虑
3.数组的批量删除
1 let array = ['mark', 'go', 'C#'] 2 this.array.splice(index, num)
4.最后一个问题不是一个JQuery的问题,而是一个关于CSS的问题,记录下来一是因为对于CSS真的会的不多,一是觉着这个问题应该会普遍。
就是input type='date'的html时间控件,只能点击一个小图标选择日期,通过修改CSS使可点击范围扩大到选择的时间,不多说直接上CSS代码
1 input[type="date"]::-webkit-calendar-picker-indicator { 2 background: transparent; 3 bottom: 0; 4 color: transparent; 5 cursor: pointer; 6 height: auto; 7 left: 0; 8 position: absolute; 9 right: 0; 10 top: 0; 11 width: auto; 12 }
经过梳理小白发现整理的都是最基础的问题,也了解了本质是自己对JQuery掌握不熟练才会有混乱的感觉,才会不知道如何去用方法处理数据。
事实上,NodeJs是在JS的基础上开发出来的,只要掌握JS JQuery的方法,直接拿到开发VUE中同样是可以使用的,不管VUE如何封装,
如何包装方法,其本质是不会变的,就是在JS和html的基础上做了封装。虽然小白整理的方法都很基础,但是通过整理小白发现了本质,解决了困惑这个才是最重要的。
关于掌握不熟练有混乱的感觉,小白想起来在学习 go 的时候,碰到各种打印方法——Print、Fprint、Sprint,同样会有混乱的感觉。好在 Go 的所有源码在安装好Go后都会在安装目录中找到,
于是小白查看了fmt包中的 print.go 的源码并对其中的Print的方法做了笔记和整理,下面是小白整理的笔记:
通过查看包fmt中的print.go文件,查找到print的相关方法有:
Fprintf、Printf、Sprintf、Fprint、Print、Sprint、Fprintln、Println、Sprintln
print.go文件中有以上9个方法的具体实现,在这仅仅做一下总结,想看源码就直接打开print.go文件查看即可
1 1.Fprintf 方法签名:Fprintf(w io.Writer, format string, a ...interface{}) (n int, err error) 2 具体使用:甲:n, err := fmt.Fprintf(os.Stdout, "%s is %d years old.\n", name, age),返回写的字节数和是否有错误 3 乙:fmt.Fprintf(os.Stderr, "Fprintf: %v\n", err),其中返回值也可以忽略 4 5 2.Fprint 方法签名:Fprint(w io.Writer, a ...interface{}) (n int, err error) 6 7 3.Fprintln 方法签名:Fprintln(w io.Writer, a ...interface{}) (n int, err error) 打印到指定输出并换行 8 9 4.Printf 方法签名:Printf(format string, a ...interface{}) (n int, err error) 10 具体使用:fmt.Printf("%d bytes written.\n", n) 11 内部调用Fprintf并指定标准输出 12 13 5.Print 方法签名:Print(a ...interface{}) (n int, err error) 14 内部调用Fprint并指定标准输出 15 16 6.Println 方法签名:Println(a ...interface{}) (n int, err error) 17 内部调用Fprintln并指定标准输出 18 19 7.Sprintf 方法签名:Sprintf(format string, a ...interface{}) string 20 21 8.Sprint 方法签名:Sprint(a ...interface{}) string 22 具体使用:s := fmt.Sprint(name, " is ", age, " years old.\n") 23 24 9.Sprintln 方法签名:Sprintln(a ...interface{}) string 25 具体使用:s := fmt.Sprintln(name, "is", age, "years old.") 26 使用其操作数的默认格式格式化并返回結果字符串。操作数之间总是添加空格并附加换行符。 27 28 区别:1.F 开头输出到指定输出,S 开头返回字符串,P 开头输出到标准输出 29 2.f 结尾,指定格式化方式格式化字符串,t 结尾,使用操作数默认的格式化方式,ln 结尾,使用操作数默认的格式化方式,并换行
通过这次整理,小白完全弄清楚了Print不同的使用方式,再也没有了混乱的感觉!