学习笔记1
文章目录
- 学习笔记1
- 前言
- 1、var、let、const的区别
- 2、关于then()方法的理解
- 3、blur()、trigger()使用
- 4、text/html和text/plain的区别
- 5、this. $ route 和 this. $ router
- 6、URL 链接中 井号#、问号?、连接符&
- 7、v-loading实现加载效果
- 8、vue中 关于$emit的用法
- 9、arg 是变元(即自变量argument)的英文缩写。
- 10、vue中使用element-ui 里面的按钮点击后显示加载中,防止重复提交
- 11、Vue中的export default 和带返回值的data()以及@符号的作用
- 12、两个div之间的上下距离
- 13、绝对路径中“./”、“../”、“../../”代表的含义
- 14、vue.nextTick()方法的使用详解
- 15、=> js 中箭头函数使用总结
- 16、split 分割 字符串(分隔符如:* ^ : | , .) 及注意点
- 17、push()方法的使用
- 18、 VUE中 v-for的双重循环
- 19、el-ui自定义标题和标签(不一定通用)
- 20、接收前端传blob对象
- 21、IOException:是Exception的子类
- 22、javascript中if(a)不同情况下的结果
- 23、
- 24、数组长度和对象数组长度
- 25、关于@Param
- 26、SQL语句#与$的区别
- 27、Vue中重置data的数据为初始状态
- 28、元素位置浮动
- 29、ElementUI的el-form格式化布局
- 30、vue赋值数组给新数组, 改变新数组原数组发生变化
- 31、根据对象数组的对象属性找对象
- 32、简单的刷新跳转界面
- 33、Mybatis中关于foreach
- 34、前端弹出提示 后台操作
- 35、Java中List for循环的6种写法总结
- 36、padding用法
- 37、 vue项目中form data形式传参
- 38、根据后台返回数据数值,在前端显示文字
- 39、mysql中去重 distinct , group by
- 40、springBoot项目org.springframework.validation.BeanPropertyBindingResult:错误
前言
自己的从零开始
1、var、let、const的区别
块作用域由 { } 包括,if语句和for语句里面的{ }也属于块作用域。
var定义的变量,没有块的概念,可以跨块访问, 不能跨函数访问。
let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问。
const用来定义常量,使用时必须初始化(即必须赋值),只能在块作用域里访问,而且不能修改。
同一个变量只能使用一种方式声明,不然会报错
2、关于then()方法的理解
then() 只有在Promise对象中才有。
then()方法是异步执行。
意思是:就是当.then()前的方法执行完后再执行then()内部的程序,这样就避免了,数据没获取到等的问题。
语法:promise.then(onCompleted, onRejected);
参数
必需。(promise)
Promise 对象。
必需。(onCompleted)
承诺成功完成时要运行的履行处理程序函数。
可选。(onRejected)
承诺被拒绝时要运行的错误处理程序函数。
3、blur()、trigger()使用
当元素失去焦点时发生 blur 事件。
blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时执行的代码。
提示:早前,blur 事件仅发生于表单元素上。在新浏览器中,该事件可用于任何元素。
在每一个匹配的元素上触发某类事件。
这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个’submit’,则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。
你也可以触发由bind()注册的自定义事件而不限于浏览器默认事件。
事件处理函数会收到一个修复的(规范化的)事件对象,但这个对象没有特定浏览器才有的属性,比如keyCode。
jQuery也支持 <a href="http://docs.jquery.com/Namespaced_Events">命名空间事件</a>
。这允许你触发或者解除绑定一组特定的事件处理函数,而无需一一个指定。你可以在事件类型后面加上感叹号 ! 来只触发那些没有命名空间的事件处理函数。
4、text/html和text/plain的区别
1、text/html的意思是将文件的content-type设置为text/html的形式,浏览器在获取到这种文件时会自动调用html的解析器对文件进行相应的处理。
2、text/plain的意思是将文件设置为纯文本的形式,浏览器在获取到这种文件时并不会对其进行处理。
5、this. $ route 和 this. $ router
this.$route 是路由【参数对象】,所有路由中的参数, params, query 都属于它
data(){
return{
id:this.$route.params.id // 一加载就调用
}
}
this.$router 是路由【导航对象】,用它 可以方便的 使用 JS 代码,实现路由的 前进、后退、 跳转到新的 URL 地址
goTo(id){
// 字符串
this.$router.push("/detail/"+id);
}
6、URL 链接中 井号#、问号?、连接符&
#,井号:表示网页中的一个位置,被称之为锚点,常用于某个网页间不同位置的跳转,简单的说就是在一个网页中,URL 不变的情况下,通过添加“#buy”的字符在 URL 最后可以跳转到当前网页中已经定义好的锚点(id=“buy”)位置;同样#的改变也会增加浏览器的历史记录,也就是说我们可以通过“后退”按钮回到上一个位置,而熟悉网页开发的朋友们可能也会用于 ajax 的一些操作中,以此来实现不同的访问状态和改变页面访问内容,从而也可以实现那种无刷新载入的效果。
?,问号:常用于动态网站,实现不同的参数值而生成不同的页面或者返回不同的结果,例如 WordPress 的动态链接就是/?p=ID,其中的 p 就表示 post 文章,ID 就表示文章的 ID,从而可以通过文章的 ID 来访问不同的文章。当然我们还常用的就是通过问号+任意参数来实现页面的刷新,从而获得最新的页面或者缓存的刷新。
&,连接符:既然被叫做是链接符号,那就是连接的作用,也可以说是不同参数的间隔符,一般与问号结合使用,一个动态 URL 链接中以问号开始第一个参数,同&连接符来串联多个参数和值。
7、v-loading实现加载效果
使用v-loading在接口为请求到数据之前,显示加载中,直到请求到数据后消失。
在data 中定义初始化, loading: false
用到的地方将 this.loading设置为true,完成后将 this.loading 设为false,到达效果。
8、vue中 关于$emit的用法
1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 e m i t 触 发 父 组 件 的 自 定 义 事 件 。 v m . emit 触发父组件的自定义事件。 vm. emit触发父组件的自定义事件。vm.emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn;
9、arg 是变元(即自变量argument)的英文缩写。
10、vue中使用element-ui 里面的按钮点击后显示加载中,防止重复提交
<el-button type="primary" @click="checkAuditsubmit" :loading="loadingbut">{
{loadingbuttext}}</el-button>
在data中定义变量
data(){
loadingbut:false,//审核提交加载中
loadingbuttext:'确定',
}
在事件方法中
checkAuditsubmit() {
this.loadingbut = true;
this.loadingbuttext = '审核中...';
......
//访问接口获取成功以后再改变状态
this.loadingbut = false;
this.loadingbuttext = '确定';
}
还可以添加disabled来防止按钮重复提交
使用:disabled=”isDisabled” 来判断,isDisabled默认为false,当用户点击按钮后,将isDisabled置为true,当增加或修改完毕后,在将isDisabled置为false即可
11、Vue中的export default 和带返回值的data()以及@符号的作用
export default :
- 声明一个vue,相当于 new Vue({})
- 达到可复用的目的,也就是说,export default 相当于导出当前vue组件,在其它引入当前组件时可以使用当前组件中的方法和变量。
data():
• 起到局部变量的作用。也就是说,这个data()中return的变量和方法只限于当前声明此data()的组件使用。如果全局vue有个变量叫 user,当前组件也有个变量叫user,那vue里面的到底用哪个?所以data()就起到了变量隔离的一种效果。
引入组件时路径上加上@符:
import model from "@/common/model";
@ 等价于 /src 这个目录,避免写麻烦又易错的相对路径
12、两个div之间的上下距离
<div style="margin-bottom:10px;">设下边距为10像素</div>
<div style="margin-top:10px;">设上边距为10像素</div>
padding-top:10px; padding-bottom:10px; //定义上(下)边距为10px;
此法的好处是,当有浮动存在的时候,可以解决ie6的双边距问题。
13、绝对路径中“./”、“…/”、“…/…/”代表的含义
“./” 代表目前所在目录
“…/”代表上一层目录
"…/…/"代表上上层目录.
- 文件在当前目录(在UserController.js调用index.js)
“./index.js”
2.文件在上层目录下(在UserController.js调用Controller.js)
“…/Controller.js”
3.文件在上上层目录下(在UserController.js调用services目录下的ObjestNotFoundError.js)
“…/…/services/ObjestNotFoundError.js”
14、vue.nextTick()方法的使用详解
nextTick(),是将回调函数延迟在下一次dom更新数据后调用
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM
vue改变dom元素结构后使用vue.$nextTick()方法来实现dom数据更新后延迟执行后续代码
15、=> js 中箭头函数使用总结
箭头函数 是在es6 中添加的一种规范
x => x * x 相当于 function(x){return x*x}
箭头函数相当于 匿名函数, 简化了函数的定义。
箭头函数有两种格式, 一种只包含一个表达式,没有{…} 和 return 。 一种包含多条语句, 这个时候{} return 就不能省略
x => {
if (x>0){
return x*x
}else{
return x
}
}
如果有多个参数就要用():
// 两个参数返回后面的值
(x, y) =>x*y + y*y
//没有参数
() => 999
// 可变参数
(x, y, ...rest) =>{
var i,sum = x+y;
for (i=0;i<rest.length;i++){
sum += rest[i];
}
return sum;
}
如果要返回一个单对象, 就要注意, 如果是单表达式, 上面一种会报错, 要下面这种
// 这样写会出错
x => {foo:x} // 这和函数体{}有冲突
// 写成这种
x => {
{foo:x}}
箭头函数中的this是词法作用域, 由上写文确定
箭头函数修复了this的指向, this 总是指向词法作用域, 也就是外层调用者obj:
在ES6中,会默认采用严格模式,因此this也不会自动指向window对象了,而箭头函数本身并没有this,因此this就只能是undefined,这种情况,如果你还想用this,就不要用使用箭头函数的写法。
16、split 分割 字符串(分隔符如:* ^ : | , .) 及注意点
单个符号作为分隔符
String address="上海|上海市|闵行区|吴中路";
String[] splitAddress=address.split("\\|");
//如果以竖线为分隔符,则split的时候需要加上两个斜杠【\\】进行转义
System.out.println(splitAddress[0]+splitAddress[1]+splitAddress[2]+splitAddress[3]);
String address="上海*上海市*闵行区*吴中路";
String[] splitAddress=address.split("\\*");
System.out.println(splitAddress[0]+splitAddress[1]+splitAddress[2]+splitAddress[3]);
String address="上海:上海市:闵行区:吴中路";
String[] splitAddress=address.split("\\:");
System.out.println(splitAddress[0]+splitAddress[1]+splitAddress[2]+splitAddress[3]);
String address="上海.上海市.闵行区.吴中路";
String[] splitAddress=address.split("\\.");
System.out.println(splitAddress[0]+splitAddress[1]+splitAddress[2]+splitAddress[3]);
String address="上海^上海市^闵行区^吴中路";
String[] splitAddress=address.split("\\^");
System.out.println(splitAddress[0]+splitAddress[1]+splitAddress[2]+splitAddress[3]);
String address="上海@上海市@闵行区@吴中路";
String[] splitAddress=address.split("@");
System.out.println(splitAddress[0]+splitAddress[1]+splitAddress[2]+splitAddress[3]);
String address="上海,上海市,闵行区,吴中路";
String[] splitAddress=address.split(",");
System.out.println(splitAddress[0]+splitAddress[1]+splitAddress[2]+splitAddress[3]);
多个符号作为分隔符
String address="上海^上海市@闵行区#吴中路";
String[] splitAddress=address.split("\\^|@|#");
System.out.println(splitAddress[0]+splitAddress[1]+splitAddress[2]+splitAddress[3]);
总结:(1)split表达式,其实就是一个正则表达式。* ^ | 等符号在正则表达式中属于一种有特殊含义的字符,如果使用此种字符作为分隔符,必须使用转义符即\加以转义。
(2)如果使用多个分隔符则需要借助 | 符号,如【2】所示,但需要转义符的仍然要加上分隔符进行处理。
17、push()方法的使用
push()方法在数组的尾部添加一个或多个元素,并返回数组新的长度,修改并替换了原始数组而非生成一个修改版的新数组。
基本用法
var totalArr=[1,2,3];
var pushArr=[4,5,6];
pushArr.