# webDemo

**Repository Path**: feifeiche123/webDemo

## Basic Information

- **Project Name**: webDemo
- **Description**: 使用vue全家桶+webpack 跟着老张一起学
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-03-12
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# my-demo

# 安装 vue脚手架3.x
``` bat
npm install @vue/cli@3.0.3 -g
vue -V -->查看版本
```
## 创建项目 
``` bat
vue create my-demo 
```

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn run serve
```

### Compiles and minifies for production
```
yarn run build
```

### Run your unit tests
```
yarn run test:unit
```


# ES6学习

# 1、字符串表达式

### 在之前我们都是这样使用字符串表达式
``` javascript
var name = 'id is ' + bid+ ' ' + aid + '.'
var url = 'http://localhost:5000/api/values/' + id
```
### 在ES6中我们有了新语法，在反引号包裹的字符串中，使用${NAME}语法来表示模板字符:
``` javascript
var name = `id is ${aid} ${bid}`
var url = `http://localhost:5000/api/values/${id}`//注意是反引号，英文输入下下的，Tab键上边的那个
```
 
# 2、还有就是多行表达式的写法

``` javascript
//之前我们都是这么写的
var roadPoem = '这个是一个段落'
    + '换了一行'
    + '增加了些内容'
    + 'dddddddddd'
 
//但是在ES6中，可以使用反引号
var roadPoem = `这个是一个段落
   换了一行
    增加了些内容,
    dddddddddd
    结尾,`
 ```

 # 参数默认值 && rest参数
 ### 1、 在ES6中，可以像C#那样定义默认参数

``` javascript 
function buyBook(price, count = 0.9){
    return price * count;
}
buyBook(100);

//甚至可以将方法的值赋给参数
function buyBook(price, count =GetCount()){
    return price * count;
}
function GetCount(){
    return 100;
}

buyBook(200);
```

### 2、不仅如此，还可以快速获取参数值

``` javascript 
//ES6之前是这样的
function add(a,b,c){
    let total = a + b + c;
    return total;
}
add(1, 2, 3);

//ES6你可以这么操作，提供了 rest 参数来访问多余变量
function sum(...num) {
    let total = 0;
    for (let i = 0; i < num.length; i++) {
        total = total + num[i];
    }
    return total;
}
sum(1, 2, 3, 4, 6);
```

# 箭头函数
``` javascript 
var obj = {
    data: {
        books: "",
        price: 0,
        bookObj: null
    },
　　 bind() {//注意！ES6 中，可以使用这种方法简写函数，等价于 bind: function () {
        var that = this;
　　　　　//普通函数
        //$(".ok").click(function () {
　　　　 //    console.log(this);//这个时候，this，就是 .ok 这个Html标签
        //    var bookItem = that.data.bookObj;
        //    var _parice = $(bookItem).data("price");
        //    var _book = $(bookItem).data("book");
        //    that.data.books += _book + ",";
        //    that.data.price += parseInt(_parice);
        //    that.show();
        //});

　　　　 //箭头函数
        $(".ok").click(() => {
            var bookItem = this.data.bookObj;//在箭头函数中，this指向的是定义函数时所在的对象
            var _parice = $(bookItem).data("price");
            var _book = $(bookItem).data("book");
            this.data.books += _book + ",";
            this.data.price += parseInt(_parice);
            this.show();
            $(".bg,.popupbox").hide();

        });
    },
}
```
 

>在普通的click函数中 this 指向对象  $(".ok") ，因此，我们如果想要获取定义的对象中的数据（obj.data），那我们只能在 click 方法前，就去用一个 that 自定义变量来保存这个 this ，

>但是在箭头函数中就不一样了，this 始终指向定义函数时所在的对象（就是 obj 对象）；

>是不是更方便些！

### 在Vue中，也经常使用 vue实例，或者this来获取相应的值
``` javascript
var vm = new Vue({
    el:'#root',
    data:{
        tasks:[]
    },
    mounted(){
        axios.get('/tasks')
        .then(function (response) {
            vm.tasks = response.data;//使用Vue实例
        })
    },
    mounted2(){
           axios.get('/tasks')
            .then(response => this.tasks = response.data);//箭头函数 this 
    }
});
```

# var、let 与 const 块作用域

### 1、ES6之前，JavaScript 并没有块级作用域，所谓的块，就是大括号里面的语句所组成的代码块，比如

``` javascript
function blog(bl) {
    if (bl) {
        var foo = "Blog";
    }
    console.log(foo);
}

blog(true); //=> Blog
``` 

### 2、虽然变量foo 位于 if 语句的代码块中，但是 JavaScript 并没有块级作用域的概念，因此被添加到了当前的执行环境 - 即函数中，在函数内都可以访问到。

>因此：var 定义的变量是函数级作用域，作用范围是在函数开始阶段和函数执行完成之前内都是存在的；

>　并且如果该函数内部还存在匿名函数等特殊函数,这个 var 出的变量在匿名函数中仍然可以用; 

 

### 3、在ES出现后，定义了一个新的命名方式 let 

``` javascript
function Blog(bool) {
    if (bool) {
        let foo = "Blog";
    } else {
        console.log(foo);
    }
}
Blog(false); //这里会报错 Uncaught ReferenceError: foo is not defined
``` 


>因此，使用 let，上述问题完全解决，let出的变量作用域是 块作用域，在离开某一代码块,该变量就会被销毁不存在

>应当尽可能的避免用 var，用 let 来代替，除非你需要用到变量提升。

 

 ### 4、随着面向对象思维的出现，JS也出现了常量的定义 const

>const 与 let 的基本用法相同，定义的变量都具有块级作用域，也不会发生变量提升。不同的地方在于，const 定义的变量，只能赋值一次。

``` javascript
const foo='Blog';
function Blog(bool) {
    if (bool) {
         foo = "Vue";
    } else {
        console.log(foo);
    }
}
Blog(true); //这里会报错 Identifier 'foo' has already been declared
``` 


>因此const多用作不发生变化的变量定义，比如定义月份，或者，星期等:const months = [];