• Vue和jQuery的使用比较
  • 发布于 2个月前
  • 189 热度
    0 评论
  • BruceLe
  • 0 粉丝 11 篇博客
  •   
小白有个烦恼,做前端项目的时候,遇到两种情况,一种是在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代码
input[type="date"]::-webkit-calendar-picker-indicator {
        background: transparent;
        bottom: 0;
        color: transparent;
        cursor: pointer;
        height: auto;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: auto;
    }
经过梳理小白发现整理的都是最基础的问题,也了解了本质是自己对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.Fprintf 方法签名:Fprintf(w io.Writer, format string, a ...interface{}) (n int, err error)
                  具体使用:甲:n, err := fmt.Fprintf(os.Stdout, "%s is %d years old.\n", name, age),返回写的字节数和是否有错误
                          乙:fmt.Fprintf(os.Stderr, "Fprintf: %v\n", err),其中返回值也可以忽略

        2.Fprint   方法签名:Fprint(w io.Writer, a ...interface{}) (n int, err error)

        3.Fprintln 方法签名:Fprintln(w io.Writer, a ...interface{}) (n int, err error) 打印到指定输出并换行

        4.Printf   方法签名:Printf(format string, a ...interface{}) (n int, err error)
                   具体使用:fmt.Printf("%d bytes written.\n", n)
                   内部调用Fprintf并指定标准输出

        5.Print    方法签名:Print(a ...interface{}) (n int, err error)
                   内部调用Fprint并指定标准输出

        6.Println  方法签名:Println(a ...interface{}) (n int, err error)
                   内部调用Fprintln并指定标准输出

        7.Sprintf  方法签名:Sprintf(format string, a ...interface{}) string

        8.Sprint   方法签名:Sprint(a ...interface{}) string
                   具体使用:s := fmt.Sprint(name, " is ", age, " years old.\n")

        9.Sprintln 方法签名:Sprintln(a ...interface{}) string
                   具体使用:s := fmt.Sprintln(name, "is", age, "years old.")
                   使用其操作数的默认格式格式化并返回結果字符串。操作数之间总是添加空格并附加换行符。

        区别:1.F 开头输出到指定输出,S 开头返回字符串,P 开头输出到标准输出
             2.f 结尾,指定格式化方式格式化字符串,t 结尾,使用操作数默认的格式化方式,ln 结尾,使用操作数默认的格式化方式,并换行
 通过这次整理,小白完全弄清楚了Print不同的使用方式,再也没有了混乱的感觉!
用户评论