学习笔记1

学习笔记1

---

---

前言

自己的从零开始

---

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、子组件可以使用 $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 :

1. 声明一个vue，相当于 new Vue({})
2. 达到可复用的目的，也就是说，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、绝对路径中“./”、“…/”、“…/…/”代表的含义

“./” 代表目前所在目录
“…/”代表上一层目录
"…/…/"代表上上层目录.

1. 文件在当前目录(在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.